From 384cac050733151bf80e677c5345ead4a44e3740 Mon Sep 17 00:00:00 2001 From: Verti Date: Tue, 12 Aug 2025 18:03:43 +0200 Subject: [PATCH 1/6] Add pink theme for tegaki, rearrange tegaki menu bar and add icons --- .../public/assets/ui/icon-add-layer.svg | 14 + .../public/assets/ui/icon-close.svg | 12 + .../public/assets/ui/icon-merge.svg | 12 + .../public/assets/ui/icon-move-down.svg | 12 + .../public/assets/ui/icon-move-up.svg | 12 + .../public/assets/ui/icon-pinksea.svg | 21 ++ .../public/assets/ui/icon-redo.svg | 12 + .../public/assets/ui/icon-tone.svg | 24 ++ .../public/assets/ui/icon-trash.svg | 12 + .../public/assets/ui/icon-undo.svg | 12 + .../public/assets/ui/tip-airbrush.svg | 20 ++ .../public/assets/ui/tip-brush.svg | 17 + .../public/assets/ui/tip-pencil.svg | 15 + PinkSea.Frontend/src/api/tegaki/tegaki.js | 56 +-- PinkSea.Frontend/src/assets/tegaki/tegaki.css | 332 +++++++++++++++--- 15 files changed, 517 insertions(+), 66 deletions(-) create mode 100644 PinkSea.Frontend/public/assets/ui/icon-add-layer.svg create mode 100644 PinkSea.Frontend/public/assets/ui/icon-close.svg create mode 100644 PinkSea.Frontend/public/assets/ui/icon-merge.svg create mode 100644 PinkSea.Frontend/public/assets/ui/icon-move-down.svg create mode 100644 PinkSea.Frontend/public/assets/ui/icon-move-up.svg create mode 100644 PinkSea.Frontend/public/assets/ui/icon-pinksea.svg create mode 100644 PinkSea.Frontend/public/assets/ui/icon-redo.svg create mode 100644 PinkSea.Frontend/public/assets/ui/icon-tone.svg create mode 100644 PinkSea.Frontend/public/assets/ui/icon-trash.svg create mode 100644 PinkSea.Frontend/public/assets/ui/icon-undo.svg create mode 100644 PinkSea.Frontend/public/assets/ui/tip-airbrush.svg create mode 100644 PinkSea.Frontend/public/assets/ui/tip-brush.svg create mode 100644 PinkSea.Frontend/public/assets/ui/tip-pencil.svg diff --git a/PinkSea.Frontend/public/assets/ui/icon-add-layer.svg b/PinkSea.Frontend/public/assets/ui/icon-add-layer.svg new file mode 100644 index 0000000..83339c6 --- /dev/null +++ b/PinkSea.Frontend/public/assets/ui/icon-add-layer.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/PinkSea.Frontend/public/assets/ui/icon-close.svg b/PinkSea.Frontend/public/assets/ui/icon-close.svg new file mode 100644 index 0000000..33c9ffb --- /dev/null +++ b/PinkSea.Frontend/public/assets/ui/icon-close.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/PinkSea.Frontend/public/assets/ui/icon-merge.svg b/PinkSea.Frontend/public/assets/ui/icon-merge.svg new file mode 100644 index 0000000..cdf2d17 --- /dev/null +++ b/PinkSea.Frontend/public/assets/ui/icon-merge.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/PinkSea.Frontend/public/assets/ui/icon-move-down.svg b/PinkSea.Frontend/public/assets/ui/icon-move-down.svg new file mode 100644 index 0000000..764cd06 --- /dev/null +++ b/PinkSea.Frontend/public/assets/ui/icon-move-down.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/PinkSea.Frontend/public/assets/ui/icon-move-up.svg b/PinkSea.Frontend/public/assets/ui/icon-move-up.svg new file mode 100644 index 0000000..9f0355b --- /dev/null +++ b/PinkSea.Frontend/public/assets/ui/icon-move-up.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/PinkSea.Frontend/public/assets/ui/icon-pinksea.svg b/PinkSea.Frontend/public/assets/ui/icon-pinksea.svg new file mode 100644 index 0000000..4f2f209 --- /dev/null +++ b/PinkSea.Frontend/public/assets/ui/icon-pinksea.svg @@ -0,0 +1,21 @@ + + + + + + + diff --git a/PinkSea.Frontend/public/assets/ui/icon-redo.svg b/PinkSea.Frontend/public/assets/ui/icon-redo.svg new file mode 100644 index 0000000..e297e53 --- /dev/null +++ b/PinkSea.Frontend/public/assets/ui/icon-redo.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/PinkSea.Frontend/public/assets/ui/icon-tone.svg b/PinkSea.Frontend/public/assets/ui/icon-tone.svg new file mode 100644 index 0000000..4e4c264 --- /dev/null +++ b/PinkSea.Frontend/public/assets/ui/icon-tone.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/PinkSea.Frontend/public/assets/ui/icon-trash.svg b/PinkSea.Frontend/public/assets/ui/icon-trash.svg new file mode 100644 index 0000000..bfbf87f --- /dev/null +++ b/PinkSea.Frontend/public/assets/ui/icon-trash.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/PinkSea.Frontend/public/assets/ui/icon-undo.svg b/PinkSea.Frontend/public/assets/ui/icon-undo.svg new file mode 100644 index 0000000..ee84828 --- /dev/null +++ b/PinkSea.Frontend/public/assets/ui/icon-undo.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/PinkSea.Frontend/public/assets/ui/tip-airbrush.svg b/PinkSea.Frontend/public/assets/ui/tip-airbrush.svg new file mode 100644 index 0000000..1595e9c --- /dev/null +++ b/PinkSea.Frontend/public/assets/ui/tip-airbrush.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/PinkSea.Frontend/public/assets/ui/tip-brush.svg b/PinkSea.Frontend/public/assets/ui/tip-brush.svg new file mode 100644 index 0000000..89d9a44 --- /dev/null +++ b/PinkSea.Frontend/public/assets/ui/tip-brush.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/PinkSea.Frontend/public/assets/ui/tip-pencil.svg b/PinkSea.Frontend/public/assets/ui/tip-pencil.svg new file mode 100644 index 0000000..3268fae --- /dev/null +++ b/PinkSea.Frontend/public/assets/ui/tip-pencil.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/PinkSea.Frontend/src/api/tegaki/tegaki.js b/PinkSea.Frontend/src/api/tegaki/tegaki.js index b393305..8ad14c2 100644 --- a/PinkSea.Frontend/src/api/tegaki/tegaki.js +++ b/PinkSea.Frontend/src/api/tegaki/tegaki.js @@ -5473,6 +5473,7 @@ var TegakiUI = { } el.appendChild(TegakiUI.buildToolModeBar()); + el.appendChild(TegakiUI.buildCancelBtn()); bg.appendChild(el); @@ -5532,11 +5533,16 @@ var TegakiUI = { }, buildMenuBar: function() { - var frag, btn; + var frag, btn, undoRedoWrapper; frag = $T.el('div'); frag.id = 'tegaki-menu-bar'; + + var pinkSeaLogo = $T.el('span'); + pinkSeaLogo.id = 'tegaki-pinksea-logo'; + frag.appendChild(pinkSeaLogo); + btn = $T.el('span'); btn.className = 'tegaki-mb-btn'; btn.textContent = TegakiStrings().newCanvas; @@ -5549,35 +5555,33 @@ var TegakiUI = { $T.on(btn, 'click', Tegaki.onExportClick); frag.appendChild(btn); - btn = $T.el('span'); + var finishButton = $T.el('span'); + finishButton.id = 'tegaki-finish-btn'; + finishButton.className = 'tegaki-mb-btn'; + finishButton.textContent = TegakiStrings().finish; + $T.on(finishButton, 'click', Tegaki.onDoneClick); + frag.appendChild(finishButton); + + undoRedoWrapper = $T.el('div'); + undoRedoWrapper.id = 'tegaki-undo-redo'; + + btn = $T.el('span'); btn.id = 'tegaki-undo-btn'; btn.className = 'tegaki-mb-btn'; - btn.textContent = TegakiStrings().undo; + /*btn.textContent = TegakiStrings().undo;*/ btn.title = TegakiKeybinds.getCaption('undo'); $T.on(btn, 'click', Tegaki.onUndoClick); - frag.appendChild(btn); + undoRedoWrapper.appendChild(btn); btn = $T.el('span'); btn.id = 'tegaki-redo-btn'; btn.className = 'tegaki-mb-btn'; - btn.textContent = TegakiStrings().redo; + /*btn.textContent = TegakiStrings().redo;*/ btn.title = TegakiKeybinds.getCaption('redo'); $T.on(btn, 'click', Tegaki.onRedoClick); - frag.appendChild(btn); - - var cancelButton = $T.el('span'); - cancelButton.className = 'tegaki-mb-btn'; - cancelButton.textContent = TegakiStrings().close; - $T.on(cancelButton, 'click', Tegaki.onCancelClick); - frag.appendChild(cancelButton); - - var finishButton = $T.el('span'); - finishButton.id = 'tegaki-finish-btn'; - finishButton.className = 'tegaki-mb-btn'; - finishButton.textContent = TegakiStrings().finish; - $T.on(finishButton, 'click', Tegaki.onDoneClick); - frag.appendChild(finishButton); + undoRedoWrapper.appendChild(btn); + frag.appendChild(undoRedoWrapper); return frag; }, @@ -5685,6 +5689,14 @@ var TegakiUI = { return cnt; }, + + buildCancelBtn: function() { + var cancelButton = $T.el('span'); + cancelButton.className = 'tegaki-mb-btn'; + cancelButton.id = 'tegaki-cancel-btn'; + $T.on(cancelButton, 'click', Tegaki.onCancelClick); + return cancelButton; + }, buildToolsMenu: function() { var grp, el, lbl, name; @@ -5696,7 +5708,7 @@ var TegakiUI = { el = $T.el('span'); el.setAttribute('data-tool', name); - lbl = TegakiStrings[name]; + lbl = TegakiStrings()[name]; if (Tegaki.tools[name].keybind) { lbl += ' (' + Tegaki.tools[name].keybind.toUpperCase() + ')'; @@ -5792,13 +5804,13 @@ var TegakiUI = { el = $T.el('span'); el.title = TegakiStrings().addLayer; - el.className = 'tegaki-ui-btn tegaki-icon tegaki-plus'; + el.className = 'tegaki-ui-btn tegaki-icon tegaki-add-layer'; $T.on(el, 'click', Tegaki.onLayerAddClick); row.appendChild(el); el = $T.el('span'); el.title = TegakiStrings().delLayers; - el.className = 'tegaki-ui-btn tegaki-icon tegaki-minus'; + el.className = 'tegaki-ui-btn tegaki-icon tegaki-delete'; $T.on(el, 'click', Tegaki.onLayerDeleteClick); row.appendChild(el); diff --git a/PinkSea.Frontend/src/assets/tegaki/tegaki.css b/PinkSea.Frontend/src/assets/tegaki/tegaki.css index 31b14a3..3d4f12f 100644 --- a/PinkSea.Frontend/src/assets/tegaki/tegaki.css +++ b/PinkSea.Frontend/src/assets/tegaki/tegaki.css @@ -6,6 +6,17 @@ font-style: normal; } + +:root { + --bright: #fff5f6; + --pink:#FFE5EA; + --dark-pink: #ffb6c1; + --darkest-pink: #361616; + --accent: #a61930; + +} + + .tegaki-icon:before { font-family: 'tegaki'; font-style: normal; @@ -22,9 +33,6 @@ .tegaki-plus:before { content: '\e801'; } /* '' */ .tegaki-minus:before { content: '\e802'; } /* '' */ .tegaki-pen:before { content: '\e803'; } /* '' */ -.tegaki-down-open:before { content: '\e804'; } /* '' */ -.tegaki-up-open:before { content: '\e805'; } /* '' */ -.tegaki-level-down:before { content: '\e806'; } /* '' */ .tegaki-pencil:before { content: '\e807'; } /* '' */ .tegaki-play:before { content: '\e808'; } /* '' */ .tegaki-bucket:before { content: '\e809'; } /* '' */ @@ -32,7 +40,6 @@ .tegaki-blur:before { content: '\e80b'; } /* '' */ .tegaki-to-start:before { content: '\e80c'; } /* '' */ .tegaki-watercolor:before { content: '\e80d'; } /* '' */ -.tegaki-tone:before { content: '\e80e'; } /* '' */ .tegaki-airbrush:before { content: '\e80f'; } /* '' */ .tegaki-fast-fw:before { content: '\e810'; } /* '' */ .tegaki-fast-bw:before { content: '\e811'; } /* '' */ @@ -41,6 +48,187 @@ .tegaki-eraser:before { content: '\f12d'; } /* '' */ .tegaki-pipette:before { content: '\f1fb'; } /* '' */ +/*Custom Icons*/ + +/*Eraser Tip Icons */ +#tegaki-tool-mode-tip-0:before { + content: ''; + background-image: url('/assets/ui/tip-pencil.svg'); + background-size: contain; + background-repeat: no-repeat; + background-position: center; + display: inline-block; + width: 10px; + height: 10px; +} +#tegaki-tool-mode-tip-1:before { + content: ''; + background-image: url('/assets/ui/tip-brush.svg'); + background-size: contain; + background-repeat: no-repeat; + background-position: center; + display: inline-block; + width: 10px; + height: 10px; +} +#tegaki-tool-mode-tip-2:before { + content: ''; + background-image: url('/assets/ui/tip-airbrush.svg'); + background-size: contain; + background-repeat: no-repeat; + background-position: center; + display: inline-block; + width: 10px; + height: 10px; +} + + +/*Layers Icons*/ +.tegaki-delete { + content: ''; + background-image: url('/assets/ui/icon-trash.svg'); + background-size: 20px 20px; + background-repeat: no-repeat; + background-position: center; + display: inline-block; + width: 30px; + height: 30px; +} + +.tegaki-add-layer { + content: ''; + background-image: url('/assets/ui/icon-add-layer.svg'); + background-size: 20px 20px; + background-repeat: no-repeat; + background-position: center; + display: inline-block; + width: 30px; + height: 30px; +} + +.tegaki-level-down { + content: ''; + background-image: url('/assets/ui/icon-merge.svg'); + background-size: 20px 20px; + background-repeat: no-repeat; + background-position: center; + display: inline-block; + width: 30px; + height: 30px; +} + +.tegaki-down-open { + content: ''; + background-image: url('/assets/ui/icon-move-down.svg'); + background-size: 20px 20px; + background-repeat: no-repeat; + background-position: center; + display: inline-block; + width: 30px; + height: 30px; + } + +.tegaki-up-open{ + background-image: url('/assets/ui/icon-move-up.svg'); + background-size: 20px 20px; + background-repeat: no-repeat; + background-position: center; + display: inline-block; + width: 30px; + height: 30px; + } + + + /*Tool Icons*/ + +.tegaki-tone { + background-image: url('/assets/ui/icon-tone.svg'); + background-size: 20px 20px; + background-repeat: no-repeat; + background-position: center; + display: inline-block; + width: 30px; + height: 30px; +} + + +/*Menu Bar*/ + + +#tegaki-pinksea-logo { + width:40px; + border-right: 1px solid var(--dark-pink); + display:flex; + justify-content: center; + margin-right:6px; +} + +#tegaki-pinksea-logo:before { + content:" "; + background-image: url('/assets/ui/icon-pinksea.svg'); + background-size: 20px 20px; + background-repeat: no-repeat; + background-position: center; + display: inline-block; + width: 30px; + height: 30px; +} + +#tegaki-undo-redo { + border-left: 1px solid var(--dark-pink); + border-right: 1px solid var(--dark-pink); + margin-left:6px; + display: flex; + align-items: center; +} + +#tegaki-undo-btn { + border-right: 1px solid var(--dark-pink); +} + +#tegaki-undo-btn:before { + content:" "; + background-image: url('/assets/ui/icon-undo.svg'); + background-size: 20px 20px; + background-repeat: no-repeat; + background-position: center; + display: inline-block; + width: 30px; + height: 30px; +} + +#tegaki-redo-btn:before { + content:" "; + background-image: url('/assets/ui/icon-redo.svg'); + background-size: 20px 20px; + background-repeat: no-repeat; + background-position: center; + display: inline-block; + width: 30px; + height: 30px; +} + +#tegaki-cancel-btn { + margin-left: auto; + border-left: 1px solid var(--dark-pink); + padding:0; + width:40px; + display:flex; + justify-content: center; + +} + +#tegaki-cancel-btn:before { + content:" "; + background-image: url('/assets/ui/icon-close.svg'); + background-size: 20px 20px; + background-repeat: no-repeat; + background-position: center; + display: inline-block; + width: 30px; + height: 30px; +} + .tegaki-disabled, .tegaki-disabled::after, .tegaki-disabled::before { @@ -76,8 +264,8 @@ height: 100%; top: 0; left: 0; - background-color: #a3b1bf; - color: #222; + background-color: #FFB6C1; + color: #361616; font-family: arial, sans-serif; -moz-user-select: none; -webkit-user-select: none; @@ -85,9 +273,9 @@ user-select: none; z-index: 9999; display: grid; - grid-template-columns: 40px 1fr 160px; - grid-template-rows: 24px 1fr 18px; - grid-gap: 2px; + grid-template-columns: 40px 1fr 200px; + grid-template-rows: 40px 1fr 18px; + grid-gap: 1px; } #tegaki input { @@ -95,7 +283,7 @@ } #tegaki > div { - background-color: #8d99a6; + background-color: var(--pink); } #tegaki-menu-cnt { @@ -103,6 +291,7 @@ white-space: nowrap; overflow: hidden; display: flex; + align-items: center; } #tegaki-tools-cnt { @@ -110,7 +299,12 @@ padding: 4px; } +#tegaki #tegaki-canvas-cnt { + background-color: var(--bright); +} + #tegaki-canvas-cnt { + grid-area: 2 / 2 / 3 / 3; overflow: auto; display: flex; @@ -133,7 +327,7 @@ } #tegaki-status-replay { - color: #a61930; + color: var(--accent) } #tegaki-status-output { @@ -142,16 +336,15 @@ } #tegaki-status-version { - color: #adbdcc; + color: #361616; font-size: 11px; margin-left: auto; } #tegaki-menu-bar { font-size: 12px; - padding-left: 4px; - padding-right: 18px; - border-right: 2px solid #a3b1bf; + display:flex; + align-items: center; } .tegaki-replay-mode #tegaki-menu-bar { @@ -175,8 +368,8 @@ width: 100px; height: 24px; margin: 0 4px; - border-left: 1px solid #a3b1bf; - border-right: 1px solid #a3b1bf; + border-left: 1px solid var(--dark-pink); + border-right: 1px solid var(--dark-pink); /*background-color: rgba(0, 0, 0, 0.25);*/ } @@ -219,6 +412,7 @@ font-size: 11px; margin-left: 4px; line-height: 24px; + display: flex; } .tegaki-toolmode-lbl { @@ -230,8 +424,10 @@ } .tegaki-toolmode-grp { - border-left: 1px solid #a3b1bf; + border-left: 1px solid var(--dark-pink); padding: 0 18px; + display:flex; + align-items: center; } #tegaki canvas { @@ -243,7 +439,9 @@ } .tegaki-tool-active { - color: #f2f3f4; + + filter: brightness(0) saturate(100%) invert(72%) sepia(84%) saturate(4903%) hue-rotate(324deg) brightness(120%) contrast(110%); + } .tegaki-tool-btn { @@ -254,7 +452,7 @@ } .tegaki-tool-btn:hover { - background-color: rgba(0, 0, 0, 0.15); + background-color: rgba(255, 99, 99, 0.15); } .tegaki-tool-btn:before { @@ -268,32 +466,33 @@ cursor: default; text-decoration: none; display: inline-block; - padding: 0 6px; + padding: 0 12px; word-spacing: -1px; position: relative; - line-height: 24px; - height: 24px; + line-height: 30px; + height: 30px; } .tegaki-mb-btn:hover:not(.tegaki-disabled), .tegaki-ui-btn:hover:not(.tegaki-disabled) { - background-color: rgba(0, 0, 0, 0.10); + background-color: rgba(255, 99, 99, 0.15); } .tegaki-sw-btn { display: inline; - padding: 2px 6px; + padding: 0px 12px; margin: 0 2px; - box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.15), -1px -1px 0 rgba(255, 255, 255, 0.15); + line-height: 30px; + } .tegaki-sw-btn:hover:not(.tegaki-sw-btn-a) { - background-color: rgba(0, 0, 0, 0.05); + background-color: rgba(255, 99, 99, 0.15); } .tegaki-sw-btn-a { - background-color: rgba(0, 0, 0, 0.1); - box-shadow: -1px -1px 0 rgba(0, 0, 0, 0.15), 1px 1px 0 rgba(255, 255, 255, 0.15); + background-color: var(--dark-pink); + } #tegaki-toolmode-bar .tegaki-mb-btn-a { @@ -305,6 +504,12 @@ color: inherit; } + + +#tegaki-toolmode-ctrl-tip, #tegaki-tool-mode-tip-ctrl { + display:flex; +} + #tegaki-debug { position: absolute; left: 0; @@ -333,7 +538,7 @@ #tegaki-layers { position: relative; font-size: 0; - box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.25); + border:1px solid rgb(152, 102, 102); contain: content; } @@ -468,12 +673,14 @@ .tegaki-range-lbl-xs { width: 20px; - font-size: 10px; + font-size: 12px; + } .tegaki-label-xs { - font-size: 10px; + font-size: 12px; vertical-align: top; + margin-right:4px; } .tegaki-lbl-c::after { @@ -505,13 +712,18 @@ .tegaki-ctrlgrp-title { font-size: 12px; font-weight: bold; - margin-bottom: 6px; - background-color: #a3b1bf; + margin: 20px 0 13px; + background-color: var(--dark-pink); padding: 1px 4px; } +#tegaki-ctrlgrp-zoom .tegaki-ctrlgrp-title { + margin-top: 0; +} + .tegaki-ctrlrow { font-size: 11px; + } .tegaki-ctrlrow:not(:last-child) { @@ -519,10 +731,38 @@ } .tegaki-ctrl-range { + + -webkit-appearance: none; + appearance: none; width: calc(100% - 34px); padding: 0; margin: 0; height: 14px; + box-shadow:none; + border: 1px solid var(--dark-pink); + border-radius: 50px; +} + +.tegaki-ctrl-range::-webkit-slider-thumb { + -webkit-appearance: none; + appearance: none; + border-radius: 50px;; + width: 16px; + height:16px; + transform: scale(1.1); + background: var(--bright); + cursor: pointer; + border:1px solid var(--dark-pink); +} + +.tegaki-ctrl-range::-moz-range-thumb { + border-radius: 50px;; + width: 16px; + height:16px; + transform: scale(1.1); + background: var(--bright); + cursor: pointer; + border:1px solid var(--dark-pink); } /* zoom ctrl group */ @@ -546,8 +786,8 @@ .tegaki-color-grid { display: grid; - grid-gap: 4px; - margin-top: 6px; + grid-gap: 1px; + margin-top: 10px; } .tegaki-color-grid-20 { @@ -561,7 +801,7 @@ } .tegaki-color-btn { - box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5); + box-shadow: 0 0 0 1px var(--darkest-pink); } #tegaki-color, @@ -569,9 +809,9 @@ padding: 0; border: 0; display: block; - width: 28px; - height: 28px; - box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35); + width: 30px; + height: 30px; + box-shadow: 0 0 0 1px var(--darkest-pink); } /* layers ctrl group */ @@ -590,22 +830,26 @@ #tegaki-layers-ctrl { margin-top: 4px; + display: flex; + gap: 1px; } + + #tegaki-layers-grid { height: 84px; min-height: 84px; overflow: auto; - background-color: #8d99a6; + background-color: var(--pink); display: flex; flex-direction: column; - border: 1px solid #a3b1bf; + border: 1px solid var(--dark-pink); resize: vertical; } .tegaki-layers-cell { box-sizing: border-box; - box-shadow: 0 1px 0 0px #a3b1bf; + border-bottom:1px solid var(--dark-pink); padding: 0; height: 28px; flex-shrink: 0; @@ -616,7 +860,7 @@ .tegaki-layers-cell-s, .tegaki-layers-cell-a { - background-color: #a3b1bf7f; + background-color: var(--bright); } .tegaki-layers-cell-a { From 78c05b7005446c9cf206052056fdb4dafbe46d15 Mon Sep 17 00:00:00 2001 From: Verti Date: Wed, 13 Aug 2025 17:56:33 +0200 Subject: [PATCH 2/6] Changes brush dynamic controls from buttons to checkboxes and styles them --- .../public/assets/ui/icon-redo.svg | 8 +- .../public/assets/ui/icon-undo.svg | 8 +- PinkSea.Frontend/src/api/tegaki/tegaki.js | 202 ++++++++++++------ PinkSea.Frontend/src/assets/tegaki/tegaki.css | 146 +++++++++++-- 4 files changed, 276 insertions(+), 88 deletions(-) diff --git a/PinkSea.Frontend/public/assets/ui/icon-redo.svg b/PinkSea.Frontend/public/assets/ui/icon-redo.svg index e297e53..a529978 100644 --- a/PinkSea.Frontend/public/assets/ui/icon-redo.svg +++ b/PinkSea.Frontend/public/assets/ui/icon-redo.svg @@ -1,10 +1,10 @@ - - - + + + - + diff --git a/PinkSea.Frontend/public/assets/ui/icon-undo.svg b/PinkSea.Frontend/public/assets/ui/icon-undo.svg index ee84828..d079059 100644 --- a/PinkSea.Frontend/public/assets/ui/icon-undo.svg +++ b/PinkSea.Frontend/public/assets/ui/icon-undo.svg @@ -1,10 +1,10 @@ - - - + + + - + diff --git a/PinkSea.Frontend/src/api/tegaki/tegaki.js b/PinkSea.Frontend/src/api/tegaki/tegaki.js index 8ad14c2..ccfb57e 100644 --- a/PinkSea.Frontend/src/api/tegaki/tegaki.js +++ b/PinkSea.Frontend/src/api/tegaki/tegaki.js @@ -3546,12 +3546,18 @@ export var Tegaki = { if (!Tegaki.tool.useSizeDynamics) { return; } - + Tegaki.setToolSizeDynamics(!Tegaki.tool.sizeDynamicsEnabled); }, setToolSizeDynamics: function(flag) { Tegaki.tool.setSizeDynamics(flag); + + const checkbox = document.getElementById('dyn-size-check'); + if (checkbox) { + checkbox.checked = flag; + } + TegakiUI.updateToolDynamics(); Tegaki.recordEvent(TegakiEventSetToolSizeDynamics, performance.now(), +flag); }, @@ -3572,10 +3578,11 @@ export var Tegaki = { onToolPressureFlowClick: function(e) { if (!Tegaki.tool.useFlowDynamics) { + e.target.checked = false; return; } - Tegaki.setToolFlowDynamics(!Tegaki.tool.flowDynamicsEnabled); + Tegaki.setToolFlowDynamics(e.target.checked); }, setToolFlowDynamics: function(flag) { @@ -3586,6 +3593,7 @@ export var Tegaki = { onToolPreserveAlphaClick: function(e) { if (!Tegaki.tool.usePreserveAlpha) { + e.target.checked = false; return; } @@ -5533,7 +5541,7 @@ var TegakiUI = { }, buildMenuBar: function() { - var frag, btn, undoRedoWrapper; + var frag, btn, undoRedoWrapper, line; frag = $T.el('div'); frag.id = 'tegaki-menu-bar'; @@ -5565,18 +5573,20 @@ var TegakiUI = { undoRedoWrapper = $T.el('div'); undoRedoWrapper.id = 'tegaki-undo-redo'; - btn = $T.el('span'); + btn = $T.el('span'); btn.id = 'tegaki-undo-btn'; btn.className = 'tegaki-mb-btn'; - /*btn.textContent = TegakiStrings().undo;*/ btn.title = TegakiKeybinds.getCaption('undo'); $T.on(btn, 'click', Tegaki.onUndoClick); undoRedoWrapper.appendChild(btn); + line = $T.el('span'); + line.className = 'tegaki-separator'; + undoRedoWrapper.appendChild(line); + btn = $T.el('span'); btn.id = 'tegaki-redo-btn'; btn.className = 'tegaki-mb-btn'; - /*btn.textContent = TegakiStrings().redo;*/ btn.title = TegakiKeybinds.getCaption('redo'); $T.on(btn, 'click', Tegaki.onRedoClick); undoRedoWrapper.appendChild(btn); @@ -5602,7 +5612,7 @@ var TegakiUI = { }, buildToolModeBar: function() { - var cnt, grp, el, btn; + var cnt, grp, el, btn, check, label, labelText, checkIcon, line; cnt = $T.el('div'); cnt.id = 'tegaki-toolmode-bar'; @@ -5612,6 +5622,7 @@ var TegakiUI = { } // Dynamics + grp = $T.el('span'); grp.id = 'tegaki-tool-mode-dynamics'; grp.className = 'tegaki-toolmode-grp'; @@ -5625,52 +5636,114 @@ var TegakiUI = { el.id = 'tegaki-tool-mode-dynamics-ctrl'; el.className = 'tegaki-toolmode-ctrl'; - btn = $T.el('span'); - btn.id = 'tegaki-tool-mode-dynamics-size'; - btn.className = 'tegaki-sw-btn'; - btn.textContent = TegakiStrings().size; - $T.on(btn, 'mousedown', Tegaki.onToolPressureSizeClick); - el.appendChild(btn); - btn = $T.el('span'); - btn.id = 'tegaki-tool-mode-dynamics-alpha'; - btn.className = 'tegaki-sw-btn'; - btn.textContent = TegakiStrings().alpha; - $T.on(btn, 'mousedown', Tegaki.onToolPressureAlphaClick); - el.appendChild(btn); + + + + // Size dynamics toggle + check = $T.el('input'); + check.type = 'checkbox'; + check.className = 'tegaki-checkbox-input'; + check.id = 'dyn-size-check'; + checkIcon = $T.el('div'); + checkIcon.className = 'tegaki-checkbox-icon'; + + label = $T.el('label'); + label.htmlFor = 'dyn-size-check'; + label.className = 'tegaki-checkbox-label'; + label.id = 'tegaki-tool-mode-dynamics-size'; + labelText = document.createTextNode(TegakiStrings().size); + + + $T.on(check, 'change', Tegaki.onToolPressureSizeClick); + + label.appendChild(check); + label.appendChild(checkIcon); + label.appendChild(labelText); + grp.appendChild(label); + + + // Opacity dynamics toggle + check = $T.el('input'); + check.type = 'checkbox'; + check.className = 'tegaki-checkbox-input'; + check.id = 'dyn-opacity-check'; + checkIcon = $T.el('div'); + checkIcon.className = 'tegaki-checkbox-icon'; + + label = $T.el('label'); + label.htmlFor = 'dyn-opacity-check'; + label.className = 'tegaki-checkbox-label'; + label.id = 'tegaki-tool-mode-dynamics-alpha'; + labelText = document.createTextNode(TegakiStrings().alpha); + + $T.on(check, 'change', Tegaki.onToolPressureAlphaClick); + + label.appendChild(check); + label.appendChild(checkIcon); + label.appendChild(labelText); + grp.appendChild(label); + + + // Flow dynamics toggle + check = $T.el('input'); + check.type = 'checkbox'; + check.className = 'tegaki-checkbox-input'; + check.id = 'dyn-flow-check'; + checkIcon = $T.el('div'); + checkIcon.className = 'tegaki-checkbox-icon'; + + label = $T.el('label'); + label.htmlFor = 'dyn-flow-check'; + label.className = 'tegaki-checkbox-label'; + label.id = 'tegaki-tool-mode-dynamics-flow'; + labelText = document.createTextNode(TegakiStrings().flow); + + $T.on(check, 'change', Tegaki.onToolPressureFlowClick); + + label.appendChild(check); + label.appendChild(checkIcon); + label.appendChild(labelText); + + grp.appendChild(label); + + line = $T.el('span'); + line.className = 'tegaki-separator'; + grp.appendChild(line); - btn = $T.el('span'); - btn.id = 'tegaki-tool-mode-dynamics-flow'; - btn.className = 'tegaki-sw-btn'; - btn.textContent = TegakiStrings().flow; - $T.on(btn, 'mousedown', Tegaki.onToolPressureFlowClick); - el.appendChild(btn); + cnt.appendChild(grp); - grp.appendChild(el); - cnt.appendChild(grp); + - // Preserve Alpha + // Preserve Alpha toggle grp = $T.el('span'); - grp.id = 'tegaki-tool-mode-mask'; grp.className = 'tegaki-toolmode-grp'; + grp.id = 'tegaki-tool-mode-mask'; - el = $T.el('span'); - el.id = 'tegaki-toolmode-ctrl-tip'; - el.className = 'tegaki-toolmode-ctrl'; + check = $T.el('input'); + check.type = 'checkbox'; + check.className = 'tegaki-checkbox-input'; + check.id = 'preserve-alpha-check'; + checkIcon = $T.el('div'); + checkIcon.className = 'tegaki-checkbox-icon'; - btn = $T.el('span'); - btn.id = 'tegaki-tool-mode-mask-alpha'; - btn.className = 'tegaki-sw-btn'; - btn.textContent = TegakiStrings().preserveAlpha; - $T.on(btn, 'mousedown', Tegaki.onToolPreserveAlphaClick); - el.appendChild(btn); + label = $T.el('label'); + label.htmlFor = 'preserve-alpha-check'; + label.className = 'tegaki-checkbox-label'; + labelText = document.createTextNode(TegakiStrings().preserveAlpha); - grp.appendChild(el); + $T.on(check, 'change', Tegaki.onToolPreserveAlphaClick); + + label.appendChild(check); + label.appendChild(checkIcon); + label.appendChild(labelText); + grp.appendChild(label); cnt.appendChild(grp); - // Tip + + // Eraser Tip Selection grp = $T.el('span'); grp.id = 'tegaki-tool-mode-tip'; grp.className = 'tegaki-toolmode-grp'; @@ -5691,11 +5764,18 @@ var TegakiUI = { }, buildCancelBtn: function() { + var wrapper = $T.el("div"); + wrapper.id = "tegaki-cancel-wrapper"; + var line = $T.el("span"); + line.className = 'tegaki-separator'; var cancelButton = $T.el('span'); cancelButton.className = 'tegaki-mb-btn'; cancelButton.id = 'tegaki-cancel-btn'; $T.on(cancelButton, 'click', Tegaki.onCancelClick); - return cancelButton; + + wrapper.appendChild(line); + wrapper.appendChild(cancelButton); + return wrapper; }, buildToolsMenu: function() { @@ -6635,7 +6715,7 @@ var TegakiUI = { }, updateToolDynamics: function() { - var ctrl, cb; + var ctrl, cb, check; ctrl = $T.id('tegaki-tool-mode-dynamics'); @@ -6643,50 +6723,47 @@ var TegakiUI = { ctrl.classList.add('tegaki-hidden'); } else { + + //Size Dynamics + cb = $T.id('tegaki-tool-mode-dynamics-size'); + check = $T.id('dyn-size-check'); if (Tegaki.tool.useSizeDynamics) { if (Tegaki.tool.sizeDynamicsEnabled) { - cb.classList.add('tegaki-sw-btn-a'); + check.checked = true; } else { - cb.classList.remove('tegaki-sw-btn-a'); + check.checked = false; } - cb.classList.remove('tegaki-hidden'); } - else { - cb.classList.add('tegaki-hidden'); - } cb = $T.id('tegaki-tool-mode-dynamics-alpha'); + check = $T.id('dyn-opacity-check'); if (Tegaki.tool.useAlphaDynamics) { if (Tegaki.tool.alphaDynamicsEnabled) { - cb.classList.add('tegaki-sw-btn-a'); + check.checked = true; } else { - cb.classList.remove('tegaki-sw-btn-a'); + check.checked = false; } - cb.classList.remove('tegaki-hidden'); } - else { - cb.classList.add('tegaki-hidden'); - } cb = $T.id('tegaki-tool-mode-dynamics-flow'); + check = $T.id('dyn-flow-check'); - if (Tegaki.tool.useFlowDynamics) { + if (Tegaki.tool.useFlowDynamics) { if (Tegaki.tool.flowDynamicsEnabled) { - cb.classList.add('tegaki-sw-btn-a'); + check.checked = true; } else { - cb.classList.remove('tegaki-sw-btn-a'); + check.checked = false; } - cb.classList.remove('tegaki-hidden'); - } + } else { cb.classList.add('tegaki-hidden'); } @@ -6731,7 +6808,7 @@ var TegakiUI = { }, updateToolPreserveAlpha: function() { - var cb, ctrl; + var cb, ctrl, check; ctrl = $T.id('tegaki-tool-mode-mask'); @@ -6740,12 +6817,13 @@ var TegakiUI = { } else { cb = $T.id('tegaki-tool-mode-mask-alpha'); + check = $T.id('preserve-alpha-check'); if (Tegaki.tool.preserveAlphaEnabled) { - cb.classList.add('tegaki-sw-btn-a'); + check.checked = true; } else { - cb.classList.remove('tegaki-sw-btn-a'); + check.checked = false; } ctrl.classList.remove('tegaki-hidden'); diff --git a/PinkSea.Frontend/src/assets/tegaki/tegaki.css b/PinkSea.Frontend/src/assets/tegaki/tegaki.css index 3d4f12f..68636da 100644 --- a/PinkSea.Frontend/src/assets/tegaki/tegaki.css +++ b/PinkSea.Frontend/src/assets/tegaki/tegaki.css @@ -179,11 +179,9 @@ border-right: 1px solid var(--dark-pink); margin-left:6px; display: flex; - align-items: center; -} - -#tegaki-undo-btn { - border-right: 1px solid var(--dark-pink); + align-items: stretch; + gap:6px; + padding:0 6px; } #tegaki-undo-btn:before { @@ -193,7 +191,7 @@ background-repeat: no-repeat; background-position: center; display: inline-block; - width: 30px; + width: 20px; height: 30px; } @@ -204,20 +202,20 @@ background-repeat: no-repeat; background-position: center; display: inline-block; - width: 30px; + width: 20px; height: 30px; } -#tegaki-cancel-btn { +#tegaki-cancel-wrapper { margin-left: auto; - border-left: 1px solid var(--dark-pink); - padding:0; - width:40px; - display:flex; + display:flex; justify-content: center; - + gap:6px; + padding:6px; } + + #tegaki-cancel-btn:before { content:" "; background-image: url('/assets/ui/icon-close.svg'); @@ -225,7 +223,7 @@ background-repeat: no-repeat; background-position: center; display: inline-block; - width: 30px; + width: 20px; height: 30px; } @@ -416,7 +414,7 @@ } .tegaki-toolmode-lbl { - margin-right: 6px; + margin-right: 2px; } .tegaki-toolmode-lbl::after { @@ -424,12 +422,118 @@ } .tegaki-toolmode-grp { - border-left: 1px solid var(--dark-pink); - padding: 0 18px; + padding-left: 12px; display:flex; align-items: center; + gap:12px; +} + + +.tegaki-checkbox-wrapper, .tegaki-checkbox-label { + display: flex; + align-items: center; + cursor: pointer; + position: relative; +} + + + +/* Hide the default checkbox */ +.tegaki-checkbox-input { + opacity: 0; + position: absolute; +} + +/* Custom checkbox appearance */ +.tegaki-checkbox-icon { + width: 12px; + height: 12px; + border: 1px solid #dd8592; + border-radius: 2px; + margin-right: 5px; + background: var(--bright); + position: relative; + transition: all 0.15s ease; + flex-shrink: 0; /* Prevent shrinking */ +} + +/* Checked state */ +.tegaki-checkbox-input:checked + .tegaki-checkbox-icon { + background: var(--bright); +} + +/* Checkmark */ +.tegaki-checkbox-input:checked + .tegaki-checkbox-icon::after { + content: '✓'; + position: absolute; + top: -1px; + left: 1px; + color: var(--darkest-pink); + font-size: 12px; + line-height: 1; +} + +/* Label styling */ +.tegaki-checkbox-label { + user-select: none; + cursor: pointer; +} + +/*.tegaki-checkbox-wrapper input { + position: absolute; + opacity: 0; + cursor: pointer; + height: 0; + width: 0; +} +*/ +/* Create a custom checkbox */ +.checkmark { + position: absolute; + top: 0; + left: 0; + height: 25px; + width: 25px; + background-color: #eee; +} + +/* On mouse-over, add a grey background color */ +.tegaki-checkbox-wrapper:hover input ~ .checkmark { + background-color: #ccc; +} + +/* When the checkbox is checked, add a blue background */ +.tegaki-checkbox-wrapper input:checked ~ .checkmark { + background-color: #2196F3; } +/* Create the checkmark/indicator (hidden when not checked) */ +.checkmark:after { + content: ""; + position: absolute; + display: none; +} + +/* Show the checkmark when checked */ +.tegaki-checkbox-wrapper input:checked ~ .checkmark:after { + display: block; +} + +/* Style the checkmark/indicator */ +.tegaki-checkbox-wrapper .checkmark:after { + left: 9px; + top: 5px; + width: 5px; + height: 10px; + border: solid white; + border-width: 0 3px 3px 0; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); +} + + + #tegaki canvas { image-rendering: optimizeSpeed; image-rendering: -moz-crisp-edges; @@ -463,7 +567,7 @@ } .tegaki-mb-btn { - cursor: default; + cursor: pointer; text-decoration: none; display: inline-block; padding: 0 12px; @@ -478,6 +582,12 @@ background-color: rgba(255, 99, 99, 0.15); } +.tegaki-separator { + width: 1px; + min-height:30px; + background:var(--dark-pink); +} + .tegaki-sw-btn { display: inline; padding: 0px 12px; From c3126c56731a63dbbb49f4f7a810980440c24e37 Mon Sep 17 00:00:00 2001 From: Verti Date: Wed, 13 Aug 2025 18:31:09 +0200 Subject: [PATCH 3/6] Adds preloader so eraser brush tips can preload --- PinkSea.Frontend/src/api/tegaki/tegaki.js | 6 ++++++ PinkSea.Frontend/src/assets/tegaki/tegaki.css | 10 ++++++++++ 2 files changed, 16 insertions(+) diff --git a/PinkSea.Frontend/src/api/tegaki/tegaki.js b/PinkSea.Frontend/src/api/tegaki/tegaki.js index ccfb57e..ea67273 100644 --- a/PinkSea.Frontend/src/api/tegaki/tegaki.js +++ b/PinkSea.Frontend/src/api/tegaki/tegaki.js @@ -5546,6 +5546,12 @@ var TegakiUI = { frag = $T.el('div'); frag.id = 'tegaki-menu-bar'; + /* Creates a hidden element so that the eraser brush tips can preload. + If there's more assets that need preload in the future, maybe handling this on init with JS might be better?*/ + var preLoader = $T.el('span'); + preLoader.id = 'tegaki-preloader'; + frag.appendChild(preLoader); + var pinkSeaLogo = $T.el('span'); pinkSeaLogo.id = 'tegaki-pinksea-logo'; diff --git a/PinkSea.Frontend/src/assets/tegaki/tegaki.css b/PinkSea.Frontend/src/assets/tegaki/tegaki.css index 68636da..20b3063 100644 --- a/PinkSea.Frontend/src/assets/tegaki/tegaki.css +++ b/PinkSea.Frontend/src/assets/tegaki/tegaki.css @@ -154,6 +154,16 @@ /*Menu Bar*/ +#tegaki-preloader { + position:absolute; + width:0; + height:0; + opacity:0; + background-image: + url('/assets/ui/tip-pencil.svg'), + url('/assets/ui/tip-brush.svg'), + url('/assets/ui/tip-airbnrush.svg'); +} #tegaki-pinksea-logo { width:40px; From fb67d60174c2c9f2b350e925faf751c3a9b7e759 Mon Sep 17 00:00:00 2001 From: Verti Date: Thu, 14 Aug 2025 15:09:30 +0200 Subject: [PATCH 4/6] Adds missing custom icons, refactors css and removes preloader again (wasn't the issue for why some svgs popped in with delay?) --- .../public/assets/ui/icon-airbrush.svg | 15 ++ .../public/assets/ui/icon-blur.svg | 12 ++ .../ui/{icon-move-down.svg => icon-down.svg} | 0 .../public/assets/ui/icon-eraser.svg | 12 ++ .../public/assets/ui/icon-fillbucket.svg | 15 ++ .../public/assets/ui/icon-left.svg | 12 ++ .../public/assets/ui/icon-pen.svg | 15 ++ .../public/assets/ui/icon-pencil.svg | 12 ++ .../public/assets/ui/icon-pipette.svg | 12 ++ .../public/assets/ui/icon-right.svg | 12 ++ .../public/assets/ui/icon-tone.svg | 10 +- .../ui/{icon-move-up.svg => icon-up.svg} | 0 .../public/assets/ui/icon-zoom-in.svg | 12 ++ .../public/assets/ui/icon-zoom-out.svg | 12 ++ PinkSea.Frontend/src/api/tegaki/tegaki.js | 32 ++-- PinkSea.Frontend/src/assets/tegaki/tegaki.css | 162 +++++------------- 16 files changed, 206 insertions(+), 139 deletions(-) create mode 100644 PinkSea.Frontend/public/assets/ui/icon-airbrush.svg create mode 100644 PinkSea.Frontend/public/assets/ui/icon-blur.svg rename PinkSea.Frontend/public/assets/ui/{icon-move-down.svg => icon-down.svg} (100%) create mode 100644 PinkSea.Frontend/public/assets/ui/icon-eraser.svg create mode 100644 PinkSea.Frontend/public/assets/ui/icon-fillbucket.svg create mode 100644 PinkSea.Frontend/public/assets/ui/icon-left.svg create mode 100644 PinkSea.Frontend/public/assets/ui/icon-pen.svg create mode 100644 PinkSea.Frontend/public/assets/ui/icon-pencil.svg create mode 100644 PinkSea.Frontend/public/assets/ui/icon-pipette.svg create mode 100644 PinkSea.Frontend/public/assets/ui/icon-right.svg rename PinkSea.Frontend/public/assets/ui/{icon-move-up.svg => icon-up.svg} (100%) create mode 100644 PinkSea.Frontend/public/assets/ui/icon-zoom-in.svg create mode 100644 PinkSea.Frontend/public/assets/ui/icon-zoom-out.svg diff --git a/PinkSea.Frontend/public/assets/ui/icon-airbrush.svg b/PinkSea.Frontend/public/assets/ui/icon-airbrush.svg new file mode 100644 index 0000000..54a5527 --- /dev/null +++ b/PinkSea.Frontend/public/assets/ui/icon-airbrush.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/PinkSea.Frontend/public/assets/ui/icon-blur.svg b/PinkSea.Frontend/public/assets/ui/icon-blur.svg new file mode 100644 index 0000000..5b3e669 --- /dev/null +++ b/PinkSea.Frontend/public/assets/ui/icon-blur.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/PinkSea.Frontend/public/assets/ui/icon-move-down.svg b/PinkSea.Frontend/public/assets/ui/icon-down.svg similarity index 100% rename from PinkSea.Frontend/public/assets/ui/icon-move-down.svg rename to PinkSea.Frontend/public/assets/ui/icon-down.svg diff --git a/PinkSea.Frontend/public/assets/ui/icon-eraser.svg b/PinkSea.Frontend/public/assets/ui/icon-eraser.svg new file mode 100644 index 0000000..5a742de --- /dev/null +++ b/PinkSea.Frontend/public/assets/ui/icon-eraser.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/PinkSea.Frontend/public/assets/ui/icon-fillbucket.svg b/PinkSea.Frontend/public/assets/ui/icon-fillbucket.svg new file mode 100644 index 0000000..e763a95 --- /dev/null +++ b/PinkSea.Frontend/public/assets/ui/icon-fillbucket.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/PinkSea.Frontend/public/assets/ui/icon-left.svg b/PinkSea.Frontend/public/assets/ui/icon-left.svg new file mode 100644 index 0000000..2f81270 --- /dev/null +++ b/PinkSea.Frontend/public/assets/ui/icon-left.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/PinkSea.Frontend/public/assets/ui/icon-pen.svg b/PinkSea.Frontend/public/assets/ui/icon-pen.svg new file mode 100644 index 0000000..4fcfbe2 --- /dev/null +++ b/PinkSea.Frontend/public/assets/ui/icon-pen.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/PinkSea.Frontend/public/assets/ui/icon-pencil.svg b/PinkSea.Frontend/public/assets/ui/icon-pencil.svg new file mode 100644 index 0000000..1aca29b --- /dev/null +++ b/PinkSea.Frontend/public/assets/ui/icon-pencil.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/PinkSea.Frontend/public/assets/ui/icon-pipette.svg b/PinkSea.Frontend/public/assets/ui/icon-pipette.svg new file mode 100644 index 0000000..5f674f6 --- /dev/null +++ b/PinkSea.Frontend/public/assets/ui/icon-pipette.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/PinkSea.Frontend/public/assets/ui/icon-right.svg b/PinkSea.Frontend/public/assets/ui/icon-right.svg new file mode 100644 index 0000000..b73809b --- /dev/null +++ b/PinkSea.Frontend/public/assets/ui/icon-right.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/PinkSea.Frontend/public/assets/ui/icon-tone.svg b/PinkSea.Frontend/public/assets/ui/icon-tone.svg index 4e4c264..76d5f66 100644 --- a/PinkSea.Frontend/public/assets/ui/icon-tone.svg +++ b/PinkSea.Frontend/public/assets/ui/icon-tone.svg @@ -4,19 +4,19 @@ - + - + - + - + - + diff --git a/PinkSea.Frontend/public/assets/ui/icon-move-up.svg b/PinkSea.Frontend/public/assets/ui/icon-up.svg similarity index 100% rename from PinkSea.Frontend/public/assets/ui/icon-move-up.svg rename to PinkSea.Frontend/public/assets/ui/icon-up.svg diff --git a/PinkSea.Frontend/public/assets/ui/icon-zoom-in.svg b/PinkSea.Frontend/public/assets/ui/icon-zoom-in.svg new file mode 100644 index 0000000..5c07431 --- /dev/null +++ b/PinkSea.Frontend/public/assets/ui/icon-zoom-in.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/PinkSea.Frontend/public/assets/ui/icon-zoom-out.svg b/PinkSea.Frontend/public/assets/ui/icon-zoom-out.svg new file mode 100644 index 0000000..5447961 --- /dev/null +++ b/PinkSea.Frontend/public/assets/ui/icon-zoom-out.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/PinkSea.Frontend/src/api/tegaki/tegaki.js b/PinkSea.Frontend/src/api/tegaki/tegaki.js index ea67273..fd3db2b 100644 --- a/PinkSea.Frontend/src/api/tegaki/tegaki.js +++ b/PinkSea.Frontend/src/api/tegaki/tegaki.js @@ -5546,12 +5546,6 @@ var TegakiUI = { frag = $T.el('div'); frag.id = 'tegaki-menu-bar'; - /* Creates a hidden element so that the eraser brush tips can preload. - If there's more assets that need preload in the future, maybe handling this on init with JS might be better?*/ - var preLoader = $T.el('span'); - preLoader.id = 'tegaki-preloader'; - frag.appendChild(preLoader); - var pinkSeaLogo = $T.el('span'); pinkSeaLogo.id = 'tegaki-pinksea-logo'; @@ -5581,7 +5575,7 @@ var TegakiUI = { btn = $T.el('span'); btn.id = 'tegaki-undo-btn'; - btn.className = 'tegaki-mb-btn'; + btn.className = 'tegaki-mb-btn tegaki-ui-icon'; btn.title = TegakiKeybinds.getCaption('undo'); $T.on(btn, 'click', Tegaki.onUndoClick); undoRedoWrapper.appendChild(btn); @@ -5592,7 +5586,7 @@ var TegakiUI = { btn = $T.el('span'); btn.id = 'tegaki-redo-btn'; - btn.className = 'tegaki-mb-btn'; + btn.className = 'tegaki-mb-btn tegaki-ui-icon'; btn.title = TegakiKeybinds.getCaption('redo'); $T.on(btn, 'click', Tegaki.onRedoClick); undoRedoWrapper.appendChild(btn); @@ -5775,7 +5769,7 @@ var TegakiUI = { var line = $T.el("span"); line.className = 'tegaki-separator'; var cancelButton = $T.el('span'); - cancelButton.className = 'tegaki-mb-btn'; + cancelButton.className = 'tegaki-mb-btn tegaki-ui-icon'; cancelButton.id = 'tegaki-cancel-btn'; $T.on(cancelButton, 'click', Tegaki.onCancelClick); @@ -5802,7 +5796,7 @@ var TegakiUI = { el.setAttribute('title', lbl); el.id = 'tegaki-tool-btn-' + name; - el.className = 'tegaki-tool-btn tegaki-icon tegaki-' + name; + el.className = 'tegaki-tool-btn tegaki-icon tegaki-tool-icon tegaki-' + name; $T.on(el, 'click', Tegaki.onToolClick); @@ -5890,20 +5884,20 @@ var TegakiUI = { el = $T.el('span'); el.title = TegakiStrings().addLayer; - el.className = 'tegaki-ui-btn tegaki-icon tegaki-add-layer'; + el.className = 'tegaki-ui-btn tegaki-ui-icon tegaki-add-layer'; $T.on(el, 'click', Tegaki.onLayerAddClick); row.appendChild(el); el = $T.el('span'); el.title = TegakiStrings().delLayers; - el.className = 'tegaki-ui-btn tegaki-icon tegaki-delete'; + el.className = 'tegaki-ui-btn tegaki-ui-icon tegaki-delete'; $T.on(el, 'click', Tegaki.onLayerDeleteClick); row.appendChild(el); el = $T.el('span'); el.id = 'tegaki-layer-merge'; el.title = TegakiStrings().mergeLayers; - el.className = 'tegaki-ui-btn tegaki-icon tegaki-level-down'; + el.className = 'tegaki-ui-btn tegaki-ui-icon tegaki-level-down'; $T.on(el, 'click', Tegaki.onMergeLayersClick); row.appendChild(el); @@ -5911,14 +5905,14 @@ var TegakiUI = { el.id = 'tegaki-layer-up'; el.title = TegakiStrings().moveLayerUp; el.setAttribute('data-up', '1'); - el.className = 'tegaki-ui-btn tegaki-icon tegaki-up-open'; + el.className = 'tegaki-ui-btn tegaki-ui-icon tegaki-up-open'; $T.on(el, 'click', Tegaki.onMoveLayerClick); row.appendChild(el); el = $T.el('span'); el.id = 'tegaki-layer-down'; el.title = TegakiStrings().moveLayerDown; - el.className = 'tegaki-ui-btn tegaki-icon tegaki-down-open'; + el.className = 'tegaki-ui-btn tegaki-ui-icon tegaki-down-open'; $T.on(el, 'click', Tegaki.onMoveLayerClick); row.appendChild(el); @@ -6023,14 +6017,14 @@ var TegakiUI = { ctrl = this.buildCtrlGroup('zoom', TegakiStrings().zoom); btn = $T.el('div'); - btn.className = 'tegaki-ui-btn tegaki-icon tegaki-plus'; + btn.className = 'tegaki-ui-btn tegaki-ui-icon tegaki-plus'; btn.id = 'tegaki-zoomin-btn'; btn.setAttribute('data-in', 1); $T.on(btn, 'click', Tegaki.onZoomChange); ctrl.appendChild(btn); btn = $T.el('div'); - btn.className = 'tegaki-ui-btn tegaki-icon tegaki-minus'; + btn.className = 'tegaki-ui-btn tegaki-ui-icon tegaki-minus'; btn.id = 'tegaki-zoomout-btn'; btn.setAttribute('data-out', 1); $T.on(btn, 'click', Tegaki.onZoomChange); @@ -6067,14 +6061,14 @@ var TegakiUI = { btn.id = 'tegaki-palette-prev-btn'; btn.title = TegakiStrings().switchPalette; btn.setAttribute('data-prev', '1'); - btn.className = 'tegaki-ui-btn tegaki-icon tegaki-left-open tegaki-disabled'; + btn.className = 'tegaki-ui-btn tegaki-ui-icon tegaki-left-open tegaki-disabled'; $T.on(btn, 'click', Tegaki.onSwitchPaletteClick); el.appendChild(btn); btn = $T.el('span'); btn.id = 'tegaki-palette-next-btn'; btn.title = TegakiStrings().switchPalette; - btn.className = 'tegaki-ui-btn tegaki-icon tegaki-right-open'; + btn.className = 'tegaki-ui-btn tegaki-ui-icon tegaki-right-open'; $T.on(btn, 'click', Tegaki.onSwitchPaletteClick); el.appendChild(btn); diff --git a/PinkSea.Frontend/src/assets/tegaki/tegaki.css b/PinkSea.Frontend/src/assets/tegaki/tegaki.css index 20b3063..e773dbb 100644 --- a/PinkSea.Frontend/src/assets/tegaki/tegaki.css +++ b/PinkSea.Frontend/src/assets/tegaki/tegaki.css @@ -29,24 +29,13 @@ line-height: 1em; } -.tegaki-cancel:before { content: '\e800'; } /* '' */ -.tegaki-plus:before { content: '\e801'; } /* '' */ -.tegaki-minus:before { content: '\e802'; } /* '' */ -.tegaki-pen:before { content: '\e803'; } /* '' */ -.tegaki-pencil:before { content: '\e807'; } /* '' */ +/*Default Tegaki Icons using Tegaki Font. When we implement replay these can get swapped out*/ .tegaki-play:before { content: '\e808'; } /* '' */ -.tegaki-bucket:before { content: '\e809'; } /* '' */ .tegaki-pause:before { content: '\e80a'; } /* '' */ -.tegaki-blur:before { content: '\e80b'; } /* '' */ .tegaki-to-start:before { content: '\e80c'; } /* '' */ .tegaki-watercolor:before { content: '\e80d'; } /* '' */ -.tegaki-airbrush:before { content: '\e80f'; } /* '' */ .tegaki-fast-fw:before { content: '\e810'; } /* '' */ .tegaki-fast-bw:before { content: '\e811'; } /* '' */ -.tegaki-left-open:before { content: '\e812'; } /* '' */ -.tegaki-right-open:before { content: '\e813'; } /* '' */ -.tegaki-eraser:before { content: '\f12d'; } /* '' */ -.tegaki-pipette:before { content: '\f1fb'; } /* '' */ /*Custom Icons*/ @@ -83,107 +72,72 @@ } -/*Layers Icons*/ -.tegaki-delete { - content: ''; - background-image: url('/assets/ui/icon-trash.svg'); - background-size: 20px 20px; - background-repeat: no-repeat; - background-position: center; - display: inline-block; - width: 30px; - height: 30px; -} -.tegaki-add-layer { - content: ''; - background-image: url('/assets/ui/icon-add-layer.svg'); - background-size: 20px 20px; - background-repeat: no-repeat; - background-position: center; - display: inline-block; - width: 30px; - height: 30px; -} -.tegaki-level-down { - content: ''; - background-image: url('/assets/ui/icon-merge.svg'); - background-size: 20px 20px; - background-repeat: no-repeat; - background-position: center; - display: inline-block; - width: 30px; - height: 30px; -} -.tegaki-down-open { - content: ''; - background-image: url('/assets/ui/icon-move-down.svg'); + /*Base Icon Size*/ + + .tegaki-ui-icon { background-size: 20px 20px; background-repeat: no-repeat; background-position: center; display: inline-block; width: 30px; height: 30px; - } +} -.tegaki-up-open{ - background-image: url('/assets/ui/icon-move-up.svg'); - background-size: 20px 20px; +.tegaki-tool-icon { + background-size: 23px 23px; background-repeat: no-repeat; background-position: center; display: inline-block; width: 30px; height: 30px; - } +} - /*Tool Icons*/ +/*Tool Icons*/ +.tegaki-tone {background-image: url('/assets/ui/icon-tone.svg');} +.tegaki-pipette {background-image: url('/assets/ui/icon-pipette.svg');} +.tegaki-blur {background-image: url('/assets/ui/icon-blur.svg');} +.tegaki-eraser {background-image: url('/assets/ui/icon-eraser.svg');} +.tegaki-pencil {background-image: url('/assets/ui/icon-pencil.svg'); } +.tegaki-pen {background-image: url('/assets/ui/icon-pen.svg'); } +.tegaki-airbrush {background-image: url('/assets/ui/icon-airbrush.svg'); } +.tegaki-bucket {background-image: url('/assets/ui/icon-fillbucket.svg'); } -.tegaki-tone { - background-image: url('/assets/ui/icon-tone.svg'); - background-size: 20px 20px; - background-repeat: no-repeat; - background-position: center; - display: inline-block; - width: 30px; - height: 30px; -} +/*Control Side Bar Icons*/ +.tegaki-delete {background-image: url('/assets/ui/icon-trash.svg');} +.tegaki-add-layer {background-image: url('/assets/ui/icon-add-layer.svg');} +.tegaki-level-down {background-image: url('/assets/ui/icon-merge.svg');} +.tegaki-plus {background-image: url('/assets/ui/icon-zoom-in.svg');} +.tegaki-minus {background-image: url('/assets/ui/icon-zoom-out.svg');} +.tegaki-down-open {background-image: url('/assets/ui/icon-down.svg');} +.tegaki-up-open{background-image: url('/assets/ui/icon-up.svg');} +.tegaki-left-open {background-image: url('/assets/ui/icon-left.svg'); width:20px; height:20px; background-size: 15px 15px;} +.tegaki-right-open {background-image: url('/assets/ui/icon-right.svg'); width:20px; height:20px; background-size: 15px 15px;} +/*Menu Icons*/ +#tegaki-undo-btn {background-image: url('/assets/ui/icon-undo.svg'); width:20px;} +#tegaki-redo-btn {background-image: url('/assets/ui/icon-redo.svg'); width:20px;} +#tegaki-cancel-btn { background-image: url('/assets/ui/icon-close.svg'); width: 20px; } +#tegaki-pinksea-logo {background-image: url('/assets/ui/icon-pinksea.svg');} -/*Menu Bar*/ -#tegaki-preloader { - position:absolute; - width:0; - height:0; - opacity:0; - background-image: - url('/assets/ui/tip-pencil.svg'), - url('/assets/ui/tip-brush.svg'), - url('/assets/ui/tip-airbnrush.svg'); -} #tegaki-pinksea-logo { - width:40px; - border-right: 1px solid var(--dark-pink); - display:flex; - justify-content: center; - margin-right:6px; -} - -#tegaki-pinksea-logo:before { - content:" "; - background-image: url('/assets/ui/icon-pinksea.svg'); + width:40px; + height: 30px; + border-right: 1px solid var(--dark-pink); + display:flex; + justify-content: center; + margin-right:6px; background-size: 20px 20px; background-repeat: no-repeat; background-position: center; - display: inline-block; - width: 30px; - height: 30px; } + #tegaki-undo-redo { border-left: 1px solid var(--dark-pink); border-right: 1px solid var(--dark-pink); @@ -194,27 +148,7 @@ padding:0 6px; } -#tegaki-undo-btn:before { - content:" "; - background-image: url('/assets/ui/icon-undo.svg'); - background-size: 20px 20px; - background-repeat: no-repeat; - background-position: center; - display: inline-block; - width: 20px; - height: 30px; -} -#tegaki-redo-btn:before { - content:" "; - background-image: url('/assets/ui/icon-redo.svg'); - background-size: 20px 20px; - background-repeat: no-repeat; - background-position: center; - display: inline-block; - width: 20px; - height: 30px; -} #tegaki-cancel-wrapper { margin-left: auto; @@ -226,16 +160,7 @@ -#tegaki-cancel-btn:before { - content:" "; - background-image: url('/assets/ui/icon-close.svg'); - background-size: 20px 20px; - background-repeat: no-repeat; - background-position: center; - display: inline-block; - width: 20px; - height: 30px; -} + .tegaki-disabled, .tegaki-disabled::after, @@ -552,6 +477,13 @@ -ms-interpolation-mode: nearest-neighbor; } +#tegaki-tools-grid { + display: flex; + flex-direction: column; + gap: 3px; + padding-top: 3px; +} + .tegaki-tool-active { filter: brightness(0) saturate(100%) invert(72%) sepia(84%) saturate(4903%) hue-rotate(324deg) brightness(120%) contrast(110%); From ea05d9d42426831b2b798fffcb4d451e9b1e37a5 Mon Sep 17 00:00:00 2001 From: Verti Date: Thu, 14 Aug 2025 18:12:22 +0200 Subject: [PATCH 5/6] Adds more color palettes, adjusts some stylings, tidies up code --- .../public/assets/ui/icon-pinksea.svg | 8 +- PinkSea.Frontend/src/api/tegaki/tegaki.js | 32 +++++++ PinkSea.Frontend/src/assets/tegaki/tegaki.css | 92 +++++-------------- 3 files changed, 59 insertions(+), 73 deletions(-) diff --git a/PinkSea.Frontend/public/assets/ui/icon-pinksea.svg b/PinkSea.Frontend/public/assets/ui/icon-pinksea.svg index 4f2f209..171fd80 100644 --- a/PinkSea.Frontend/public/assets/ui/icon-pinksea.svg +++ b/PinkSea.Frontend/public/assets/ui/icon-pinksea.svg @@ -5,16 +5,16 @@ diff --git a/PinkSea.Frontend/src/api/tegaki/tegaki.js b/PinkSea.Frontend/src/api/tegaki/tegaki.js index fd3db2b..0548422 100644 --- a/PinkSea.Frontend/src/api/tegaki/tegaki.js +++ b/PinkSea.Frontend/src/api/tegaki/tegaki.js @@ -4117,6 +4117,16 @@ export var Tegaki = { } }; var TegakiColorPalettes = [ + [ + + '#000000','#ffffff','#5ba675', '#6bc96c', '#abdd64', + '#fcef8d', '#ffb879', '#ea6262', '#cc425e', '#a32858', + '#751756', '#390947', '#611851', '#873555', '#a6555f', + '#c97373', '#f2ae99', '#ffc3f2', '#ee8fcb', '#d46eb3', + '#873e84', '#4a3052', '#7b5480', '#a6859f', '#d9bdc8', + '#aee2ff', '#8db7ff', '#3a74ff' + ], + [ '#ffffff', '#000000', '#888888', '#b47575', '#c096c0', '#fa9696', '#8080ff', '#ffb6ff', '#e7e58d', '#25c7c9', @@ -4135,7 +4145,29 @@ var TegakiColorPalettes = [ '#ffd700', '#ffeb3b', '#ffffcc', '#f3e5ab', '#cddc39', '#8bc34a', '#4caf50', '#3e8948', '#355e3b', '#3eb489', '#f0f8ff', '#87ceeb', '#6699cc', '#007fff', '#2d68c4', '#364478', '#352c4a', '#9c27b0', '#da70d6', '#ff0090', '#fa8072', '#f19cbb', '#c78b95' + ], + + [ + '#10121c', '#2c1e31', '#6b2643', '#ac2847', '#ec273f', + '#94493a', '#de5d3a', '#e98537', '#f3a833', '#4d3533', + '#6e4c30', '#a26d3f', '#ce9248', '#dab163', '#e8d282', + '#f7f3b7', '#1e4044', '#006554', '#26854c', '#5ab552', + '#9de64e', '#008b8b', '#62a477', '#a6cb96', '#d3eed3', + '#3e3b65', '#3859b3', '#3388de', '#36c5f4', '#6dead6', + '#5e5b8c', '#8c78a5', '#b0a7b8', '#deceed', '#9a4d76', + '#c878af', '#cc99ff', '#fa6e79', '#ffa2ac', '#ffd1d5', + '#f6e8e0', '#ffffff' +], +[ + '#000000', '#00021c', '#1c284d', '#343473', '#2d5280', + '#4d7a99', '#7497a6', '#a3ccd9', '#f0edd8', '#ffffff', '#732866', + '#a6216e', '#d94c87', '#d9214f', '#f25565', '#f27961', + '#993649', '#b36159', '#f09c60', '#b38f24', '#b3b324', + '#f7c93e', '#17735f', '#119955', '#67b31b', '#1ba683', + '#47cca9', '#96e3c9', '#2469b3', '#0b8be6', '#0bafe6', + '#f28d85', '#f0bb90' ] + ]; var TegakiPressure = { pressureNow: 0.0, diff --git a/PinkSea.Frontend/src/assets/tegaki/tegaki.css b/PinkSea.Frontend/src/assets/tegaki/tegaki.css index e773dbb..08dc9f6 100644 --- a/PinkSea.Frontend/src/assets/tegaki/tegaki.css +++ b/PinkSea.Frontend/src/assets/tegaki/tegaki.css @@ -12,7 +12,7 @@ --pink:#FFE5EA; --dark-pink: #ffb6c1; --darkest-pink: #361616; - --accent: #a61930; + --accent: #ff6e6e; } @@ -29,7 +29,9 @@ line-height: 1em; } -/*Default Tegaki Icons using Tegaki Font. When we implement replay these can get swapped out*/ +/*Default Tegaki icons using Tegaki Font. +Currently not used. When implementing replay, +we can make more custom icons and swap these out too*/ .tegaki-play:before { content: '\e808'; } /* '' */ .tegaki-pause:before { content: '\e80a'; } /* '' */ .tegaki-to-start:before { content: '\e80c'; } /* '' */ @@ -37,7 +39,7 @@ .tegaki-fast-fw:before { content: '\e810'; } /* '' */ .tegaki-fast-bw:before { content: '\e811'; } /* '' */ -/*Custom Icons*/ +/*Custom Pinksea Icons*/ /*Eraser Tip Icons */ #tegaki-tool-mode-tip-0:before { @@ -72,11 +74,7 @@ } - - - - /*Base Icon Size*/ - + /*Base Icon Sizes*/ .tegaki-ui-icon { background-size: 20px 20px; background-repeat: no-repeat; @@ -84,8 +82,14 @@ display: inline-block; width: 30px; height: 30px; + cursor: pointer; } +.tegaki-ui-icon.tegaki-disabled { + cursor: default; +} + + .tegaki-tool-icon { background-size: 23px 23px; background-repeat: no-repeat; @@ -93,6 +97,7 @@ display: inline-block; width: 30px; height: 30px; + cursor: pointer; } @@ -197,8 +202,8 @@ height: 100%; top: 0; left: 0; - background-color: #FFB6C1; - color: #361616; + background-color: var(--dark-pink); + color: var(--darkest-pink); font-family: arial, sans-serif; -moz-user-select: none; -webkit-user-select: none; @@ -269,7 +274,7 @@ } #tegaki-status-version { - color: #361616; + color: var(--dark-pink); font-size: 11px; margin-left: auto; } @@ -373,13 +378,13 @@ -/* Hide the default checkbox */ +/* Hide the default checkbox*/ .tegaki-checkbox-input { opacity: 0; position: absolute; } -/* Custom checkbox appearance */ +/* Custom checkbox */ .tegaki-checkbox-icon { width: 12px; height: 12px; @@ -389,7 +394,7 @@ background: var(--bright); position: relative; transition: all 0.15s ease; - flex-shrink: 0; /* Prevent shrinking */ + flex-shrink: 0; } /* Checked state */ @@ -408,65 +413,12 @@ line-height: 1; } -/* Label styling */ +/* Label*/ .tegaki-checkbox-label { user-select: none; cursor: pointer; } -/*.tegaki-checkbox-wrapper input { - position: absolute; - opacity: 0; - cursor: pointer; - height: 0; - width: 0; -} -*/ -/* Create a custom checkbox */ -.checkmark { - position: absolute; - top: 0; - left: 0; - height: 25px; - width: 25px; - background-color: #eee; -} - -/* On mouse-over, add a grey background color */ -.tegaki-checkbox-wrapper:hover input ~ .checkmark { - background-color: #ccc; -} - -/* When the checkbox is checked, add a blue background */ -.tegaki-checkbox-wrapper input:checked ~ .checkmark { - background-color: #2196F3; -} - -/* Create the checkmark/indicator (hidden when not checked) */ -.checkmark:after { - content: ""; - position: absolute; - display: none; -} - -/* Show the checkmark when checked */ -.tegaki-checkbox-wrapper input:checked ~ .checkmark:after { - display: block; -} - -/* Style the checkmark/indicator */ -.tegaki-checkbox-wrapper .checkmark:after { - left: 9px; - top: 5px; - width: 5px; - height: 10px; - border: solid white; - border-width: 0 3px 3px 0; - -webkit-transform: rotate(45deg); - -ms-transform: rotate(45deg); - transform: rotate(45deg); -} - #tegaki canvas { @@ -484,6 +436,7 @@ padding-top: 3px; } +/*Colors the tool red-pink when active*/ .tegaki-tool-active { filter: brightness(0) saturate(100%) invert(72%) sepia(84%) saturate(4903%) hue-rotate(324deg) brightness(120%) contrast(110%); @@ -766,7 +719,7 @@ font-weight: bold; margin: 20px 0 13px; background-color: var(--dark-pink); - padding: 1px 4px; + padding: 2px 4px; } #tegaki-ctrlgrp-zoom .tegaki-ctrlgrp-title { @@ -840,6 +793,7 @@ display: grid; grid-gap: 1px; margin-top: 10px; + padding-right:10px; } .tegaki-color-grid-20 { From accc5e72b538339f792ee268c97eb6feba99aae7 Mon Sep 17 00:00:00 2001 From: Verti Date: Thu, 14 Aug 2025 19:13:10 +0200 Subject: [PATCH 6/6] Renames the tool 'pen' to 'brush' and changes en and de translations to accomodate for that. --- PinkSea.Frontend/src/api/tegaki/tegaki.js | 8 ++++---- PinkSea.Frontend/src/assets/tegaki/tegaki.css | 2 +- PinkSea.Frontend/src/intl/translations/de.json | 14 +++++++------- PinkSea.Frontend/src/intl/translations/en.json | 2 +- 4 files changed, 13 insertions(+), 13 deletions(-) diff --git a/PinkSea.Frontend/src/api/tegaki/tegaki.js b/PinkSea.Frontend/src/api/tegaki/tegaki.js index 0548422..00b74ff 100644 --- a/PinkSea.Frontend/src/api/tegaki/tegaki.js +++ b/PinkSea.Frontend/src/api/tegaki/tegaki.js @@ -501,7 +501,7 @@ export class TegakiPencil extends TegakiBrush { this.name = 'pencil'; - this.keybind = 'b'; + this.keybind = 'p'; this.step = 0.01; @@ -662,9 +662,9 @@ export class TegakiPen extends TegakiBrush { this.id = 2; - this.name = 'pen'; + this.name = 'brush'; - this.keybind = 'p'; + this.keybind = 'b'; this.step = 0.05; @@ -4032,7 +4032,7 @@ export var Tegaki = { Tegaki.activePointerId = e.pointerId; - Tegaki.activePointerIsPen = e.pointerType === 'pen'; + Tegaki.activePointerIsPen = e.pointerType === 'brush'; if (Tegaki.activeLayer === null) { if (e.target.parentNode === Tegaki.layersCnt) { diff --git a/PinkSea.Frontend/src/assets/tegaki/tegaki.css b/PinkSea.Frontend/src/assets/tegaki/tegaki.css index 08dc9f6..f2f3b8e 100644 --- a/PinkSea.Frontend/src/assets/tegaki/tegaki.css +++ b/PinkSea.Frontend/src/assets/tegaki/tegaki.css @@ -107,7 +107,7 @@ we can make more custom icons and swap these out too*/ .tegaki-blur {background-image: url('/assets/ui/icon-blur.svg');} .tegaki-eraser {background-image: url('/assets/ui/icon-eraser.svg');} .tegaki-pencil {background-image: url('/assets/ui/icon-pencil.svg'); } -.tegaki-pen {background-image: url('/assets/ui/icon-pen.svg'); } +.tegaki-brush {background-image: url('/assets/ui/icon-pen.svg'); } .tegaki-airbrush {background-image: url('/assets/ui/icon-airbrush.svg'); } .tegaki-bucket {background-image: url('/assets/ui/icon-fillbucket.svg'); } diff --git a/PinkSea.Frontend/src/intl/translations/de.json b/PinkSea.Frontend/src/intl/translations/de.json index fc87cf8..9cc8472 100644 --- a/PinkSea.Frontend/src/intl/translations/de.json +++ b/PinkSea.Frontend/src/intl/translations/de.json @@ -98,9 +98,9 @@ "close": "Schließen", "finish": "Fertig", "tip": "Tip", - "pen": "Stift", + "brush": "Pinsel", "bucket": "Fülleimer", - "tone": "Ton", + "tone": "Raster", "gapless": "Lückenlos", "pause": "Pause", "slower": "Langsamer", @@ -114,14 +114,14 @@ "promptHeight": "Leinwandhöhe in Pixel", "confirmCancel": "Bist du dir sicher? Deine Arbeit wird nicht gespeichert.", "confirmChangeCanvas": "Bist du dir sicher? Änderungen an der Leinwand werden alle deiner Layer und vergangenen Tätigkeiten nicht speichern sowohl als auch deine Bildschirmaufnahme deaktivieren.", - "layers": "Layer", + "layers": "Ebenen", "eraser": "Radierer", - "addLayer": "Layer hinzufügen", - "delLayers": "Layer löschen", - "mergeLayers": "Layer zusammenführen", + "addLayer": "Ebene hinzufügen", + "delLayers": "Ebene löschen", + "mergeLayers": "Ebene zusammenführen", "moveLayerUp": "Hochziehen", "moveLayerDown": "Runterziehen", "pressure": "Druck", - "preserveAlpha": "Alpha behalten" + "preserveAlpha": "Transparente Pixel sperren" } } diff --git a/PinkSea.Frontend/src/intl/translations/en.json b/PinkSea.Frontend/src/intl/translations/en.json index 4e7da62..fc9d2e0 100644 --- a/PinkSea.Frontend/src/intl/translations/en.json +++ b/PinkSea.Frontend/src/intl/translations/en.json @@ -154,7 +154,7 @@ "pressure": "Pressure", "preserveAlpha": "Preserve Alpha", - "pen": "Pen", + "brush": "Brush", "pencil": "Pencil", "airbrush": "Airbrush", "pipette": "Pipette",