更改了完成与未完成的图标

This commit is contained in:
jinchao 2025-05-09 13:31:54 +08:00
parent a05dc15f69
commit cea7e09e29
6 changed files with 269 additions and 4 deletions

Binary file not shown.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.4 KiB

View 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

View 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

View File

@ -849,6 +849,267 @@ class TodoComponent extends HTMLElement {
.show-completed-container:hover {
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');
@ -1387,15 +1648,17 @@ class TodoComponent extends HTMLElement {
todoElement.innerHTML = `
<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>
<div class="todo-actions">
<button class="edit-button" title="编辑标题">
<img src="assets/icons/png/sliders_b.png" alt="编辑" class="action-icon">
</button>
<button class="complete-button" title="${todo.completed ? '取消完成' : '标记完成'}">
<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="删除待办">
<button class="delete-button delete-red" title="删除待办">
<img src="assets/icons/png/delete_b.png" alt="删除" class="action-icon">
</button>
<span class="status ${todo.completed ? 'completed' : 'pending'}">