cat / diagramzip
clone

a browser-first diagram editor with live svg previews, local drafts and encrypted, accountless sharing

highlight unsaved diagram changes

Dami committed 3df8e9d
commit
3df8e9d6ab533295a3eadc19007ab4fbd9034154
parent
86690f4c2938d25ecdeb3e3db8844ffac858dffa
author
Dami <dami.etoile@gmail.com>
2 files changed, +10 -1
Mdiagramzip/src/main.js3++-
Mdiagramzip/src/style.css8++++++++
M diagramzip/src/main.js +2 -1
@@ -82,7 +82,7 @@ document.querySelector('#app').innerHTML = `
8282 <path d="M14 3.5V8h4M9 12h6M9 15.5h6"/>8383 </svg>8484 </button>85- <button class="header-icon-action" id="save" type="button" data-save-state="save" aria-label="Save" title="Save">85+ <button class="header-icon-action" id="save" type="button" data-save-state="save" data-dirty="true" aria-label="Save" title="Save">8686 <svg class="header-action-icon save-action-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">8787 <g data-save-icon="save">8888 <path d="M5 3.5h11.5L19 6v14.5H5v-17Z"/>
@@ -950,6 +950,7 @@ function updateSaveButton() {
950950 label = 'Save a copy'951951 }952952 button.dataset.saveState = state953+ button.dataset.dirty = String(remote.dirty)953954 button.setAttribute('aria-label', label)954955 button.title = label955956 button.disabled = disabled
M diagramzip/src/style.css +8 -0
@@ -9,6 +9,7 @@
99 --soft: #f3f3f3;1010 --action-bg: #000000;1111 --action-ink: #ffffff;12+ --unsaved: #b45309;1213 --danger: #333333;1314 --editor-active-line: #0000000b;1415 --editor-selection: #00000038;
@@ -231,6 +232,13 @@ button { cursor: pointer; }
231232 .header-icon-action:hover { background: var(--soft); }232233 .header-icon-action:disabled { cursor: default; opacity: .58; }233234 235+#save[data-dirty="true"] {236+ border-color: var(--unsaved);237+ box-shadow: inset 0 0 0 1px var(--unsaved);238+}239+240+#save[data-dirty="true"]:disabled { opacity: .72; }241+234242 .header-action-icon {235243 width: 20px;236244 height: 20px;