madmaniak
/
fuzzyhome-site
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

add themes

main
familyfriendlymikey 2 years ago
parent
3ac14d7dca
commit
edb2e178fa
10 changed files with 142 additions and 67 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      app/api.imba
  2. 67
      app/client.imba
  3. 8
      app/components/app-bang.imba
  4. 4
      app/components/app-community-links.imba
  5. 4
      app/components/app-home.imba
  6. 12
      app/components/app-link.imba
  7. 21
      app/components/app-settings.imba
  8. 14
      app/components/app-tips.imba
  9. 22
      app/config.imba
  10. 56
      app/styles.imba

1
app/api.imba
View File

@ -316,3 +316,4 @@ export default new class api
catch e
err "deleting some link histories", e
imba.commit!

67
app/client.imba
View File

@ -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
<self.disabled=state.loading>
<self
.light=(config.theme is "light")
.dark=(config.theme is "dark")
.disabled=state.loading
>
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
<app-community-links$acl>
elif $as.active
<app-settings$as>
elif $ae.active
<app-edit$ae>
else
<app-home$ah>
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
<app-community-links$acl>
elif $as.active
<app-settings$as>
elif $ae.active
<app-edit$ae>
else
<app-home$ah>
imba.mount <app>

8
app/components/app-bang.imba
View File

@ -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

4
app/components/app-community-links.imba
View File

@ -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

4
app/components/app-home.imba
View File

@ -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>

12
app/components/app-link.imba
View File

@ -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
<span.parens> "("
<span> 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))
> <svg src='../assets/star.svg'>
<.frequency> link.frequency

21
app/components/app-settings.imba
View File

@ -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
<app-community-links>
@ -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>

14
app/components/app-tips.imba
View File

@ -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

22
app/config.imba
View File

@ -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."

56
app/styles.imba
View File

@ -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

Write Preview
Loading…
Cancel
Save