更改了完成与未完成的图标
This commit is contained in:
parent
a05dc15f69
commit
cea7e09e29
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 3.4 KiB |
1
XNSimHtml/assets/icons/png/cancel_b.svg
Normal file
1
XNSimHtml/assets/icons/png/cancel_b.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1746768520093" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="932" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M512 11.815385C236.307692 11.815385 11.815385 236.307692 11.815385 512S236.307692 1012.184615 512 1012.184615 1012.184615 787.692308 1012.184615 512 787.692308 11.815385 512 11.815385z m0 39.384615c256 0 460.8 204.8 460.8 460.8S768 972.8 512 972.8 51.2 768 51.2 512 256 51.2 512 51.2z" fill="#2c2c2c" p-id="933"></path><path d="M455.561846 670.72c-3.938462 0-3.938462 0 0 0-11.815385 0-15.753846-3.938462-19.692308-7.876923l-106.338461-149.661539c-3.938462-7.876923 0-19.692308 7.876923-27.56923s23.630769 0 27.569231 7.876923l90.584615 122.092307 259.938462-256c7.876923-7.876923 19.692308-7.876923 31.507692 0 7.876923 7.876923 7.876923 19.692308 0 27.569231l-275.692308 275.692308c-7.876923 7.876923-11.815385 7.876923-15.753846 7.876923z" fill="#2c2c2c" p-id="934"></path></svg>
|
||||||
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.6 KiB |
1
XNSimHtml/assets/icons/png/complete_b.svg
Normal file
1
XNSimHtml/assets/icons/png/complete_b.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1746768501089" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15615" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M512 19.692308C240.246154 19.692308 19.692308 240.246154 19.692308 512S240.246154 1004.307692 512 1004.307692 1004.307692 783.753846 1004.307692 512 783.753846 19.692308 512 19.692308z m0 35.446154c252.061538 0 456.861538 204.8 456.861538 456.861538S764.061538 968.861538 512 968.861538 55.138462 764.061538 55.138462 512 259.938462 55.138462 512 55.138462z" fill="#2c2c2c" p-id="15616"></path></svg>
|
||||||
|
After Width: | Height: | Size: 734 B |
@ -849,6 +849,267 @@ class TodoComponent extends HTMLElement {
|
|||||||
.show-completed-container:hover {
|
.show-completed-container:hover {
|
||||||
background: #e9ecef;
|
background: #e9ecef;
|
||||||
}
|
}
|
||||||
|
.show-all-button {
|
||||||
|
width: 100%;
|
||||||
|
padding: 8px 16px;
|
||||||
|
background-color: #007bff;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 14px;
|
||||||
|
transition: background-color 0.2s;
|
||||||
|
}
|
||||||
|
.show-all-button:hover {
|
||||||
|
background-color: #0056b3;
|
||||||
|
}
|
||||||
|
.show-all-button:active {
|
||||||
|
background-color: #004085;
|
||||||
|
}
|
||||||
|
.project-node {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
.project-header {
|
||||||
|
padding: 8px;
|
||||||
|
background: #e9ecef;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.project-header-content {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
.project-header:hover {
|
||||||
|
background: #dee2e6;
|
||||||
|
}
|
||||||
|
.expand-icon {
|
||||||
|
font-size: 12px;
|
||||||
|
transition: transform 0.2s;
|
||||||
|
color: #495057;
|
||||||
|
}
|
||||||
|
.expand-icon.expanded {
|
||||||
|
transform: rotate(90deg);
|
||||||
|
}
|
||||||
|
.subprojects-container {
|
||||||
|
margin-left: 20px;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
.subproject-node {
|
||||||
|
padding: 6px 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 4px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.subproject-node:hover {
|
||||||
|
background: #e9ecef;
|
||||||
|
}
|
||||||
|
.todo-count {
|
||||||
|
font-size: 0.9em;
|
||||||
|
color: #6c757d;
|
||||||
|
}
|
||||||
|
.todo-item {
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid #e9ecef;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 15px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
|
||||||
|
}
|
||||||
|
.todo-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
padding-bottom: 8px;
|
||||||
|
border-bottom: 1px solid #e9ecef;
|
||||||
|
}
|
||||||
|
.todo-header h3 {
|
||||||
|
margin: 0;
|
||||||
|
color: #212529;
|
||||||
|
font-size: 1.1em;
|
||||||
|
}
|
||||||
|
.todo-content {
|
||||||
|
color: #495057;
|
||||||
|
}
|
||||||
|
.todo-info {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
font-size: 0.9em;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
.todo-info .label {
|
||||||
|
color: #6c757d;
|
||||||
|
}
|
||||||
|
.todo-info .value {
|
||||||
|
color: #212529;
|
||||||
|
}
|
||||||
|
.todo-description {
|
||||||
|
margin-top: 12px;
|
||||||
|
padding-top: 12px;
|
||||||
|
border-top: 1px solid #e9ecef;
|
||||||
|
color: #495057;
|
||||||
|
font-size: 0.95em;
|
||||||
|
}
|
||||||
|
.description-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
.description-actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
.description-content {
|
||||||
|
white-space: pre-wrap;
|
||||||
|
line-height: 1.5;
|
||||||
|
max-height: 100px;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: max-height 0.3s ease-out;
|
||||||
|
position: relative;
|
||||||
|
text-indent: 0; /* 移除缩进 */
|
||||||
|
}
|
||||||
|
.description-content.expanded {
|
||||||
|
max-height: 2000px;
|
||||||
|
}
|
||||||
|
.description-content:not(.expanded) {
|
||||||
|
max-height: 1.5em;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
text-indent: 0; /* 移除缩进 */
|
||||||
|
}
|
||||||
|
.description-content::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 40px;
|
||||||
|
background: linear-gradient(transparent, white);
|
||||||
|
pointer-events: none;
|
||||||
|
opacity: 1;
|
||||||
|
transition: opacity 0.3s ease-out;
|
||||||
|
}
|
||||||
|
.description-content.expanded::after {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
.toggle-button {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 4px;
|
||||||
|
border-radius: 4px;
|
||||||
|
transition: all 0.2s;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.toggle-button:hover {
|
||||||
|
background-color: rgba(121, 134, 231, 0.1);
|
||||||
|
}
|
||||||
|
.toggle-icon {
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
.toggle-button.expanded .toggle-icon {
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
.status {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 4px 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 0.9em;
|
||||||
|
}
|
||||||
|
.status.completed {
|
||||||
|
background: #d4edda;
|
||||||
|
color: #155724;
|
||||||
|
}
|
||||||
|
.status.pending {
|
||||||
|
background: #fff3cd;
|
||||||
|
color: #856404;
|
||||||
|
}
|
||||||
|
.error-message {
|
||||||
|
color: #721c24;
|
||||||
|
padding: 10px;
|
||||||
|
background: #f8d7da;
|
||||||
|
border-radius: 4px;
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
.selected {
|
||||||
|
background: #cfe2ff !important;
|
||||||
|
}
|
||||||
|
.executor-link {
|
||||||
|
color: #007bff;
|
||||||
|
text-decoration: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.executor-link:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
.schedule-link {
|
||||||
|
color: #007bff;
|
||||||
|
text-decoration: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.schedule-link:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
.add-todo-button {
|
||||||
|
margin-bottom: 15px;
|
||||||
|
padding: 8px 16px;
|
||||||
|
background-color: #7986E7;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 14px;
|
||||||
|
transition: background-color 0.2s;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.add-todo-button:hover {
|
||||||
|
background-color: #6875D6;
|
||||||
|
}
|
||||||
|
.add-todo-button:active {
|
||||||
|
background-color: #5A67D8;
|
||||||
|
}
|
||||||
|
.todo-actions {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
.edit-button, .delete-button, .complete-button {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 4px;
|
||||||
|
border-radius: 4px;
|
||||||
|
transition: all 0.2s;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.action-icon {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
.edit-button:hover {
|
||||||
|
background-color: rgba(121, 134, 231, 0.1);
|
||||||
|
}
|
||||||
|
.delete-button:hover {
|
||||||
|
background-color: rgba(220, 53, 69, 0.1);
|
||||||
|
}
|
||||||
|
.complete-button:hover {
|
||||||
|
background-color: rgba(40, 167, 69, 0.1);
|
||||||
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const modal = document.createElement('div');
|
const modal = document.createElement('div');
|
||||||
@ -1387,15 +1648,17 @@ class TodoComponent extends HTMLElement {
|
|||||||
|
|
||||||
todoElement.innerHTML = `
|
todoElement.innerHTML = `
|
||||||
<div class="todo-header">
|
<div class="todo-header">
|
||||||
|
<div class="todo-actions">
|
||||||
|
<button class="complete-button" title="${todo.completed ? '取消完成' : '标记完成'}">
|
||||||
|
<img src="assets/icons/png/${todo.completed ? 'cancel_b.svg' : 'complete_b.svg'}" alt="${todo.completed ? '取消完成' : '标记完成'}" class="action-icon">
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
<h3>${todo.project} - ${todo.subproject} - ${todo.title}</h3>
|
<h3>${todo.project} - ${todo.subproject} - ${todo.title}</h3>
|
||||||
<div class="todo-actions">
|
<div class="todo-actions">
|
||||||
<button class="edit-button" title="编辑标题">
|
<button class="edit-button" title="编辑标题">
|
||||||
<img src="assets/icons/png/sliders_b.png" alt="编辑" class="action-icon">
|
<img src="assets/icons/png/sliders_b.png" alt="编辑" class="action-icon">
|
||||||
</button>
|
</button>
|
||||||
<button class="complete-button" title="${todo.completed ? '取消完成' : '标记完成'}">
|
<button class="delete-button delete-red" title="删除待办">
|
||||||
<img src="assets/icons/png/${todo.completed ? 'cancel_b.png' : 'complete_b.png'}" alt="${todo.completed ? '取消完成' : '标记完成'}" class="action-icon">
|
|
||||||
</button>
|
|
||||||
<button class="delete-button" title="删除待办">
|
|
||||||
<img src="assets/icons/png/delete_b.png" alt="删除" class="action-icon">
|
<img src="assets/icons/png/delete_b.png" alt="删除" class="action-icon">
|
||||||
</button>
|
</button>
|
||||||
<span class="status ${todo.completed ? 'completed' : 'pending'}">
|
<span class="status ${todo.completed ? 'completed' : 'pending'}">
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user