From 9af36fb4221c295e04ea381ba5a36b7be93e2aa1 Mon Sep 17 00:00:00 2001 From: isUnknown Date: Thu, 4 Dec 2025 15:03:29 +0100 Subject: [PATCH] feat: integrate Coloris color picker for background field MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Add Coloris.js library for enhanced color selection in PageSettings with automatic button state sync across tab changes. Features: - Color picker with swatches, alpha support, and format toggle (hex/rgb/hsl) - Button positioned to the left of input field - Automatic sync when switching tabs (remembers selected color) - Close button and click-outside-to-close functionality - Dark theme with pill UI style Changes: - Install @melloware/coloris package - PageSettings.vue: Integrate Coloris with data-coloris attribute, add tab visibility detection via provide/inject, force button update when returning to document tab - EditorPanel.vue: Provide activeTab to child components, increase panel width to 30rem - _forms.scss: Add .input-with-color styles with custom Coloris button positioning (absolute positioned to left of input) - Temporarily comment out rgb/hex format buttons (replaced by Coloris format toggle) Technical details: - Uses provide/inject pattern to detect tab changes - Triggers synthetic input events to force Coloris button refresh - Custom CSS overrides to position swatch button correctly 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- package-lock.json | 7 + package.json | 1 + ...s-interface.scss => pagedjs-interface.css} | 0 public/assets/css/src/_buttons.scss | 21 ++ public/assets/css/src/_forms.scss | 72 +++++ .../{print-styles.scss => _print-styles.scss} | 0 public/assets/css/src/_reset.scss | 27 ++ public/assets/css/src/_text.scss | 15 + public/assets/css/src/_variables.scss | 8 + public/assets/css/src/editor-ui.scss | 1 - public/assets/css/style.css | 278 +++++++----------- public/assets/css/style.css.map | 2 +- public/assets/css/style.scss | 10 +- .../{src/stylesheet.scss => stylesheet.css} | 0 public/site/snippets/header.php | 4 +- src/components/editor/EditorPanel.vue | 7 +- src/components/editor/PageSettings.vue | 85 +++++- 17 files changed, 359 insertions(+), 179 deletions(-) rename public/assets/css/{src/pagedjs-interface.scss => pagedjs-interface.css} (100%) create mode 100644 public/assets/css/src/_buttons.scss create mode 100644 public/assets/css/src/_forms.scss rename public/assets/css/src/{print-styles.scss => _print-styles.scss} (100%) create mode 100644 public/assets/css/src/_reset.scss create mode 100644 public/assets/css/src/_text.scss create mode 100644 public/assets/css/src/_variables.scss delete mode 100644 public/assets/css/src/editor-ui.scss rename public/assets/css/{src/stylesheet.scss => stylesheet.css} (100%) diff --git a/package-lock.json b/package-lock.json index be5ff4b..a84d662 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "geoproject", "version": "0.0.0", "dependencies": { + "@melloware/coloris": "^0.25.0", "highlight.js": "^11.11.1", "pagedjs": "^0.4.3", "pinia": "^3.0.4", @@ -532,6 +533,12 @@ "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==", "license": "MIT" }, + "node_modules/@melloware/coloris": { + "version": "0.25.0", + "resolved": "https://registry.npmjs.org/@melloware/coloris/-/coloris-0.25.0.tgz", + "integrity": "sha512-RBWVFLjWbup7GRkOXb9g3+ZtR9AevFtJinrRz2cYPLjZ3TCkNRGMWuNbmQWbZ5cF3VU7aQDZwUsYgIY/bGrh2g==", + "license": "MIT" + }, "node_modules/@rolldown/pluginutils": { "version": "1.0.0-beta.50", "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.50.tgz", diff --git a/package.json b/package.json index 03d6604..1b82269 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "preview": "vite preview" }, "dependencies": { + "@melloware/coloris": "^0.25.0", "highlight.js": "^11.11.1", "pagedjs": "^0.4.3", "pinia": "^3.0.4", diff --git a/public/assets/css/src/pagedjs-interface.scss b/public/assets/css/pagedjs-interface.css similarity index 100% rename from public/assets/css/src/pagedjs-interface.scss rename to public/assets/css/pagedjs-interface.css diff --git a/public/assets/css/src/_buttons.scss b/public/assets/css/src/_buttons.scss new file mode 100644 index 0000000..970b909 --- /dev/null +++ b/public/assets/css/src/_buttons.scss @@ -0,0 +1,21 @@ +button { + cursor: pointer; + + border: 1px solid var(--color-browngray-300); + color: var(--color-browngray-300); + border-radius: var(--border-radius); + padding: 0.1rem 0.3rem; + + &.active { + border: 1px solid #000; + color: #000; + } + + &.tab { + &.active { + background-color: #000; + color: #fff; + border: none; + } + } +} diff --git a/public/assets/css/src/_forms.scss b/public/assets/css/src/_forms.scss new file mode 100644 index 0000000..34ce9ce --- /dev/null +++ b/public/assets/css/src/_forms.scss @@ -0,0 +1,72 @@ +select, +input[type="text"], +input[type="number"] { + background-color: var(--color-browngray-300); +} + +.field--view-only { + opacity: 0.3; +} + +.settings-section { + h2 { + border-bottom: 1px solid #000; + } + .settings-subsection:not(:last-child) { + border-bottom: 1px solid var(--color-browngray-050); + } + + .settings-subsection { + padding: 0.5rem 0; + + .field { + display: flex; + label { + width: 50%; + } + + .input-with-unit { + display: flex; + } + + .input-with-color { + .clr-field { + display: flex; + button { + position: absolute; + transform: none; + height: 1rem; + top: auto; + right: auto; + cursor: pointer; + } + + input { + padding-left: 2.5rem; + } + } + } + } + + &.margins { + display: flex; + flex-wrap: wrap; + h3 { + width: 100%; + } + .field { + width: 50%; + + label { + width: 50%; + } + + .input-with-unit { + input { + width: 50%; + } + } + } + } + } +} diff --git a/public/assets/css/src/print-styles.scss b/public/assets/css/src/_print-styles.scss similarity index 100% rename from public/assets/css/src/print-styles.scss rename to public/assets/css/src/_print-styles.scss diff --git a/public/assets/css/src/_reset.scss b/public/assets/css/src/_reset.scss new file mode 100644 index 0000000..ed3fb95 --- /dev/null +++ b/public/assets/css/src/_reset.scss @@ -0,0 +1,27 @@ +body, +html { + padding: 0; + margin: 0; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + margin: 0; +} + +input, +select { + border: none; + outline: none; + + border-radius: var(--border-radius); +} + +button { + background-color: transparent; + border: none; +} diff --git a/public/assets/css/src/_text.scss b/public/assets/css/src/_text.scss new file mode 100644 index 0000000..6c537a3 --- /dev/null +++ b/public/assets/css/src/_text.scss @@ -0,0 +1,15 @@ +body, +h1, +h2, +h3, +h4, +h5, +h6, +p, +a, +input, +select, +figcaption, +label { + font-family: sans-serif; +} diff --git a/public/assets/css/src/_variables.scss b/public/assets/css/src/_variables.scss new file mode 100644 index 0000000..b9a0427 --- /dev/null +++ b/public/assets/css/src/_variables.scss @@ -0,0 +1,8 @@ +:root { + --color-panel-bg: #e8e6e5; + --color-browngray-050: #f5f3f0; + --color-browngray-200: #d0c4ba; + --color-browngray-300: #b5a9a1; + + --border-radius: 0.2rem; +} diff --git a/public/assets/css/src/editor-ui.scss b/public/assets/css/src/editor-ui.scss deleted file mode 100644 index 8b13789..0000000 --- a/public/assets/css/src/editor-ui.scss +++ /dev/null @@ -1 +0,0 @@ - diff --git a/public/assets/css/style.css b/public/assets/css/style.css index e647445..4f98705 100644 --- a/public/assets/css/style.css +++ b/public/assets/css/style.css @@ -1,152 +1,52 @@ -@charset "UTF-8"; -/* CSS for Paged.js interface – v0.4 */ -/* Change the look */ +body, +html { + padding: 0; + margin: 0; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + margin: 0; +} + +input, +select { + border: none; + outline: none; + border-radius: var(--border-radius); +} + +button { + background-color: transparent; + border: none; +} + :root { - --color-background: whitesmoke; - --color-pageSheet: #cfcfcf; - --color-pageBox: violet; - --color-paper: white; - --color-marginBox: transparent; - --pagedjs-crop-color: black; - --pagedjs-crop-shadow: white; - --pagedjs-crop-stroke: 1px; + --color-panel-bg: #e8e6e5; + --color-browngray-050: #f5f3f0; + --color-browngray-200: #d0c4ba; + --color-browngray-300: #b5a9a1; + --border-radius: 0.2rem; } -/* To define how the book look on the screen: */ -@media screen, pagedjs-ignore { - body { - background-color: var(--color-background); - } - .pagedjs_pages { - display: flex; - width: calc(var(--pagedjs-width) * 2); - flex: 0; - flex-wrap: wrap; - margin: 0 auto; - } - .pagedjs_page { - background-color: var(--color-paper); - box-shadow: 0 0 0 1px var(--color-pageSheet); - margin: 0; - flex-shrink: 0; - flex-grow: 0; - margin-top: 10mm; - } - .pagedjs_first_page { - margin-left: var(--pagedjs-width); - } - .pagedjs_page:last-of-type { - margin-bottom: 10mm; - } - .pagedjs_pagebox { - box-shadow: 0 0 0 1px var(--color-pageBox); - } - .pagedjs_left_page { - z-index: 20; - width: calc(var(--pagedjs-bleed-left) + var(--pagedjs-pagebox-width)) !important; - } - .pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-crop { - border-color: transparent; - } - .pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-middle { - width: 0; - } - .pagedjs_right_page { - z-index: 10; - position: relative; - left: calc(var(--pagedjs-bleed-left) * -1); - } - /* show the margin-box */ - .pagedjs_margin-top-left-corner-holder, - .pagedjs_margin-top, - .pagedjs_margin-top-left, - .pagedjs_margin-top-center, - .pagedjs_margin-top-right, - .pagedjs_margin-top-right-corner-holder, - .pagedjs_margin-bottom-left-corner-holder, - .pagedjs_margin-bottom, - .pagedjs_margin-bottom-left, - .pagedjs_margin-bottom-center, - .pagedjs_margin-bottom-right, - .pagedjs_margin-bottom-right-corner-holder, - .pagedjs_margin-right, - .pagedjs_margin-right-top, - .pagedjs_margin-right-middle, - .pagedjs_margin-right-bottom, - .pagedjs_margin-left, - .pagedjs_margin-left-top, - .pagedjs_margin-left-middle, - .pagedjs_margin-left-bottom { - box-shadow: 0 0 0 1px inset var(--color-marginBox); - } - /* uncomment this part for recto/verso book : ------------------------------------ */ - /* - .pagedjs_pages { - flex-direction: column; - width: 100%; - } - - .pagedjs_first_page { - margin-left: 0; - } - - .pagedjs_page { - margin: 0 auto; - margin-top: 10mm; - } - - .pagedjs_left_page{ - width: calc(var(--pagedjs-bleed-left) + var(--pagedjs-pagebox-width) + var(--pagedjs-bleed-left))!important; - } - - .pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-crop{ - border-color: var(--pagedjs-crop-color); - } - - .pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-middle{ - width: var(--pagedjs-cross-size)!important; - } - - .pagedjs_right_page{ - left: 0; - } - */ - /*--------------------------------------------------------------------------------------*/ - /* uncomment this par to see the baseline : -------------------------------------------*/ - /* .pagedjs_pagebox { - --pagedjs-baseline: 22px; - --pagedjs-baseline-position: 5px; - --pagedjs-baseline-color: cyan; - background: linear-gradient(transparent 0%, transparent calc(var(--pagedjs-baseline) - 1px), var(--pagedjs-baseline-color) calc(var(--pagedjs-baseline) - 1px), var(--pagedjs-baseline-color) var(--pagedjs-baseline)), transparent; - background-size: 100% var(--pagedjs-baseline); - background-repeat: repeat-y; - background-position-y: var(--pagedjs-baseline-position); - } */ - /*--------------------------------------------------------------------------------------*/ -} -/* Marks (to delete when merge in paged.js) */ -.pagedjs_marks-crop { - z-index: 999999999999; -} - -.pagedjs_bleed-top .pagedjs_marks-crop, -.pagedjs_bleed-bottom .pagedjs_marks-crop { - box-shadow: 1px 0px 0px 0px var(--pagedjs-crop-shadow); -} - -.pagedjs_bleed-top .pagedjs_marks-crop:last-child, -.pagedjs_bleed-bottom .pagedjs_marks-crop:last-child { - box-shadow: -1px 0px 0px 0px var(--pagedjs-crop-shadow); -} - -.pagedjs_bleed-left .pagedjs_marks-crop, -.pagedjs_bleed-right .pagedjs_marks-crop { - box-shadow: 0px 1px 0px 0px var(--pagedjs-crop-shadow); -} - -.pagedjs_bleed-left .pagedjs_marks-crop:last-child, -.pagedjs_bleed-right .pagedjs_marks-crop:last-child { - box-shadow: 0px -1px 0px 0px var(--pagedjs-crop-shadow); +body, +h1, +h2, +h3, +h4, +h5, +h6, +p, +a, +input, +select, +figcaption, +label { + font-family: sans-serif; } /* PagedJS print styles */ @@ -168,28 +68,78 @@ h2 { string-set: title content(text); } -@page { - size: A4; - margin: 20mm 15mm 26mm 15mm; -} -@page { - @bottom-center { - content: string(title); - } -} -h2 { - -moz-column-break-before: page; - break-before: page; +select, +input[type=text], +input[type=number] { + background-color: var(--color-browngray-300); } -.chapter > h2 { - string-set: title content(text); +.field--view-only { + opacity: 0.3; } -#chapter-2 { - font-size: 2rem; +.settings-section h2 { + border-bottom: 1px solid #000; +} +.settings-section .settings-subsection:not(:last-child) { + border-bottom: 1px solid var(--color-browngray-050); +} +.settings-section .settings-subsection { + padding: 0.5rem 0; +} +.settings-section .settings-subsection .field { + display: flex; +} +.settings-section .settings-subsection .field label { + width: 50%; +} +.settings-section .settings-subsection .field .input-with-unit { + display: flex; +} +.settings-section .settings-subsection .field .input-with-color .clr-field { + display: flex; +} +.settings-section .settings-subsection .field .input-with-color .clr-field button { + position: absolute; + transform: none; + height: 1rem; + top: auto; + right: auto; + cursor: pointer; +} +.settings-section .settings-subsection .field .input-with-color .clr-field input { + padding-left: 2.5rem; +} +.settings-section .settings-subsection.margins { + display: flex; + flex-wrap: wrap; +} +.settings-section .settings-subsection.margins h3 { + width: 100%; +} +.settings-section .settings-subsection.margins .field { + width: 50%; +} +.settings-section .settings-subsection.margins .field label { + width: 50%; +} +.settings-section .settings-subsection.margins .field .input-with-unit input { + width: 50%; } -p { - font-size: 1rem; +button { + cursor: pointer; + border: 1px solid var(--color-browngray-300); + color: var(--color-browngray-300); + border-radius: var(--border-radius); + padding: 0.1rem 0.3rem; +} +button.active { + border: 1px solid #000; + color: #000; +} +button.tab.active { + background-color: #000; + color: #fff; + border: none; }/*# sourceMappingURL=style.css.map */ \ No newline at end of file diff --git a/public/assets/css/style.css.map b/public/assets/css/style.css.map index 76d684b..3fafa0d 100644 --- a/public/assets/css/style.css.map +++ b/public/assets/css/style.css.map @@ -1 +1 @@ -{"version":3,"sources":["style.css","src/pagedjs-interface.scss","src/print-styles.scss","src/stylesheet.scss"],"names":[],"mappings":"AAAA,gBAAgB;ACAhB,sCAAA;AAEA,oBAAA;AACA;EACE,8BAAA;EACA,0BAAA;EACA,uBAAA;EACA,oBAAA;EACA,8BAAA;EACA,2BAAA;EACA,4BAAA;EACA,0BAAA;ADCF;;ACEA,+CAAA;AACA;EACE;IACE,yCAAA;EDCF;ECEA;IACE,aAAA;IACA,qCAAA;IACA,OAAA;IACA,eAAA;IACA,cAAA;EDAF;ECGA;IACE,oCAAA;IACA,4CAAA;IACA,SAAA;IACA,cAAA;IACA,YAAA;IACA,gBAAA;EDDF;ECIA;IACE,iCAAA;EDFF;ECKA;IACE,mBAAA;EDHF;ECMA;IACE,0CAAA;EDJF;ECOA;IACE,WAAA;IACA,gFAAA;EDLF;ECUA;IACE,yBAAA;EDRF;ECWA;IACE,QAAA;EDTF;ECYA;IACE,WAAA;IACA,kBAAA;IACA,0CAAA;EDVF;ECaA,wBAAA;EAEA;;;;;;;;;;;;;;;;;;;;IAoBE,kDAAA;EDZF;ECeA,oFAAA;EAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAAA;EAgCA,yFAAA;EAEA,wFAAA;EAEA;;;;;;;;MAAA;EAUA,yFAAA;ADlBF;ACqBA,6CAAA;AAEA;EACE,qBAAA;ADpBF;;ACuBA;;EAEE,sDAAA;ADpBF;;ACuBA;;EAEE,uDAAA;ADpBF;;ACuBA;;EAEE,sDAAA;ADpBF;;ACuBA;;EAEE,uDAAA;ADpBF;;AErJA,yBAAA;AACA;EACE,QAAA;EACA,2BAAA;AFwJF;AEtJA;EACE,8BAAA;OAAA,kBAAA;AFwJF;;AErJA;EACE;IACE,sBAAA;EFwJF;AACF;AEtJA;EACE,+BAAA;AFwJF;;AGvKA;EACE,QAAA;EACA,2BAAA;AH0KF;AGvKA;EACE;IAAiB,sBAAA;EH0KjB;AACF;AGxKA;EACE,8BAAA;OAAA,kBAAA;AH0KF;;AGvKA;EACE,+BAAA;AH0KF;;AGvKA;EACE,eAAA;AH0KF;;AGvKA;EACE,eAAA;AH0KF","file":"style.css"} \ No newline at end of file +{"version":3,"sources":["src/_reset.scss","style.css","src/_variables.scss","src/_text.scss","src/_print-styles.scss","src/_forms.scss","src/_buttons.scss"],"names":[],"mappings":"AAAA;;EAEE,UAAA;EACA,SAAA;ACCF;;ADEA;;;;;;EAME,SAAA;ACCF;;ADEA;;EAEE,YAAA;EACA,aAAA;EAEA,mCAAA;ACAF;;ADGA;EACE,6BAAA;EACA,YAAA;ACAF;;ACzBA;EACE,yBAAA;EACA,8BAAA;EACA,8BAAA;EACA,8BAAA;EAEA,uBAAA;AD2BF;;AEjCA;;;;;;;;;;;;;EAaE,uBAAA;AFoCF;;AGjDA,yBAAA;AACA;EACE,QAAA;EACA,2BAAA;AHoDF;AGlDA;EACE,8BAAA;OAAA,kBAAA;AHoDF;;AGjDA;EACE;IACE,sBAAA;EHoDF;AACF;AGlDA;EACE,+BAAA;AHoDF;;AInEA;;;EAGE,4CAAA;AJsEF;;AInEA;EACE,YAAA;AJsEF;;AIlEE;EACE,6BAAA;AJqEJ;AInEE;EACE,mDAAA;AJqEJ;AIlEE;EACE,iBAAA;AJoEJ;AIlEI;EACE,aAAA;AJoEN;AInEM;EACE,UAAA;AJqER;AIlEM;EACE,aAAA;AJoER;AIhEQ;EACE,aAAA;AJkEV;AIjEU;EACE,kBAAA;EACA,eAAA;EACA,YAAA;EACA,SAAA;EACA,WAAA;EACA,eAAA;AJmEZ;AIhEU;EACE,oBAAA;AJkEZ;AI5DI;EACE,aAAA;EACA,eAAA;AJ8DN;AI7DM;EACE,WAAA;AJ+DR;AI7DM;EACE,UAAA;AJ+DR;AI7DQ;EACE,UAAA;AJ+DV;AI3DU;EACE,UAAA;AJ6DZ;;AK9HA;EACE,eAAA;EAEA,4CAAA;EACA,iCAAA;EACA,mCAAA;EACA,sBAAA;ALgIF;AK9HE;EACE,sBAAA;EACA,WAAA;ALgIJ;AK5HI;EACE,sBAAA;EACA,WAAA;EACA,YAAA;AL8HN","file":"style.css"} \ No newline at end of file diff --git a/public/assets/css/style.scss b/public/assets/css/style.scss index 113c864..3b96e2f 100644 --- a/public/assets/css/style.scss +++ b/public/assets/css/style.scss @@ -1,4 +1,6 @@ -@import "src/editor-ui.scss"; -@import "src/pagedjs-interface.scss"; -@import "src/print-styles.scss"; -@import "src/stylesheet.scss"; +@import "src/_reset.scss"; +@import "src/_variables.scss"; +@import "src/_text.scss"; +@import "src/_print-styles.scss"; +@import "src/_forms.scss"; +@import "src/_buttons.scss"; diff --git a/public/assets/css/src/stylesheet.scss b/public/assets/css/stylesheet.css similarity index 100% rename from public/assets/css/src/stylesheet.scss rename to public/assets/css/stylesheet.css diff --git a/public/site/snippets/header.php b/public/site/snippets/header.php index 8326578..75fd430 100644 --- a/public/site/snippets/header.php +++ b/public/site/snippets/header.php @@ -8,8 +8,8 @@ isHomePage() != true, $page->title() . ' - ') . $site->title() ?> - - + + diff --git a/src/components/editor/EditorPanel.vue b/src/components/editor/EditorPanel.vue index 76bd422..b87e98d 100644 --- a/src/components/editor/EditorPanel.vue +++ b/src/components/editor/EditorPanel.vue @@ -45,13 +45,16 @@