From 05e98850a9d176795e499353bcd0dd80ed6b6f2d Mon Sep 17 00:00:00 2001 From: Will Hanlen Date: Fri, 2 Aug 2024 01:34:17 -0500 Subject: [PATCH 1/2] full color styling in sky settings --- pkg/arvo/neo/cod/std/src/con/home-htmx.hoon | 2 +- pkg/arvo/neo/cod/std/src/con/sky-htmx.hoon | 82 +++----- .../neo/cod/std/src/fil/feather-settings.js | 179 +++++++++++++++-- pkg/arvo/neo/cod/std/src/fil/feather.css | 189 +++++++++++++++--- pkg/arvo/neo/cod/std/src/fil/reset.css | 99 --------- pkg/arvo/neo/cod/std/src/fil/s-k-y.js | 13 +- pkg/arvo/neo/cod/std/src/fil/wi-nd.js | 30 ++- pkg/arvo/neo/cod/std/src/lib/sky-server.hoon | 8 +- 8 files changed, 394 insertions(+), 208 deletions(-) delete mode 100644 pkg/arvo/neo/cod/std/src/fil/reset.css diff --git a/pkg/arvo/neo/cod/std/src/con/home-htmx.hoon b/pkg/arvo/neo/cod/std/src/con/home-htmx.hoon index 76ce12abbf..631fdfa8b8 100644 --- a/pkg/arvo/neo/cod/std/src/con/home-htmx.hoon +++ b/pkg/arvo/neo/cod/std/src/con/home-htmx.hoon @@ -6,7 +6,7 @@ |^ ;div.wf.hf.relative ;div.fc.g5.ma.mw-page.p-page - ;+ menu + :: ;+ menu ;+ apps == == diff --git a/pkg/arvo/neo/cod/std/src/con/sky-htmx.hoon b/pkg/arvo/neo/cod/std/src/con/sky-htmx.hoon index fadc74d3d5..950846cfcf 100644 --- a/pkg/arvo/neo/cod/std/src/con/sky-htmx.hoon +++ b/pkg/arvo/neo/cod/std/src/con/sky-htmx.hoon @@ -30,34 +30,6 @@ """ --{(trip key)}: {(trip val)}; """ -++ theme-style - =/ body-style - """ - body \{ - background-color: var(--b1); - background-image: var(--sky-bg-url); - background-size: var(--sky-bg-size); - background-repeat: var(--sky-bg-repeat); - } - """ - =/ settings - ^- (unit sky-settings) - =/ s (~(get of:neo kids.bowl) /settings) - ?~ s ~ - :- ~ - !< sky-settings - q.q.saga.u.s - ;style - ;+ ;/ - ?~ settings - body-style - """ - {body-style} - html \{ - {(map-to-css-tape u.settings)} - } - """ - == ++ icon-url ^~ %- trip @@ -125,32 +97,43 @@ ;script ;+ ;/ %- trip ''' - function urbitTimestamp() { - let now = new Date(); - let year = now.getFullYear(); - let month = now.getMonth() + 1; - let date = now.getDate(); - let hour = String(now.getHours()).padStart(2, '0'); - let min = String(now.getMinutes()).padStart(2, '0'); - let sec = String(now.getSeconds()).padStart(2, '0'); - return `~${year}.${month}.${date}..${hour}.${min}.${sec}`; - } - document.addEventListener('feather-css-change', (e) => { + document.addEventListener('feather-changed', (e) => { + e.detail.forEach(r => { + document.documentElement.style + .setProperty('--'+r.variable, `${r.value}${r.unit||''}`); + }) + let windows = document.querySelectorAll('wi-nd'); + windows.forEach(w => { + $(w).poke('set-feather-values', e.detail) + }) + let rules = document.querySelector('s-k-y').currentFeatherRules; + localStorage.setItem('feather-settings', JSON.stringify(rules)); + }); + let rules = JSON.parse(localStorage.getItem('feather-settings') || '[]'); + rules.forEach(r => { document.documentElement.style - .setProperty('--'+e.detail.variable, `${e.detail.value}${e.detail.unit||''}`, 'important'); - $('wi-nd').poke('feather-css-change', e.detail) + .setProperty('--'+r.variable, `${r.value}${r.unit||''}`); }) window.addEventListener('resize', () => { $('s-k-y').attr('open', null); - }) + }); window.addEventListener('message', function(event) { - if (event.data?.messagetype !== 'sky-poll-response') return; - let wid = event.data.wid; - let here = event.data.here; - let prefix = event.data.prefix; - let wind = document.querySelector(`[wid='${wid}']`); - if (wind) { - $(wind).poke('iframe-moved', {here, prefix}) + if (event.data?.messagetype == 'sky-poll-response') { + let wid = event.data.wid; + let here = event.data.here; + let prefix = event.data.prefix; + let wind = document.querySelector(`[wid='${wid}']`); + if (wind) { + $(wind).poke('iframe-moved', {here, prefix}) + } + } + else if (event.data?.messagetype == 'iframe-wants-feather') { + let rules = document.querySelector('s-k-y').currentFeatherRules; + let wid = event.data.wid; + let wind = document.querySelector(`[wid='${wid}']`); + if (wind) { + $(wind).poke('set-feather-values', rules) + } } }); ''' @@ -169,7 +152,6 @@ =hx-replace-url "/neo/sky" =our (scow %p our.bowl) ;+ in - ;+ theme-style == == -- diff --git a/pkg/arvo/neo/cod/std/src/fil/feather-settings.js b/pkg/arvo/neo/cod/std/src/fil/feather-settings.js index dbbe80f5a9..04ccba6033 100644 --- a/pkg/arvo/neo/cod/std/src/fil/feather-settings.js +++ b/pkg/arvo/neo/cod/std/src/fil/feather-settings.js @@ -15,20 +15,57 @@ class extends HTMLElement { :host { display: flex; flex-direction: column; + padding: 8px; + gap: 40px; }

Settings

-
+
${this.partSlider('Opacity', 'sky-opacity', null, 0.1, 1, 0.01)} ${this.partSlider('Outer gap size', 'sky-outer-gap', 'px', 0, 30, 1)} ${this.partSlider('Inner gap size', 'sky-inner-gap', 'px', 0, 30, 1)} +
+
${this.partSlider('Base font size', '1in', 'px', 1, 8, 0.01)} ${this.partSlider('Monospaced font scale', 'mono-scale', 'px', 0.3, 1.7, 0.01)} ${this.partSlider('Letter spacing', 'letter-spacing', 'px', -1, 3, 0.001)} - ${this.partSlider('Line height', 'line-height', null, 1, 2, 0.01)} + ${this.partSlider('Line height', 'line-height', null, 0.7, 2, 0.01)} + ${this.partDropdown('Main font', 'font', this.mainFonts)} + ${this.partDropdown('Monospaced font', 'font-mono', this.monoFonts)} +
+
+
${this.partColor('b4', 'b4')}${this.partColor('f4', 'f4')}
+
${this.partColor('b3', 'b3')}${this.partColor('f3', 'f3')}
+
${this.partColor('b2', 'b2')}${this.partColor('f2', 'f2')}
+
${this.partColor('b1', 'b1')}${this.partColor('f1', 'f1')}
+
${this.partColor('b0', 'b0')}${this.partColor('f0', 'f0')}
+
${this.partColor('b-1', 'b-1')}${this.partColor('f-1', 'f-1')}
+
${this.partColor('b-2', 'b-2')}${this.partColor('f-2', 'f-2')}
+
${this.partColor('b-3', 'b-3')}${this.partColor('f-3', 'f-3')}
+
+
+
` } + connectedCallback() { + $(this).off(); + $(this).on('reset', () => { + // + localStorage.removeItem('feather-settings'); + document.documentElement.style = ''; + this.populateFromCurrent(); + }); + this.populateFromCurrent(); + } + attributeChangedCallback(name, oldValue, newValue) { + // + } qs(sel) { return this.shadowRoot.querySelector(sel); } @@ -38,28 +75,132 @@ class extends HTMLElement { gid(id) { return this.shadowRoot.getElementById(id); } - connectedCallback() { - $(this).off(); + get mainFonts() { + return [ + "DM Sans" + ,"Lato" + ,"Georgia" + ,"Optima" + ,"DejaVu Sans" + ,"Palatino" + ,"Montserrat" + ,"Verdana" + ,"Gill Sans" + ,"Helvetica Neue" + ,"Open Sans" + ,"Roboto" + ,"Arial" + ,"Futura" + ,"PT Sans" + ] } - attributeChangedCallback(name, oldValue, newValue) { - // + get monoFonts() { + return [ + "Andale Mono" + ,"Courier New" + ,"Courier" + ,"Monaco" + ,"Spot Mono" + ] + } + get currentFeatherRules() { + // returns array of {variable: '1in', unit: 'px', value: '4'} + let rules = [ + { variable: 'b4', unit: ''}, + { variable: 'b3', unit: ''}, + { variable: 'b2', unit: ''}, + { variable: 'b1', unit: ''}, + { variable: 'b0', unit: ''}, + { variable: 'b-1', unit: ''}, + { variable: 'b-2', unit: ''}, + { variable: 'b-3', unit: ''}, + { variable: 'f4', unit: ''}, + { variable: 'f3', unit: ''}, + { variable: 'f2', unit: ''}, + { variable: 'f1', unit: ''}, + { variable: 'f0', unit: ''}, + { variable: 'f-1', unit: ''}, + { variable: 'f-2', unit: ''}, + { variable: 'f-3', unit: ''}, + { variable: 'font', unit: ''}, + { variable: 'font-mono', unit: ''}, + { variable: 'mono-scale', unit: ''}, + { variable: 'line-height', unit: ''}, + { variable: 'sky-opacity', unit: ''}, + { variable: 'letter-spacing', unit: 'px'}, + { variable: 'sky-outer-gap', unit: 'px'}, + { variable: 'sky-inner-gap', unit: 'px'}, + { variable: '1in', unit: 'px'}, + ]; + let docStyles = getComputedStyle(document.querySelector('s-k-y')); + return rules.map(r => { + let already = docStyles.getPropertyValue(`--${r.variable}`); + let value = !!r.unit?.length ? already.slice(0, 0 - r.unit.length) : already; + return {value, ...r} + }) } partSlider(label, variable, unit, min, max, step) { return ` - + ` } - setCss(variable, unit, value) { - $(this).emit('feather-css-change', {variable, unit, value}); + partDropdown(label, variable, options) { + return ` + + ` + } + partColor(label, variable) { + return ` + + ` + } + populateFromCurrent() { + this.currentFeatherRules.forEach(r => { + let el = this.gid(`in-${r.variable}`); + if (el) { + el.value = r.value; + } + }); } }); diff --git a/pkg/arvo/neo/cod/std/src/fil/feather.css b/pkg/arvo/neo/cod/std/src/fil/feather.css index eb448519c7..da77164ac5 100644 --- a/pkg/arvo/neo/cod/std/src/fil/feather.css +++ b/pkg/arvo/neo/cod/std/src/fil/feather.css @@ -1,15 +1,110 @@ -/** feather.css - * ~2024.4.6 - * - * styling resets - * and - * utility classes - * - **/ +/* feather.css */ + + +/* + * part 1: resets + * + */ + + +/* Box sizing rules */ +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; +} + +/* Prevent font size inflation */ +html { + -moz-text-size-adjust: none; + -webkit-text-size-adjust: none; + text-size-adjust: none; +} + +/* Remove default margin in favour of better control in authored CSS */ +body, h1, h2, h3, h4, p, +figure, blockquote, dl, dd { + margin-block-end: 0; +} + +/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */ +ul[role='list'], +ol[role='list'] { + list-style: none; +} + +/* Set shorter line heights on headings and interactive elements */ +h1, h2, h3, h4, +button, input, label { + line-height: 1.1; +} + +button, summary { + cursor: pointer; +} + +/* Balance text wrapping on headings */ +h1, h2, +h3, h4 { + text-wrap: balance; +} + +a { + text-decoration: none; + color: currentColor; +} + +/* Make images easier to work with */ +img, +picture { + max-width: 100%; + display: block; +} + +/* Inherit as much as possible*/ +input, button, +textarea, select { + font-family: inherit; + font-size: inherit; + border: inherit; + background: inherit; + color: inherit; + letter-spacing: inherit; + line-height: inherit; +} +textarea { + resize: none; +} + +/* Make sure textareas without a rows attribute are not tiny */ +textarea:not([rows]) { + min-height: 10em; +} + +/* Anything that has been anchored to should have extra scroll margin */ +:target { + scroll-margin-block: 5ex; +} + +b { + font-weight: bold; +} +i { + font-style: italic; +} + +/* + * part 2: variables + * + */ :root { + --sky-opacity: 0.95; + --sky-outer-gap: 8px; + --sky-inner-gap: 8px; - --font: 'Arial', sans-serif; + --font: 'Arial'; --font-mono: 'Monaco'; --mono-scale: 0.8; --letter-spacing: 0.024em; @@ -133,30 +228,37 @@ --f4: var(--dark-f4); } } + +/* + * part 1: page styling + * + */ + * { + /* do i really need this */ font-size: var(--font-size); } -/* -@media (max-width: 900px) { - :root { - --font-size: calc(1.3 * var(--font-size)); - } -} -*/ -body { - font-family: var(--font); - letter-spacing: var(--letter-spacing); - background: var(--b0); - color: var(--f0); - line-height: 1; +html { height: 100%; } -button { - border: inherit; - background: inherit; - color: inherit; +body { + margin: 0; + height: 100%; + color: var(--f0); + background: var(--b0); + font-feature-settings: normal; + font-variation-settings: normal; + min-height: 100%; + font-family: var(--font), sans-serif; + letter-spacing: var(--letter-spacing); + line-height: var(--line-height); } +/* + * part 4: utility classes + * + */ + .break { word-break: break-word; } @@ -731,3 +833,38 @@ button { user-select: none; cursor: pointer; } + +/* + * part 5: input styling + * + */ + +input[type=range] { + -webkit-appearance: none; + width: 100%; + height: 5px; + background: var(--f4); + outline: none; + border-radius: 5px; +} + +/* Style the slider thumb */ +input[type=range]::-webkit-slider-thumb { + -webkit-appearance: none; + appearance: none; + width: 8px; + height: 8px; + background: var(--f0); + cursor: pointer; + border-radius: 50%; + border: none; +} + +input[type=range]::-moz-range-thumb { + width: 8px; + height: 8px; + background: var(--f0); + cursor: pointer; + border-radius: 50%; + border: none; +} diff --git a/pkg/arvo/neo/cod/std/src/fil/reset.css b/pkg/arvo/neo/cod/std/src/fil/reset.css deleted file mode 100644 index 62f764dd4c..0000000000 --- a/pkg/arvo/neo/cod/std/src/fil/reset.css +++ /dev/null @@ -1,99 +0,0 @@ - - -/* Box sizing rules */ -*, -*::before, -*::after { - box-sizing: border-box; - margin: 0; -} - -/* Prevent font size inflation */ -html { - -moz-text-size-adjust: none; - -webkit-text-size-adjust: none; - text-size-adjust: none; -} - -/* Remove default margin in favour of better control in authored CSS */ -body, h1, h2, h3, h4, p, -figure, blockquote, dl, dd { - margin-block-end: 0; -} - -/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */ -ul[role='list'], -ol[role='list'] { - list-style: none; -} - -/* Set shorter line heights on headings and interactive elements */ -h1, h2, h3, h4, -button, input, label { - line-height: 1.1; -} - -button, summary { - cursor: pointer; -} - -/* Balance text wrapping on headings */ -h1, h2, -h3, h4 { - text-wrap: balance; -} - -a { - text-decoration: none; - color: currentColor; -} - -/* Make images easier to work with */ -img, -picture { - max-width: 100%; - display: block; -} - -/* Inherit fonts for inputs and buttons */ -input, button, -textarea, select { - font-family: inherit; - font-size: inherit; - border: inherit; - background: inherit; - color: inherit; -} -textarea { - resize: none; -} - -/* Make sure textareas without a rows attribute are not tiny */ -textarea:not([rows]) { - min-height: 10em; -} - -/* Anything that has been anchored to should have extra scroll margin */ -:target { - scroll-margin-block: 5ex; -} - - - -html { - height: 100%; -} -body { - margin: 0; - color: var(--f0); - line-height: 1.1; - font-feature-settings: normal; - font-variation-settings: normal; - min-height: 100%; -} -b { - font-weight: bold; -} -i { - font-style: italic; -} diff --git a/pkg/arvo/neo/cod/std/src/fil/s-k-y.js b/pkg/arvo/neo/cod/std/src/fil/s-k-y.js index a3c2a4cfd3..7aa684ab29 100644 --- a/pkg/arvo/neo/cod/std/src/fil/s-k-y.js +++ b/pkg/arvo/neo/cod/std/src/fil/s-k-y.js @@ -97,7 +97,7 @@ class extends HTMLElement { display: grid; grid-area: main; overflow: hidden; - padding-left: var(--sky-inner-gap); + padding-left: var(--sky-inner-gap, 8px); } #s0, #s1, #s2, #s3 { overflow: auto; @@ -196,7 +196,7 @@ class extends HTMLElement { main.open-2 #s0, main.open-3 #s0, main.open-4 #s0 { - padding-right: var(--sky-inner-gap); + padding-right: var(--sky-inner-gap, 8px); } main.open-1 #s1, main.open-2 #s1 { @@ -204,7 +204,7 @@ class extends HTMLElement { } main.open-3 #s1, main.open-4 #s1 { - padding-bottom: var(--sky-inner-gap); + padding-bottom: var(--sky-inner-gap, 8px); } main.open-1 #s2, main.open-2 #s2, @@ -212,7 +212,7 @@ class extends HTMLElement { padding-right: 0; } main.open-4 #s2 { - padding-right: var(--sky-inner-gap); + padding-right: var(--sky-inner-gap, 8px); } /* * mobile @@ -292,7 +292,7 @@ class extends HTMLElement { notifications