Skip to content

Commit ae9e7d0

Browse files
tiyetiye
committed
refactor sidebar design
1 parent 201b68f commit ae9e7d0

File tree

8 files changed

+866
-767
lines changed

8 files changed

+866
-767
lines changed

‎assets/main.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ pre {
4444
}
4545

4646
.doc-entry:hover {
47-
background-color: hsla(190, 10%, 80%, 0.1);
47+
background-color: hsla(190, 10%, 70%, 0.1);
4848
}
4949

5050
::-webkit-input-placeholder { /* Chrome/Opera/Safari */

‎calcit.cirru‎

Lines changed: 618 additions & 534 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎compact.cirru‎

Lines changed: 90 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -26,51 +26,58 @@
2626
states $ :states store
2727
cursor $ or (:cursor states) ([])
2828
state $ or (:data states)
29-
{} $ :selected ([])
29+
{}
30+
:selected $ []
31+
:history $ []
32+
selected $ :selected state
33+
history $ :history state
3034
div
3135
{} (:class-name "\"calcit-tile")
3236
:style $ merge ui/fullscreen ui/global ui/row
33-
list->
37+
div
3438
{} $ :style
35-
merge ui/row $ {}
36-
:background-color $ hsl 0 0 94 0.8
37-
apply-args
39+
{} $ :background-color :white
40+
div ({}) (<> "\"Search entry")
41+
div ({}) (<> "\"Pages")
42+
list->
43+
{} $ :style ({})
44+
if
45+
> (count selected) 0
46+
->
47+
range $ dec (count selected)
48+
map $ fn (idx)
49+
let
50+
sub-path $ slice selected 0 (inc idx)
51+
target $ find-target docs sub-path
52+
[] idx $ div
53+
{}
54+
:style $ {} (:cursor :pointer)
55+
:background-color $ hsl 180 90 94
56+
:on-click $ fn (e d!)
57+
d! cursor $ assoc state :selected sub-path
58+
<> $ str "\"< "
59+
or (:title target) "\"NOT FOUND"
3860
[]
39-
, docs ([]) (:selected state)
40-
fn (acc entries base-path selected)
41-
let
42-
base-path' base-path $ ; "\"problem in compiling tail recursions"
43-
next-acc $ conj acc
44-
[] (count acc)
45-
comp-sidebar
46-
>> states $ count acc
47-
first selected
48-
, entries $ fn (p d!)
49-
d! cursor $ assoc state :selected (conj base-path' p)
50-
if (empty? selected) next-acc $ let
51-
s0 $ first selected
52-
target $ find entries
53-
fn (entry)
54-
= s0 $ :key entry
55-
if
56-
or (nil? target)
57-
empty? $ get target :children
58-
, next-acc $ recur next-acc (get target :children) (conj base-path s0) (rest selected)
61+
let
62+
parent-path $ or (butlast selected) ([])
63+
entries $ find-entries docs parent-path
64+
comp-page-entries (last selected) parent-path entries $ fn (xs d!)
65+
d! cursor $ assoc state :selected xs
66+
div ({}) (<> "\"Histories")
5967
let
6068
target $ find-target docs (:selected state)
61-
if (some? target)
62-
div
63-
{} $ :style
64-
merge ui/expand $ {} (:padding "\"8px 16px")
65-
:background-color $ hsl 0 0 100 0.6
66-
div $ {}
67-
:innerHTML $ .!render md (:content target)
68-
div
69-
{} $ :style
70-
merge ui/expand $ {} (:padding "\"20px 16px")
71-
do $ <> "\"Empty"
72-
{} (:font-family ui/font-fancy) (:font-style :italic)
73-
:color $ hsl 0 0 80
69+
div
70+
{} $ :style ui/expand
71+
let
72+
children $ or (:children target) ([])
73+
if (empty? children) nil $ div
74+
{} $ :style
75+
{} $ :padding "\"16px"
76+
div ({})
77+
<> "\"Children pages" $ {} (:font-family ui/font-fancy)
78+
comp-page-entries nil (:selected state) children $ fn (xs d!)
79+
d! cursor $ assoc state :selected xs
80+
comp-doc-page target
7481
when dev? $ comp-reel (>> states :reel) reel ({})
7582
|md $ quote
7683
def md $ new Remarkable
@@ -83,42 +90,6 @@
8390
:border-bottom $ str "\"1px solid " (hsl 0 0 92)
8491
:border-left $ str "\"0px solid " (hsl 200 90 60)
8592
:background-color $ hsl 0 0 100 0.6
86-
|comp-sidebar $ quote
87-
defcomp comp-sidebar (states selected entries on-select)
88-
let
89-
cursor $ :cursor states
90-
state $ or (:data states)
91-
{} $ :query "\""
92-
div
93-
{} $ :style
94-
{} (:min-width 200) (:max-width 240)
95-
:border-right $ str "\"1px solid " (hsl 0 0 94)
96-
input $ {}
97-
:style $ merge ui/input
98-
{} (:width "\"100%") (:border :none) (:line-height 32) (:height 32)
99-
:border-bottom $ str "\"1px solid " (hsl 0 0 90)
100-
:placeholder "\"Search..."
101-
:value $ :query state
102-
:on-input $ fn (e d!)
103-
d! cursor $ assoc state :query (:value e)
104-
list-> ({})
105-
-> entries
106-
filter $ fn (entry)
107-
if
108-
blank? $ :query state
109-
, true $ -> (:title entry) .!toLowerCase
110-
.includes? $ :query state
111-
map-indexed $ fn (idx entry)
112-
[] idx $ div
113-
{} (:class-name "\"doc-entry")
114-
:style $ merge style-entry
115-
if
116-
= selected $ :key entry
117-
{} (:background-color :white)
118-
:border-left $ str "\"10px solid " (hsl 200 90 70)
119-
:on-click $ fn (e d!)
120-
on-select (:key entry) d!
121-
<> $ :title entry
12293
|find-target $ quote
12394
defn find-target (entries path)
12495
if (empty? path) nil $ let
@@ -130,7 +101,51 @@
130101
if
131102
= 1 $ count path
132103
, target $ recur (:children target) (rest path)
133-
w-log nil
104+
, nil
105+
|comp-doc-page $ quote
106+
defcomp comp-doc-page (target)
107+
if (some? target)
108+
div
109+
{} $ :style
110+
merge ui/expand $ {} (:padding "\"8px 16px")
111+
:background-color $ hsl 0 0 100 0.6
112+
div $ {}
113+
:innerHTML $ .!render md (:content target)
114+
div
115+
{} $ :style
116+
merge ui/expand $ {} (:padding "\"20px 16px")
117+
do $ <> "\"Empty"
118+
{} (:font-family ui/font-fancy) (:font-style :italic)
119+
:color $ hsl 0 0 80
120+
|comp-page-entries $ quote
121+
defcomp comp-page-entries (selected parent-path entries on-select)
122+
div
123+
{} $ :style
124+
{} (:min-width 200) (:max-width 240)
125+
:border-right $ str "\"1px solid " (hsl 0 0 94)
126+
list-> ({})
127+
-> entries $ map-indexed
128+
fn (idx entry)
129+
[] idx $ let
130+
selected? $ = selected (:key entry)
131+
div
132+
{} $ :on-click
133+
fn (e d!)
134+
on-select
135+
conj parent-path $ :key entry
136+
, d!
137+
div
138+
{} (:class-name "\"doc-entry")
139+
:style $ merge style-entry
140+
if selected? $ {} (:background-color :white)
141+
:border-left $ str "\"10px solid " (hsl 200 90 70)
142+
<> $ :title entry
143+
|find-entries $ quote
144+
defn find-entries (entries path)
145+
if (empty? path) entries $ if-let
146+
target $ find-target entries path
147+
:children target
148+
do (js/console.warn "\"no entries found for" entries path) ([])
134149
|app.schema $ {}
135150
:ns $ quote (ns app.schema)
136151
:defs $ {}

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
<body>
1515
<div class="app" ></div>
1616

17-
<script type="module" src="./main.js" ></script>
17+
<script type="module" src="./main.mjs" ></script>
1818

1919
</body>
2020

‎main.js‎

Lines changed: 0 additions & 10 deletions
This file was deleted.

‎main.mjs‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
2+
import { main_$x_ } from "./js-out/app.main.mjs"
3+
4+
main_$x_()
5+
6+
if (import.meta.hot) {
7+
import.meta.hot.accept('./js-out/app.main.mjs', (main) => {
8+
main.reload_$x_()
9+
})
10+
}

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
{
22
"dependencies": {
3-
"@calcit/procs": "^0.5.21"
3+
"@calcit/procs": "^0.5.28"
44
},
55
"devDependencies": {
66
"bottom-tip": "^0.1.3",
77
"cirru-color": "^0.2.1-a1",
88
"github-markdown-css": "^5.1.0",
9-
"highlight.js": "^11.4.0",
9+
"highlight.js": "^11.5.0",
1010
"remarkable": "^2.0.1",
1111
"vite": "^2.8.6"
1212
},

0 commit comments

Comments
 (0)