diff --git a/desk/app/gs.hoon b/desk/app/gs.hoon index 4b4be60..444f3ea 100644 --- a/desk/app/gs.hoon +++ b/desk/app/gs.hoon @@ -57,6 +57,7 @@ state-1 state-2 state-3 + state-4 == +$ state-0 $: %0 @@ -77,13 +78,17 @@ $: %3 =store =roll =objs =refs == + +$ state-4 + $: %4 + =store =roll =objs =refs =txts + == +$ front-end $: =view:mast url=path input-reset=? selected-desks=(set @t) edit-mode=$~(%.n ?) == -- -=| [state-3 front-end] +=| [state-4 front-end] =* state - %+ verb & %- agent:dbug @@ -110,14 +115,16 @@ =/ old !<(versioned-state vase) ?- -.old %0 - :_ this(state [[%3 store.old roll.old objs.old refs.old] *front-end]) + :_ this(state [[%4 store.old roll.old objs.old refs.old *^txts] *front-end]) :~ (~(arvo pass:io /bind) %e %connect `/gs %gs) == %1 - [~ this(state [[%3 store.old roll.old objs.old refs.old] *front-end])] + [~ this(state [[%4 store.old roll.old objs.old refs.old *^txts] *front-end])] %2 - [~ this(state [[%3 store.old roll.old objs.old refs.old] *front-end])] + [~ this(state [[%4 store.old roll.old objs.old refs.old *^txts] *front-end])] %3 + [~ this(state [[%4 store.old roll.old objs.old refs.old *^txts] *front-end])] + %4 [~ this(state [old *front-end])] == ++ on-poke @@ -129,11 +136,13 @@ ?- -.act %put =^ cards state (put act) - [cards this(state state)] + [cards this] :: %del + =/ hash=(unit @uvI) (~(get of store) [desk.act key.act]) + =? txts ?=(^ hash) (~(del by txts) u.hash) =^ cards state (del act) - [cards this(state state)] + [cards this] :: %lop ?> (can-write:aux src.bowl desk.act key.act) @@ -211,7 +220,7 @@ ?: =(/gs/style url) [(make-css-response:mast eyre-id style) this] =/ new-view=manx - (rig:mast routes url [bowl store objs input-reset selected-desks edit-mode]) + (rig:mast routes url [bowl store objs txts input-reset selected-desks edit-mode]) :- (plank:mast "gs" /display-updates our.bowl eyre-id new-view) this(view new-view, url url) == @@ -250,9 +259,11 @@ ~& > mar ~& >> val =^ cards state (put [%put des pax [mar val]]) - =. input-reset !input-reset + =: txts (~(put by txts) `@uvI`(shax (jam [mar val])) valt) + input-reset !input-reset + == =/ new-view=manx - (rig:mast routes url [bowl store objs input-reset selected-desks edit-mode]) + (rig:mast routes url [bowl store objs txts input-reset selected-desks edit-mode]) :- [(gust:mast /display-updates view new-view) cards] this(state state(view new-view)) :: @@ -263,7 +274,7 @@ (~(del in selected-desks) desk-name) (~(put in selected-desks) desk-name) =/ new-view=manx - (rig:mast routes url [bowl store objs input-reset selected-desks edit-mode]) + (rig:mast routes url [bowl store objs txts input-reset selected-desks edit-mode]) :- [(gust:mast /display-updates view new-view) ~] this(view new-view) :: @@ -274,21 +285,21 @@ ?~ p.v a (~(put in a) i.p.v) =/ new-view=manx - (rig:mast routes url [bowl store objs input-reset selected-desks edit-mode]) + (rig:mast routes url [bowl store objs txts input-reset selected-desks edit-mode]) :- [(gust:mast /display-updates view new-view) ~] this(view new-view) :: [%click %hide-all-desks ~] =. selected-desks ~ =/ new-view=manx - (rig:mast routes url [bowl store objs input-reset selected-desks edit-mode]) + (rig:mast routes url [bowl store objs txts input-reset selected-desks edit-mode]) :- [(gust:mast /display-updates view new-view) ~] this(view new-view) :: [%click %toggle-edit-mode ~] =. edit-mode !edit-mode =/ new-view=manx - (rig:mast routes url [bowl store objs input-reset selected-desks edit-mode]) + (rig:mast routes url [bowl store objs txts input-reset selected-desks edit-mode]) :- [(gust:mast /display-updates view new-view) ~] this(view new-view) :: @@ -296,9 +307,11 @@ =/ keyt (~(got by data.client-poke) '/target/id') =/ keyp=path (stab keyt) ?~ keyp ~&('missing delete path from ui' [~ this]) + =/ hash=(unit @uvI) (~(get of store) keyp) =^ cards state (del [%del keyp]) + =? txts ?=(^ hash) (~(del by txts) u.hash) =/ new-view=manx - (rig:mast routes url [bowl store objs input-reset selected-desks edit-mode]) + (rig:mast routes url [bowl store objs txts input-reset selected-desks edit-mode]) :- [(gust:mast /display-updates view new-view) cards] this(state state(view new-view)) == diff --git a/desk/app/gs/index.hoon b/desk/app/gs/index.hoon index 5733da8..e35919a 100644 --- a/desk/app/gs/index.hoon +++ b/desk/app/gs/index.hoon @@ -1,5 +1,5 @@ /- *gs -|= [bol=bowl:gall =store =objs input-reset=? selected-desks=(set @t) edit-mode=?] +|= [bol=bowl:gall =store =objs =txts input-reset=? selected-desks=(set @t) edit-mode=?] |^ ^- manx :: ;html @@ -9,18 +9,21 @@ ;link(href "/gs/style", rel "stylesheet"); == ;body - ;h1(class "title"): Global Store - ;+ gs-form - ;div - ;button(event "/click/select-all-desks"): Select All - ;button(event "/click/hide-all-desks"): Hide All - ;button - =class ?:(edit-mode "edit-button-on" "") - =event "/click/toggle-edit-mode" - ;+ ;/ "Edit" + ;main(class get-theme) + ;h1(class "title"): Global Store + ;+ gs-form + ;div + =class "desk-buttons" + ;button(event "/click/select-all-desks"): Select All + ;button(event "/click/hide-all-desks"): Hide All + ;button + =class ?:(edit-mode "edit-button-on" "") + =event "/click/toggle-edit-mode" + ;+ ;/ "Edit" + == == + ;+ all-desks == - ;+ all-desks == == :: @@ -75,6 +78,7 @@ ;div(class "kv-table") ;* %+ turn kvs |= [key=key hax=@uvI] + =/ tval=(unit @t) (~(get by txts) hax) =/ val=cage (~(got by objs) hax) =/ name=tape ?~(key "" ?~(t.key "" <(path t.key)>)) ;div @@ -92,11 +96,14 @@ ;+ ;/ "✖" == == - ;div - ;div: {} - ;div: {} - ;div: {} - == + ;div(class "kv-mark"): {} + ;+ ?~ tval + ;div + =class "kv-value" + ;div: {} + ;div: {} + == + ;div(class "kv-value"): {(trip u.tval)} == == :: @@ -132,4 +139,13 @@ [i.acc $(acc t.acc)] $(sto t.sto, acc acc) :: +++ get-theme + ^- tape + =/ hash=(unit @uvI) (~(get of store) [%gs %theme ~]) + ?~ hash "" + =/ val=cage (~(got by objs) u.hash) + ?: ?=(^ q.q.val) + !<(tape q.val) + (trip !<(@t q.val)) +:: -- diff --git a/desk/app/gs/style.hoon b/desk/app/gs/style.hoon index 24d4398..da7d945 100644 --- a/desk/app/gs/style.hoon +++ b/desk/app/gs/style.hoon @@ -1,17 +1,36 @@ ^~ ''' :root { - --light-color-one: #F9FAF9; - --light-color-two: lightgray; - --dark-color-one: #2A2C33; - --dark-color-two: gray; + --color-one: #F9FAF9; + --color-two: lightgray; + --color-three: gray; + --color-four: #2A2C33; +} +.light { + --color-one: #F9FAF9; + --color-two: lightgray; + --color-three: gray; + --color-four: #2A2C33; +} +.dark { + --color-one: #253237; + --color-two: #5C6B73; + --color-three: white; + --color-four: white; } body { font-family: 'Metamorphous', serif; - color: var(--dark-color-one); - background-color: var(--light-color-one); + height: 100vh; margin: 0; - padding: 3rem; + display: flex; + flex-direction: column; +} +main { + flex-grow: 1; + color: var(--color-four); + background-color: var(--color-one); + padding-top: 3rem; + padding-inline: 3rem; display: flex; flex-direction: column; justify-content: flex-start; @@ -22,8 +41,8 @@ button { padding-inline: 1rem; margin: 0.2rem; border-radius: 0.5rem; - color: var(--light-color-one); - background-color: var(--dark-color-two); + color: var(--color-one); + background-color: var(--color-three); border: none; cursor: pointer; transition: transform 0.05s ease; @@ -46,17 +65,20 @@ label { border-radius: 1rem; } .title { - border-bottom: 0.2rem solid var(--dark-color-one); + border-bottom: 0.2rem solid var(--color-four); } .gs-form { padding: 0.5rem; margin: 1rem; - background-color: var(--light-color-two); + background-color: var(--color-two); box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 6px; display: flex; flex-direction: row; flex-wrap: wrap; } +.desk-buttons { + margin-bottom: 0.7rem; +} .desks-container { width: 100%; display: flex; @@ -69,7 +91,7 @@ label { width: 20rem; margin: 1rem; border-radius: 1rem; - background-color: var(--light-color-two); + background-color: var(--color-two); box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 6px; } .desk-selector { @@ -78,8 +100,8 @@ label { padding-block: 1rem; padding-inline: 2rem; border-radius: 1rem; - color: var(--light-color-one); - background-color: var(--dark-color-two); + color: var(--color-one); + background-color: var(--color-three); cursor: pointer; transition: transform 0.1s ease; } @@ -94,7 +116,7 @@ label { max-width: 15rem; margin: 1.5rem; padding: 0.9rem; - border: 1px solid var(--dark-color-two); + border: 1px solid var(--color-three); border-radius: 0.7rem; display: flex; flex-direction: column; @@ -108,7 +130,15 @@ label { } .kv-name { font-size: 1.2rem; - margin-bottom: 0.5rem; +} +.kv-mark { + font-size: 0.9rem; + margin-top: 0.4rem; + margin-bottom: 0.8rem; +} +.kv-value { + font-family: monospace; + font-size: 1rem; } @media only screen and (max-width: 600px) { .gs-form { diff --git a/desk/sur/gs.hoon b/desk/sur/gs.hoon index 2e2e0d6..2dba5d2 100644 --- a/desk/sur/gs.hoon +++ b/desk/sur/gs.hoon @@ -21,6 +21,7 @@ +$ store (axal @uvI) +$ objs (map @uvI value) +$ refs (jug @uvI path) ++$ txts (map @uvI @t) :: +$ action $% [%put =desk =key =value]