From edb2e178fa1902404ad20d7d4153b1e93c6f08fa Mon Sep 17 00:00:00 2001 From: familyfriendlymikey Date: Mon, 5 Sep 2022 20:30:11 -0400 Subject: [PATCH] add themes --- app/api.imba | 1 + app/client.imba | 67 ++++++++++++++----------- app/components/app-bang.imba | 8 +-- app/components/app-community-links.imba | 4 +- app/components/app-home.imba | 4 +- app/components/app-link.imba | 12 ++--- app/components/app-settings.imba | 21 ++++---- app/components/app-tips.imba | 14 +++--- app/config.imba | 22 ++++++++ app/styles.imba | 56 ++++++++++++++++++--- 10 files changed, 142 insertions(+), 67 deletions(-) diff --git a/app/api.imba b/app/api.imba index 4200bc2..a5b3d16 100644 --- a/app/api.imba +++ b/app/api.imba @@ -316,3 +316,4 @@ export default new class api catch e err "deleting some link histories", e imba.commit! + diff --git a/app/client.imba b/app/client.imba index e4fe7f0..9b3043f 100644 --- a/app/client.imba +++ b/app/client.imba @@ -6,8 +6,6 @@ p "fuzzyhome version {version}" # import sw from './sw.imba?serviceworker' # navigator..serviceWorker..register(sw).then! do |reg| reg.update! -p "hehe" - import { nanoid } from 'nanoid' import { err } from './utils' @@ -74,33 +72,44 @@ tag app def render - + css d:flex fld:column jc:start ai:center - w:80vw max-width:700px max-height:80vh - bxs:0px 0px 10px rgba(0,0,0,0.35) - box-sizing:border-box p:30px rd:10px mt:10vh - - if fatal_error - <.fatal> - css c:blue2 - """ - There was an error state.loading the database. - This could be due to a user setting - disallowing local storage, or a random error. - Consider refreshing. - Check developer console for more information. - """ - - elif $acl.active - - - elif $as.active - - - elif $ae.active - - - else - + m:0 w:100% h:100% bg:$bodybg + ff:sans-serif fw:1 + user-select:none + + <.main> + css d:flex fld:column jc:start ai:center + bg:$appbg + w:80vw max-width:700px max-height:80vh + bxs:0px 0px 10px rgba(0,0,0,0.35) + box-sizing:border-box p:30px rd:10px mt:10vh + + if fatal_error + <.fatal> + css c:$text-c + """ + There was an error state.loading the database. + This could be due to a user setting + disallowing local storage, or a random error. + Consider refreshing. + Check developer console for more information. + """ + + elif $acl.active + + + elif $as.active + + + elif $ae.active + + + else + imba.mount diff --git a/app/components/app-bang.imba b/app/components/app-bang.imba index d9464ae..4e53963 100644 --- a/app/components/app-bang.imba +++ b/app/components/app-bang.imba @@ -96,12 +96,12 @@ tag app-bang <.bang .selected=(state.bang_selection_index is -1) - [c:#FAD4AB]=(state.bang_selection_index is -1) + [c:$bang-color]=(state.bang_selection_index is -1) @pointerover=(state.bang_selection_index = -1) @click=api.handle_bang > css d:flex fld:row jc:space-between ai:center - px:16px py:11px rd:5px cursor:pointer c:blue3 + px:16px py:11px rd:5px cursor:pointer c:$text-c <.link-left> css d:flex fl:1 ofy:hidden @@ -125,8 +125,8 @@ tag app-bang <.item @pointerover=(state.bang_selection_index = index) @click=api.handle_bang - [c:#FAD4AB]=(state.bang_selection_index is index) + [c:$bang-color]=(state.bang_selection_index is index) .selected=(state.bang_selection_index is index) > item - css w:100% fs:17px c:blue3 rd:5px p:10px 10px + css w:100% fs:17px c:$text-c rd:5px p:10px 10px box-sizing:border-box cursor:pointer diff --git a/app/components/app-community-links.imba b/app/components/app-community-links.imba index a73a934..3aa2562 100644 --- a/app/components/app-community-links.imba +++ b/app/components/app-community-links.imba @@ -106,10 +106,10 @@ tag app-community-links @click=add_community_link > css d:flex fld:row jc:space-between ai:center px:16px - py:2px rd:5px cursor:pointer c:blue3 min-height:35px + py:2px rd:5px cursor:pointer c:$text-c min-height:35px if link.is_bang - css c:#FAD4AB + css c:$bang-color <.link-left> link.name css fl:1 diff --git a/app/components/app-home.imba b/app/components/app-home.imba index 7df7c1f..027fb09 100644 --- a/app/components/app-home.imba +++ b/app/components/app-home.imba @@ -33,7 +33,7 @@ tag app-home <.header> css d:flex fld:row w:100% - css .side c:purple3/90 fs:15px d:flex ja:center w:30px cursor:pointer + css .side c:$button-c fs:15px d:flex ja:center w:30px cursor:pointer css .side svg w:15px d:flex css .left jc:left css .right jc:right @@ -59,7 +59,7 @@ tag app-home if (let m = api.math_result) isnt no <.side.right@click=handle_click_copy(m)> "= {Math.round(m * 100)/100}" - css c:blue3 fs:20px ml:10px w:unset + css c:$text-c fs:20px ml:10px w:unset else <.side.right @click.if(!state.loading)=refs.settings.open> diff --git a/app/components/app-link.imba b/app/components/app-link.imba index f4f84ac..3079700 100644 --- a/app/components/app-link.imba +++ b/app/components/app-link.imba @@ -7,9 +7,9 @@ tag app-link .selected=(index is state.link_selection_index) > css d:flex fld:row jc:space-between ai:center - px:16px py:11px rd:5px cursor:pointer c:blue3 + px:16px py:11px rd:5px cursor:pointer c:$text-c if link.is_bang - css c:#FAD4AB + css c:$bang-color <.link-left> css d:flex fl:1 @@ -22,8 +22,8 @@ tag app-link if link.display_name isnt link.name and config.data.enable_effective_names <.name> - css d:flex ja:center c:gray4 ml:10px fs:14px - css .parens fs:10px c:gray4/80 + css d:flex ja:center c:$effective-name-c ml:10px fs:14px + css .parens fs:10px c:$effective-name-parens-c "(" link.name @@ -36,7 +36,7 @@ tag app-link <.link-buttons .buttons-disabled=!config.data.enable_buttons> css d:flex fld:row jc:start ai:center pr:25px gap:5px - css .link-button visibility:hidden rd:3px c:purple4 fs:15px cursor:pointer px:3px + css .link-button visibility:hidden rd:3px c:$button-c fs:15px cursor:pointer px:3px css .link-button svg w:15px <.link-button@click.prevent.stop=handle_click_edit(link)> @@ -47,7 +47,7 @@ tag app-link <.link-button @click.prevent.stop=handle_click_pin(link) - [visibility:visible c:purple3/50]=(link.is_pinned and (index isnt state.link_selection_index or not config.data.enable_buttons)) + [visibility:visible c:$button-dim-c]=(link.is_pinned and (index isnt state.link_selection_index or not config.data.enable_buttons)) > <.frequency> link.frequency diff --git a/app/components/app-settings.imba b/app/components/app-settings.imba index 149f4be..01f500d 100644 --- a/app/components/app-settings.imba +++ b/app/components/app-settings.imba @@ -29,7 +29,7 @@ tag app-settings active = no def handle_toggle_light_theme - config.data.enable_dark_theme = not config.data.enable_dark_theme + config.data.enable_light_theme = not config.data.enable_light_theme config.save! active = no @@ -84,11 +84,12 @@ tag app-settings css .settings-button, .settings-container button d:flex fld:column jc:center ai:center fl:1 - bg:none c:purple4 bd:none cursor:pointer fs:14px - bg:purple4/10 rd:5px + bg:none bd:none cursor:pointer fs:14px + rd:5px transition:background 100ms h:100% - @hover bg:purple4/20 + bg:$button-bg c:$button-c + @hover bg:$button-hover-bg if refs.community-links.active @@ -104,7 +105,7 @@ tag app-settings <.settings-container> - <.settings-button @click.if(!loading)=(refs.community-links.open! and close!)> + <.settings-button @click=(refs.community-links.open! and close!)> "VIEW COMMUNITY LINKS" <.settings-container> @@ -118,15 +119,15 @@ tag app-settings type="file" > - <.settings-button @click.if(!loading)=handle_click_export> + <.settings-button @click=handle_click_export> "EXPORT" <.settings-container> - <.settings-button @click.if(!loading)=handle_click_github> + <.settings-button @click=handle_click_github> "TUTORIAL" - <.settings-button @click.if(!loading)=handle_click_github> + <.settings-button @click=handle_click_github> "GITHUB" <.settings-container> @@ -142,8 +143,8 @@ tag app-settings <.settings-button @click=handle_click_toggle_search_on_paste> config.data.enable_search_on_paste ? "DISABLE SEARCH ON PASTE" : "ENABLE SEARCH ON PASTE" - <.settings-button @click.if(!loading)=handle_toggle_light_theme> - config.data.enable_dark_theme ? "DISABLE DARK THEME" : "ENABLE DARK THEME" + <.settings-button @click=config.cycle_theme> + "THEME: {config.data.theme.toUpperCase!}" <.settings-container> diff --git a/app/components/app-tips.imba b/app/components/app-tips.imba index e383742..46538a2 100644 --- a/app/components/app-tips.imba +++ b/app/components/app-tips.imba @@ -26,25 +26,25 @@ tag app-tips d:flex fld:row w:100% fl:1 fs:20px fs:14px jc:end ta:center - bg:#20222f c:purple4 css >>> .tip d:flex fld:column jc:start fl:1 - bdr:1px solid blue3/10 + bdr:1px solid + bc:$tip-bc min-width:0 ta:center p:10px cursor:pointer transition:background 100ms @first ta:left rdl:3px @last ta:right bd:none rdr:3px - @hover bg:purple3/3 + @hover bg:$tip-hover-c css >>> .tip.noclick, .tip.placeholder @hover bg:none cursor:auto css >>> .tip-hotkey - fs:12px c:purple3/50 + fs:12px c:$tip-hotkey-c css >>> .tip-content - pt:2px fs:14px c:purple3 + pt:2px fs:14px c:$tip-content-c def render let chunks = get_chunks! @@ -59,9 +59,9 @@ tag app-tips if chunks.length > 1 <@click=toggle> - css w:100% d:flex ja:center c:purple3 rdb:4px cursor:pointer + css w:100% d:flex ja:center c:$button-c rdb:4px cursor:pointer transition:background 100ms - @hover bg:purple3/3 + @hover bg:$tip-hover-c if show_more css rd:0 diff --git a/app/config.imba b/app/config.imba index d3d236a..1c78d21 100644 --- a/app/config.imba +++ b/app/config.imba @@ -14,6 +14,7 @@ export default new class config this.data.enable_search_on_paste ??= yes this.data.enable_dark_theme ??= yes this.data.enable_effective_names ??= yes + this.data.theme ??= "dark" this.data.default_bang ??= {} this.data.default_bang.name ??= "!google" @@ -27,6 +28,27 @@ export default new class config p "config:", this.data + def cycle_theme + if this.data.theme is "dark" + this.data.theme = "light" + elif this.data.theme is "light" + this.data.theme = "timed" + else + this.data.theme = "dark" + save! + + get theme + if this.data.theme is "light" + "light" + elif this.data.theme is "timed" + let hour = new Date!.getHours! + if hour > 18 or hour < 8 + "dark" + else + "light" + else + "dark" + def set_default_bang link unless link.is_bang return err "setting default bang", "Link is not a bang." diff --git a/app/styles.imba b/app/styles.imba index 3cdff98..acee919 100644 --- a/app/styles.imba +++ b/app/styles.imba @@ -1,15 +1,57 @@ +global css html + $effective-name-c:gray4 + $effective-name-parens-c:gray4/80 + +global css .dark + $appbg:#20222f + $bodybg:#20222f + $selected-color:blue3/5 + $bang-color:#fad4ab + $text-c:blue3 + $input-bg:purple4/10 + $input-c:blue3 + $input-caret-color:blue3 + $input-bc:purple4 + $tip-hotkey-c:purple3/50 + $tip-content-c:purple3 + $tip-hover-c:purple3/3 + $tip-bc:blue3/10 + $button-c:purple3/90 + $button-dim-c:purple3/50 + $button-bg:purple4/10 + $button-hover-bg:purple4/20 + +global css .light + $bodybg:#ececec + $appbg:#fff + $selected-color:blue5/7 + $bang-color:#ff7070 + $text-c:#3c3c3c + $input-bg:blue4/10 + $input-c:blue3 + $input-caret-color:blue3 + $input-bc:blue4 + $tip-hotkey-c:blue4/80 + $tip-content-c:blue5 + $tip-hover-c:black/3 + $tip-bc:black/10 + $button-c:blue5/90 + $button-dim-c:blue5/50 + $button-bg:blue4/10 + $button-hover-bg:blue4/20 + global css body - d:flex fld:column jc:start ai:center - m:0 w:100% h:100% bg:#20222f - ff:sans-serif fw:1 - user-select:none + m:0 bd:0 p:0 global css input w:100% h:50px px:20px fl:1 fs:20px ta:center - bd:1px solid purple4 - bg:purple4/10 c:blue3 caret-color:blue3 + bd:1px solid outline:none rd:5px + bg:$input-bg + bc:$input-bc + c:$text-c + caret-color:$input-caret-color global css a td:none @@ -21,7 +63,7 @@ global css .disabled $main-input @important bg:gray4/10 bc:gray4 global css .selected - bg:blue3/5 + bg:$selected-color global css .ellipsis of:hidden text-overflow:ellipsis white-space:nowrap