更改了完成与未完成的图标
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 {
|
||||
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'}">
|
||||
|
Loading…
x
Reference in New Issue
Block a user