added "reset to default icon" button to icon picker

This commit is contained in:
zadam 2021-02-18 19:33:12 +01:00
parent 8e730c6ecf
commit 1f7997eeed
3 changed files with 52 additions and 50 deletions

65
package-lock.json generated
View File

@ -1,6 +1,6 @@
{ {
"name": "trilium", "name": "trilium",
"version": "0.45.10", "version": "0.46.0-beta",
"lockfileVersion": 1, "lockfileVersion": 1,
"requires": true, "requires": true,
"dependencies": { "dependencies": {
@ -1769,9 +1769,9 @@
"dev": true "dev": true
}, },
"caniuse-lite": { "caniuse-lite": {
"version": "1.0.30001185", "version": "1.0.30001187",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001185.tgz", "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001187.tgz",
"integrity": "sha512-Fpi4kVNtNvJ15H0F6vwmXtb3tukv3Zg3qhKkOGUq7KJ1J6b9kf4dnNgtEAFXhRsJo0gNj9W60+wBvn0JcTvdTg==", "integrity": "sha512-w7/EP1JRZ9552CyrThUnay2RkZ1DXxKe/Q2swTC4+LElLh9RRYrL1Z+27LlakB8kzY0fSmHw9mc7XYDUKAKWMA==",
"dev": true "dev": true
}, },
"caseless": { "caseless": {
@ -2712,9 +2712,9 @@
} }
}, },
"electron-dl": { "electron-dl": {
"version": "3.0.3", "version": "3.1.0",
"resolved": "https://registry.npmjs.org/electron-dl/-/electron-dl-3.0.3.tgz", "resolved": "https://registry.npmjs.org/electron-dl/-/electron-dl-3.1.0.tgz",
"integrity": "sha512-eh1zDc+cffWQ0wVjZj7YGSq5qSYsD2vxIeojJt2hoV0/2fOlLv57pqeRkVfrDrocVYRwAytphctunTXRKj1GmA==", "integrity": "sha512-nY3vvxX5w11+cFT6JkJwMHtH6dk5sPtjRtzjaj4NrS9CyYF3atvVt8yMfZtXruULU1JAuxEEf2B8O6YgXs9xsQ==",
"requires": { "requires": {
"ext-name": "^5.0.0", "ext-name": "^5.0.0",
"pupa": "^2.0.1", "pupa": "^2.0.1",
@ -3252,9 +3252,9 @@
} }
}, },
"electron-to-chromium": { "electron-to-chromium": {
"version": "1.3.657", "version": "1.3.667",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.657.tgz", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.667.tgz",
"integrity": "sha512-/9ROOyvEflEbaZFUeGofD+Tqs/WynbSTbNgNF+/TJJxH1ePD/e6VjZlDJpW3FFFd3nj5l3Hd8ki2vRwy+gyRFw==", "integrity": "sha512-Ot1pPtAVb5nd7jeVF651zmfLFilRVFomlDzwXmdlWe5jyzOGa6mVsQ06XnAurT7wWfg5VEIY+LopbAdD/bpo5w==",
"dev": true "dev": true
}, },
"electron-window-state": { "electron-window-state": {
@ -3303,9 +3303,9 @@
}, },
"dependencies": { "dependencies": {
"graceful-fs": { "graceful-fs": {
"version": "4.2.5", "version": "4.2.6",
"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.5.tgz", "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.6.tgz",
"integrity": "sha512-kBBSQbz2K0Nyn+31j/w36fUfxkBW9/gfwRWdUY1ULReH3iokVJgddZAFcD1D0xlgTmFxJCbUkUclAlc6/IDJkw==", "integrity": "sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ==",
"dev": true "dev": true
} }
} }
@ -5185,18 +5185,11 @@
"integrity": "sha512-svXaP8UQRZ5K7or+ZmfNhg2xX3yKDMUzqadsSqi4NCH/KomcH75MAMYAGVlvXn4+b/xOPhS3I2uHKRUzvjY7BQ==" "integrity": "sha512-svXaP8UQRZ5K7or+ZmfNhg2xX3yKDMUzqadsSqi4NCH/KomcH75MAMYAGVlvXn4+b/xOPhS3I2uHKRUzvjY7BQ=="
}, },
"mime-types": { "mime-types": {
"version": "2.1.28", "version": "2.1.29",
"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.28.tgz", "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.29.tgz",
"integrity": "sha512-0TO2yJ5YHYr7M2zzT7gDU1tbwHxEUWBCLt0lscSNpcdAfFyJOVEpRYNS7EXVcTLNj/25QO8gulHC5JtTzSE2UQ==", "integrity": "sha512-Y/jMt/S5sR9OaqteJtslsFZKWOIIqMACsJSiHghlCAyhf7jfVYjKBmLiX8OgpWeW+fjJ2b+Az69aPFPkUOY6xQ==",
"requires": { "requires": {
"mime-db": "1.45.0" "mime-db": "1.46.0"
},
"dependencies": {
"mime-db": {
"version": "1.45.0",
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.45.0.tgz",
"integrity": "sha512-CkqLUxUk15hofLoLyljJSrukZi8mAtgd+yE5uO4tqRZsdsAJKv0O+rFMhVDRJgozy+yG6md5KwuXhD4ocIoP+w=="
}
} }
}, },
"mimic-fn": { "mimic-fn": {
@ -5656,9 +5649,9 @@
} }
}, },
"open": { "open": {
"version": "7.4.1", "version": "7.4.2",
"resolved": "https://registry.npmjs.org/open/-/open-7.4.1.tgz", "resolved": "https://registry.npmjs.org/open/-/open-7.4.2.tgz",
"integrity": "sha512-Pxv+fKRsd/Ozflgn2Gjev1HZveJJeKR6hKKmdaImJMuEZ6htAvCTbcMABJo+qevlAelTLCrEK3YTKZ9fVTcSPw==", "integrity": "sha512-MVHddDVweXZF3awtlAS+6pgKLlm/JgxZ90+/NBurBoQctVOOB/zDdVjcyPzQ+0laDGbsWgrRkflI65sQeOgT9Q==",
"requires": { "requires": {
"is-docker": "^2.0.0", "is-docker": "^2.0.0",
"is-wsl": "^2.1.1" "is-wsl": "^2.1.1"
@ -7204,9 +7197,9 @@
"dev": true "dev": true
}, },
"terser": { "terser": {
"version": "5.5.1", "version": "5.6.0",
"resolved": "https://registry.npmjs.org/terser/-/terser-5.5.1.tgz", "resolved": "https://registry.npmjs.org/terser/-/terser-5.6.0.tgz",
"integrity": "sha512-6VGWZNVP2KTUcltUQJ25TtNjx/XgdDsBDKGt8nN0MpydU36LmbPPcMBd2kmtZNNGVVDLg44k7GKeHHj+4zPIBQ==", "integrity": "sha512-vyqLMoqadC1uR0vywqOZzriDYzgEkNJFK4q9GeyOBHIbiECHiWLKcWfbQWAUaPfxkjDhapSlZB9f7fkMrvkVjA==",
"dev": true, "dev": true,
"requires": { "requires": {
"commander": "^2.20.0", "commander": "^2.20.0",
@ -7669,9 +7662,9 @@
"integrity": "sha512-qBIvFLGiBpLjfwmYAaHPXsn+ho5xZnGvyGvsarywGNc8VyQJUMHJ8OBKGGrPER0okBeMDaan4mNBlgBROxuI8w==" "integrity": "sha512-qBIvFLGiBpLjfwmYAaHPXsn+ho5xZnGvyGvsarywGNc8VyQJUMHJ8OBKGGrPER0okBeMDaan4mNBlgBROxuI8w=="
}, },
"webpack": { "webpack": {
"version": "5.21.2", "version": "5.23.0",
"resolved": "https://registry.npmjs.org/webpack/-/webpack-5.21.2.tgz", "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.23.0.tgz",
"integrity": "sha512-xHflCenx+AM4uWKX71SWHhxml5aMXdy2tu/vdi4lClm7PADKxlyDAFFN1rEFzNV0MAoPpHtBeJnl/+K6F4QBPg==", "integrity": "sha512-RC6dwDuRxiU75F8XC4H08NtzUrMfufw5LDnO8dTtaKU2+fszEdySCgZhNwSBBn516iNaJbQI7T7OPHIgCwcJmg==",
"dev": true, "dev": true,
"requires": { "requires": {
"@types/eslint-scope": "^3.7.0", "@types/eslint-scope": "^3.7.0",
@ -7706,9 +7699,9 @@
"dev": true "dev": true
}, },
"graceful-fs": { "graceful-fs": {
"version": "4.2.5", "version": "4.2.6",
"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.5.tgz", "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.6.tgz",
"integrity": "sha512-kBBSQbz2K0Nyn+31j/w36fUfxkBW9/gfwRWdUY1ULReH3iokVJgddZAFcD1D0xlgTmFxJCbUkUclAlc6/IDJkw==", "integrity": "sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ==",
"dev": true "dev": true
} }
} }

View File

@ -35,7 +35,7 @@
"dayjs": "1.10.4", "dayjs": "1.10.4",
"ejs": "3.1.6", "ejs": "3.1.6",
"electron-debug": "3.2.0", "electron-debug": "3.2.0",
"electron-dl": "3.0.3", "electron-dl": "3.1.0",
"electron-find": "1.0.6", "electron-find": "1.0.6",
"electron-window-state": "5.0.3", "electron-window-state": "5.0.3",
"express": "4.17.1", "express": "4.17.1",
@ -52,10 +52,10 @@
"is-svg": "4.2.1", "is-svg": "4.2.1",
"jimp": "0.16.1", "jimp": "0.16.1",
"jsdom": "^16.4.0", "jsdom": "^16.4.0",
"mime-types": "2.1.28", "mime-types": "2.1.29",
"multer": "1.4.2", "multer": "1.4.2",
"node-abi": "2.19.3", "node-abi": "2.19.3",
"open": "7.4.1", "open": "7.4.2",
"portscanner": "2.2.0", "portscanner": "2.2.0",
"rand-token": "1.0.1", "rand-token": "1.0.1",
"request": "^2.88.2", "request": "^2.88.2",
@ -87,7 +87,7 @@
"jsdoc": "3.6.6", "jsdoc": "3.6.6",
"lorem-ipsum": "2.0.3", "lorem-ipsum": "2.0.3",
"rcedit": "3.0.0", "rcedit": "3.0.0",
"webpack": "5.21.2", "webpack": "5.23.0",
"webpack-cli": "4.5.0" "webpack-cli": "4.5.0"
}, },
"optionalDependencies": { "optionalDependencies": {

View File

@ -1,5 +1,4 @@
import TabAwareWidget from "./tab_aware_widget.js"; import TabAwareWidget from "./tab_aware_widget.js";
import server from "../services/server.js";
import attributeService from "../services/attributes.js"; import attributeService from "../services/attributes.js";
const TPL = ` const TPL = `
@ -11,14 +10,15 @@ const TPL = `
margin-right: 0; margin-right: 0;
} }
.note-icon-container button { .note-icon-container button.note-icon {
font-size: 180%; font-size: 180%;
background: transparent; background: transparent;
border: 1px solid transparent; border: 1px solid transparent;
cursor: pointer; cursor: pointer;
padding: 6px;
} }
.note-icon-container button:hover { .note-icon-container button.note-icon:hover {
border: 1px solid var(--main-border-color); border: 1px solid var(--main-border-color);
} }
@ -47,7 +47,6 @@ const TPL = `
.note-icon-container .icon-list { .note-icon-container .icon-list {
height: 500px; height: 500px;
overflow: auto; overflow: auto;
font-size: 180%;
} }
.note-icon-container .icon-list span { .note-icon-container .icon-list span {
@ -55,6 +54,7 @@ const TPL = `
padding: 10px; padding: 10px;
cursor: pointer; cursor: pointer;
border: 1px solid transparent; border: 1px solid transparent;
font-size: 180%;
} }
.note-icon-container .icon-list span:hover { .note-icon-container .icon-list span:hover {
@ -62,7 +62,7 @@ const TPL = `
} }
</style> </style>
<button class="btn dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="Change note icon"></button> <button class="btn dropdown-toggle note-icon" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="Change note icon"></button>
<div class="dropdown-menu" aria-labelledby="note-path-list-button" style="width: 610px;"> <div class="dropdown-menu" aria-labelledby="note-path-list-button" style="width: 610px;">
<div class="filter-row"> <div class="filter-row">
<span>Category:</span> <select name="icon-category" class="form-control"></select> <span>Category:</span> <select name="icon-category" class="form-control"></select>
@ -74,14 +74,11 @@ const TPL = `
</div> </div>
</div>`; </div>`;
let icons = [];
let categories = [];
export default class NoteIconWidget extends TabAwareWidget { export default class NoteIconWidget extends TabAwareWidget {
doRender() { doRender() {
this.$widget = $(TPL); this.$widget = $(TPL);
this.overflowing(); this.overflowing();
this.$icon = this.$widget.find('button'); this.$icon = this.$widget.find('button.note-icon');
this.$iconList = this.$widget.find('.icon-list'); this.$iconList = this.$widget.find('.icon-list');
this.$iconList.on('click', 'span', async e => { this.$iconList.on('click', 'span', async e => {
const clazz = $(e.target).attr('class'); const clazz = $(e.target).attr('class');
@ -120,7 +117,7 @@ export default class NoteIconWidget extends TabAwareWidget {
} }
async refreshWithNote(note) { async refreshWithNote(note) {
this.$icon.removeClass().addClass(note.getIcon()); this.$icon.removeClass().addClass(note.getIcon() + " note-icon");
} }
async entitiesReloadedEvent({loadResults}) { async entitiesReloadedEvent({loadResults}) {
@ -145,6 +142,18 @@ export default class NoteIconWidget extends TabAwareWidget {
async renderDropdown(categoryId, search) { async renderDropdown(categoryId, search) {
this.$iconList.empty(); this.$iconList.empty();
this.$iconList.append(
$(`<div style="text-align: center">`)
.append(
$('<button class="btn btn-sm">Reset to default icon</button>')
.on('click', () =>
this.note.getOwnedLabels()
.filter(label => ['workspaceIconClass', 'iconClass'].includes(label.name))
.forEach(label => attributeService.removeAttributeById(this.noteId, label.attributeId))
)
)
);
const {icons} = (await import('./icon_list.js')).default; const {icons} = (await import('./icon_list.js')).default;
for (const icon of icons) { for (const icon of icons) {