260 lines
20 KiB
Plaintext
260 lines
20 KiB
Plaintext
;; Layout and initial geometry live here; native gestures live in the companion.
|
|
(let* ((styles
|
|
'((desktop-root (:background-color "#0B1020" :color "#CFD8EA")
|
|
(:background-color "#F3F0E8" :color "#263347"))
|
|
(desktop-brand (:color "#BBA9FF") (:color "#674795"))
|
|
(desktop-heading (:color "#F1F5FF") (:color "#18263B"))
|
|
(desktop-muted (:color "#8F9FBD") (:color "#53637A"))
|
|
(desktop-quiet (:color "#657899") (:color "#596A84"))
|
|
(desktop-control (:background-color "#25324B" :color "#D7E3F8"
|
|
:hover-style (:background-color "#354662"))
|
|
(:background-color "#CBD6E4" :color "#253247"
|
|
:hover-style (:background-color "#B9C9DE")))
|
|
(desktop-chrome (:background-color "#25324B" :color "#C1CBE0")
|
|
(:background-color "#D5DDE8" :color "#344359"))
|
|
(desktop-workspace (:background-color "#111A2C")
|
|
(:background-color "#E3E8EF"))
|
|
(desktop-grid-label (:color "#3F5273") (:color "#566B86"))
|
|
(desktop-grid-dots (:color "#334866") (:color "#A6B3C3"))
|
|
(desktop-grid-hint (:color "#5A6D8E") (:color "#566A83"))
|
|
(desktop-studio (:background-color "#26223B" :color "#D6CDEF")
|
|
(:background-color "#E9E3F2" :color "#4F3F67"))
|
|
(desktop-studio-heading (:color "#F5F0FF") (:color "#37284F"))
|
|
(desktop-studio-caption (:color "#A999C8") (:color "#67577E"))
|
|
(desktop-studio-text (:color "#B8A9D0") (:color "#5F4D78"))
|
|
(desktop-studio-muted (:color "#85799F") (:color "#6D587F"))
|
|
(desktop-art-form (:background-color "#7561AC" :color "#EAE1FF")
|
|
(:background-color "#C9BCE3" :color "#453259"))
|
|
(desktop-art-space (:background-color "#BBA9FF" :color "#302449")
|
|
(:background-color "#DED3F6" :color "#51356C"))
|
|
(desktop-art-play (:background-color "#D8EAAB" :color "#303D22")
|
|
(:background-color "#DBE8C3" :color "#41512B"))
|
|
(desktop-notes (:background-color "#EEE3CB" :color "#514430")
|
|
(:background-color "#FFF4D8" :color "#5B482B"))
|
|
(desktop-notes-caption (:color "#8C744E") (:color "#7A623E"))
|
|
(desktop-notes-muted (:color "#887651") (:color "#836D49"))
|
|
(desktop-notes-rule (:color "#A18B61") (:color "#A38E65"))
|
|
(desktop-notes-footer (:color "#746345") (:color "#705935"))
|
|
(desktop-signal (:background-color "#17343E" :color "#BFE5E9")
|
|
(:background-color "#DBEEF0" :color "#315B65"))
|
|
(desktop-signal-heading (:color "#E4FBF9") (:color "#184B57"))
|
|
(desktop-signal-caption (:color "#7BAEB9") (:color "#436971"))
|
|
(desktop-signal-muted (:color "#699CA9") (:color "#496F77"))
|
|
(desktop-signal-accent (:color "#8DE1E4") (:color "#2E7280"))
|
|
(desktop-wave-muted (:background-color "#518F9D") (:background-color "#9EC9CF"))
|
|
(desktop-wave-cyan (:background-color "#8DE1E4") (:background-color "#5EADB5"))
|
|
(desktop-wave-violet (:background-color "#BBA9FF") (:background-color "#927AC9"))
|
|
(desktop-terminal (:background-color "#101F22" :color "#B6D7CC")
|
|
(:background-color "#E0EEE4" :color "#355E4C"))
|
|
(desktop-terminal-accent (:color "#A7E8BB") (:color "#256544"))
|
|
(desktop-terminal-muted (:color "#608C7F") (:color "#496D5B"))
|
|
(desktop-palette (:background-color "#39283D" :color "#EBCBDE")
|
|
(:background-color "#F0E1EB" :color "#65485E"))
|
|
(desktop-palette-caption (:color "#AF8DA9") (:color "#7B5670"))
|
|
(desktop-palette-accent (:color "#F3A8C9") (:color "#925277"))
|
|
(desktop-swatch-violet (:background-color "#BBA9FF") (:background-color "#9578CF"))
|
|
(desktop-swatch-amber (:background-color "#F6C879") (:background-color "#DEB251"))
|
|
(desktop-swatch-cyan (:background-color "#8DE1E4") (:background-color "#58A7AF"))
|
|
(desktop-swatch-mint (:background-color "#A7E8BB") (:background-color "#72AB83"))
|
|
(desktop-swatch-rose (:background-color "#F3A8C9") (:background-color "#CE87AA"))))
|
|
(studio (desktop-demo-window-create
|
|
:id "desk-studio" :label "STUDIO" :accent "#BBA9FF" :ink "#241B40"
|
|
:light-accent "#6D4AA2" :light-ink "#FFFFFF"
|
|
:left '(% 5) :top '(lh 1)))
|
|
(notes (desktop-demo-window-create
|
|
:id "desk-notes" :label "NOTES" :accent "#F6C879" :ink "#3B2917"
|
|
:light-accent "#8C6421" :light-ink "#FFFFFF"
|
|
:left '(% 45) :top '(% 4)))
|
|
(signal (desktop-demo-window-create
|
|
:id "desk-signal" :label "SIGNAL" :accent "#8DE1E4" :ink "#15383D"
|
|
:light-accent "#246675" :light-ink "#FFFFFF"
|
|
:left '(% 57) :top '(% 32)))
|
|
(terminal (desktop-demo-window-create
|
|
:id "desk-terminal" :label "TERMINAL" :accent "#A7E8BB" :ink "#1B3826"
|
|
:light-accent "#2F674B" :light-ink "#FFFFFF"
|
|
:left '(% 8) :top '(% 46)))
|
|
(palette (desktop-demo-window-create
|
|
:id "desk-palette" :label "PALETTE" :accent "#F3A8C9" :ink "#402438"
|
|
:light-accent "#875270" :light-ink "#FFFFFF"
|
|
:left '(% 43) :top '(% 65)))
|
|
(panes (list studio notes signal terminal palette))
|
|
(demo (desktop-demo-create :windows panes :styles styles
|
|
:order (mapcar #'desktop-demo-window-id panes)
|
|
:active "desk-palette")))
|
|
`(column :id "desktop-root" :class desktop-root
|
|
:width (vw 100) :height (vh 100) :overflow hidden
|
|
,@(desktop-demo-style demo 'desktop-root)
|
|
(box :height (lh 3) :padding-inline (ch 1)
|
|
(row :height (lh 1)
|
|
(box :class desktop-brand ,@(desktop-demo-style demo 'desktop-brand)
|
|
:font-weight bold "P A R A L L A X")
|
|
(box :padding-left (ch 2) :class desktop-quiet
|
|
,@(desktop-demo-style demo 'desktop-quiet) "DESKTOP / 05"))
|
|
(box :class desktop-heading ,@(desktop-demo-style demo 'desktop-heading)
|
|
"A little space. A lot of possibilities.")
|
|
(box :class desktop-muted ,@(desktop-demo-style demo 'desktop-muted)
|
|
"Click to focus. Drag a title bar to move."))
|
|
(flex :height (lh 1) :gap ((lh 0) (ch 1)) :padding-inline (ch 1)
|
|
(box :padding-inline (ch 1) :flex-shrink 0 :class desktop-control
|
|
,@(desktop-demo-style demo 'desktop-control) :pointer hand
|
|
:help-echo "Restore the five original positions and stacking order."
|
|
:keymap ,(desktop-demo-control demo 'reset) "RESET")
|
|
(box :padding-inline (ch 1) :flex-shrink 0 :class desktop-control
|
|
,@(desktop-demo-style demo 'desktop-control) :pointer hand
|
|
:help-echo "Bring the backmost window to the front."
|
|
:keymap ,(desktop-demo-control demo 'next) "CYCLE")
|
|
(box :id "desktop-theme" :class desktop-control
|
|
,@(desktop-demo-style demo 'desktop-control)
|
|
:width (ch 7) :flex-shrink 0 :text-align center :pointer hand
|
|
:help-echo "Switch the whole desktop between light and dark palettes."
|
|
:keymap ,(desktop-demo-control demo 'theme) "LIGHT")
|
|
(box :class desktop-quiet :min-width (px 0) :overflow hidden :wrap-mode none
|
|
,@(desktop-demo-style demo 'desktop-quiet)
|
|
"FIVE IDEAS / ONE SHARED SPACE"))
|
|
|
|
(box :id "desktop-canvas" :height (calc (- (vh 100) (lh 7)))
|
|
:overflow hidden :class desktop-workspace
|
|
,@(desktop-demo-style demo 'desktop-workspace)
|
|
(box :position absolute :left (ch 1) :top (lh 0)
|
|
:class desktop-grid-label ,@(desktop-demo-style demo 'desktop-grid-label)
|
|
"WORKSPACE 01 + + + + +")
|
|
(box :position absolute :left (% 68) :top (% 78)
|
|
:width (% 30) :class desktop-grid-dots ,@(desktop-demo-style demo 'desktop-grid-dots)
|
|
"+ . + . +\n. + . + .\n+ . + . +\n. + . + .")
|
|
(box :position absolute :left (ch 2) :top (% 93)
|
|
:class desktop-grid-hint ,@(desktop-demo-style demo 'desktop-grid-hint)
|
|
"MOVE THINGS AROUND. MAKE IT YOURS.")
|
|
|
|
(box :id "desk-studio" :position absolute :left ,(desktop-demo-window-left studio)
|
|
:top ,(desktop-demo-window-top studio) :width (min (ch 44) (% 55))
|
|
:height (lh 13) :z-index 1 :overflow hidden
|
|
:class desktop-studio ,@(desktop-demo-style demo 'desktop-studio) :pointer arrow
|
|
:help-echo "Studio. Click any exposed area to bring this whole window forward."
|
|
:keymap ,(desktop-demo-keymap demo "desk-studio")
|
|
(box :id "desk-studio-title" :height (lh 1) :padding-inline (ch 1)
|
|
:class desktop-chrome ,@(desktop-demo-style demo 'desktop-chrome) :font-weight bold
|
|
:pointer hand :keymap ,(desktop-demo-keymap demo "desk-studio" t)
|
|
:help-echo "Drag Studio. Alt+arrows moves it from the keyboard."
|
|
"STUDIO / 01 ::")
|
|
(box :padding ((lh 1) (ch 2))
|
|
(box :font-weight bold :class desktop-studio-heading ,@(desktop-demo-style demo 'desktop-studio-heading) "Make space for the unexpected.")
|
|
(box :padding-top (lh 1) :class desktop-studio-caption ,@(desktop-demo-style demo 'desktop-studio-caption) "EXPERIMENT 024 / SOFT STRUCTURES")
|
|
(box :height (lh 5) :padding-top (lh 1)
|
|
(box :position absolute :left (ch 0) :top (lh 1)
|
|
:width (ch 13) :height (lh 3) :class desktop-art-form ,@(desktop-demo-style demo 'desktop-art-form) :text-align center "\nFORM / 01")
|
|
(box :position absolute :left (ch 9) :top (lh 0)
|
|
:width (ch 13) :height (lh 3) :z-index 1
|
|
:class desktop-art-space ,@(desktop-demo-style demo 'desktop-art-space)
|
|
:text-align center "\nSPACE / 02")
|
|
(box :position absolute :left (ch 18) :top (lh 2)
|
|
:width (ch 12) :height (lh 3) :z-index 2
|
|
:class desktop-art-play ,@(desktop-demo-style demo 'desktop-art-play)
|
|
:text-align center "\nPLAY / 03"))
|
|
(box :class desktop-studio-text ,@(desktop-demo-style demo 'desktop-studio-text) "Fragments become a composition.")
|
|
(box :padding-top (lh 1) :class desktop-studio-muted ,@(desktop-demo-style demo 'desktop-studio-muted) "COLLECTION / UNFINISHED POSSIBILITIES")))
|
|
|
|
(box :id "desk-notes" :position absolute :left ,(desktop-demo-window-left notes)
|
|
:top ,(desktop-demo-window-top notes) :width (min (ch 34) (% 43))
|
|
:height (lh 11) :z-index 2 :overflow hidden
|
|
:class desktop-notes ,@(desktop-demo-style demo 'desktop-notes) :pointer arrow
|
|
:help-echo "Notes. The content remains here even when another window covers it."
|
|
:keymap ,(desktop-demo-keymap demo "desk-notes")
|
|
(box :id "desk-notes-title" :height (lh 1) :padding-inline (ch 1)
|
|
:class desktop-chrome ,@(desktop-demo-style demo 'desktop-chrome) :font-weight bold
|
|
:pointer hand :keymap ,(desktop-demo-keymap demo "desk-notes" t)
|
|
:help-echo "Drag Notes. Alt+arrows moves it from the keyboard."
|
|
"NOTES / 02 ::")
|
|
(box :padding ((lh 1) (ch 1))
|
|
(box :font-weight bold "A quieter kind of focus.")
|
|
(box :padding-top (lh 1) :class desktop-notes-caption ,@(desktop-demo-style demo 'desktop-notes-caption) "TODAY / THINGS WORTH MAKING")
|
|
(box :padding-top (lh 1)
|
|
"[x] Collect the small ideas\n[ ] Give the good ones room\n[ ] Leave something unfinished")
|
|
(box :padding-top (lh 1) :class desktop-notes-muted ,@(desktop-demo-style demo 'desktop-notes-muted) "Less noise. More intention.")
|
|
(box :class desktop-notes-rule ,@(desktop-demo-style demo 'desktop-notes-rule) "------------------------------")
|
|
(box :class desktop-notes-footer ,@(desktop-demo-style demo 'desktop-notes-footer) "03 NOTES / SAVED IN THE MOMENT")))
|
|
|
|
(box :id "desk-signal" :position absolute :left ,(desktop-demo-window-left signal)
|
|
:top ,(desktop-demo-window-top signal) :width (min (ch 32) (% 39))
|
|
:height (lh 10) :z-index 3 :overflow hidden
|
|
:class desktop-signal ,@(desktop-demo-style demo 'desktop-signal) :pointer arrow
|
|
:help-echo "Signal. Raise the entire player, including its overlapping waveform."
|
|
:keymap ,(desktop-demo-keymap demo "desk-signal")
|
|
(box :id "desk-signal-title" :height (lh 1) :padding-inline (ch 1)
|
|
:class desktop-chrome ,@(desktop-demo-style demo 'desktop-chrome) :font-weight bold
|
|
:pointer hand :keymap ,(desktop-demo-keymap demo "desk-signal" t)
|
|
:help-echo "Drag Signal. Alt+arrows moves it from the keyboard."
|
|
"SIGNAL / 03 ::")
|
|
(box :padding ((lh 1) (ch 2))
|
|
(box :font-weight bold :class desktop-signal-heading ,@(desktop-demo-style demo 'desktop-signal-heading) "AFTER HOURS")
|
|
(box :class desktop-signal-caption ,@(desktop-demo-style demo 'desktop-signal-caption) "A soundtrack for the in-between.")
|
|
(flex :height (lh 3) :gap ((lh 0) (ch 1)) :padding-top (lh 1)
|
|
(box :width (ch 2) :height (lh 1) :class desktop-wave-muted ,@(desktop-demo-style demo 'desktop-wave-muted))
|
|
(box :width (ch 2) :height (lh 2) :class desktop-wave-cyan ,@(desktop-demo-style demo 'desktop-wave-cyan))
|
|
(box :width (ch 2) :height (lh 1) :class desktop-wave-muted ,@(desktop-demo-style demo 'desktop-wave-muted))
|
|
(box :width (ch 2) :height (lh 2) :class desktop-wave-violet ,@(desktop-demo-style demo 'desktop-wave-violet))
|
|
(box :width (ch 2) :height (lh 1) :class desktop-wave-cyan ,@(desktop-demo-style demo 'desktop-wave-cyan))
|
|
(box :width (ch 2) :height (lh 2) :class desktop-wave-violet ,@(desktop-demo-style demo 'desktop-wave-violet))
|
|
(box :width (ch 2) :height (lh 1) :class desktop-wave-muted ,@(desktop-demo-style demo 'desktop-wave-muted)))
|
|
(box :class desktop-signal-accent ,@(desktop-demo-style demo 'desktop-signal-accent) "========------------ 03:42")
|
|
(box :padding-top (lh 1) :class desktop-signal-muted ,@(desktop-demo-style demo 'desktop-signal-muted) "SIDE B / SLOWER ORBITS")))
|
|
|
|
(box :id "desk-terminal" :position absolute :left ,(desktop-demo-window-left terminal)
|
|
:top ,(desktop-demo-window-top terminal) :width (min (ch 48) (% 60))
|
|
:height (lh 11) :z-index 4 :overflow hidden
|
|
:class desktop-terminal ,@(desktop-demo-style demo 'desktop-terminal) :pointer arrow
|
|
:help-echo "Terminal. This sample transcript is part of the movable text window."
|
|
:keymap ,(desktop-demo-keymap demo "desk-terminal")
|
|
(box :id "desk-terminal-title" :height (lh 1) :padding-inline (ch 1)
|
|
:class desktop-chrome ,@(desktop-demo-style demo 'desktop-chrome) :font-weight bold
|
|
:pointer hand :keymap ,(desktop-demo-keymap demo "desk-terminal" t)
|
|
:help-echo "Drag Terminal. Alt+arrows moves it from the keyboard."
|
|
"TERMINAL / 04 ::")
|
|
(box :padding ((lh 1) (ch 2))
|
|
(box :class desktop-terminal-accent ,@(desktop-demo-style demo 'desktop-terminal-accent) "$ build something good")
|
|
(box :padding-top (lh 1) :class desktop-terminal-muted ,@(desktop-demo-style demo 'desktop-terminal-muted) " session: creative / local\n workspace: parallax")
|
|
(box :padding-top (lh 1) " + ideas connected\n + room for experiments\n + all five windows ready")
|
|
(box :padding-top (lh 1) :class desktop-terminal-accent ,@(desktop-demo-style demo 'desktop-terminal-accent) " READY / follow your curiosity")))
|
|
|
|
(box :id "desk-palette" :position absolute :left ,(desktop-demo-window-left palette)
|
|
:top ,(desktop-demo-window-top palette) :width (min (ch 29) (% 36))
|
|
:height (lh 9) :z-index 5 :overflow hidden
|
|
:class desktop-palette ,@(desktop-demo-style demo 'desktop-palette) :pointer arrow
|
|
:help-echo "Palette starts in front. Click a window underneath to change the stack."
|
|
:keymap ,(desktop-demo-keymap demo "desk-palette")
|
|
(box :id "desk-palette-title" :height (lh 1) :padding-inline (ch 1)
|
|
:class desktop-chrome ,@(desktop-demo-chrome-style demo palette t) :font-weight bold
|
|
:pointer hand :keymap ,(desktop-demo-keymap demo "desk-palette" t)
|
|
:help-echo "Drag Palette. Alt+arrows moves it from the keyboard."
|
|
"PALETTE / 05 ::")
|
|
(box :padding ((lh 1) (ch 1))
|
|
(box :font-weight bold "Objects in conversation.")
|
|
(box :padding-top (lh 1) :class desktop-palette-caption ,@(desktop-demo-style demo 'desktop-palette-caption) "FIVE TONES / ONE ATMOSPHERE")
|
|
(flex :height (lh 2) :padding-top (lh 1) :gap ((lh 0) (ch 1))
|
|
(box :width (ch 4) :height (lh 1) :class desktop-swatch-violet
|
|
,@(desktop-demo-style demo 'desktop-swatch-violet))
|
|
(box :width (ch 4) :height (lh 1) :class desktop-swatch-amber
|
|
,@(desktop-demo-style demo 'desktop-swatch-amber))
|
|
(box :width (ch 4) :height (lh 1) :class desktop-swatch-cyan
|
|
,@(desktop-demo-style demo 'desktop-swatch-cyan))
|
|
(box :width (ch 4) :height (lh 1) :class desktop-swatch-mint
|
|
,@(desktop-demo-style demo 'desktop-swatch-mint))
|
|
(box :width (ch 4) :height (lh 1) :class desktop-swatch-rose
|
|
,@(desktop-demo-style demo 'desktop-swatch-rose)))
|
|
(box :padding-top (lh 1) :class desktop-palette-accent ,@(desktop-demo-style demo 'desktop-palette-accent) "MIDNIGHT / SOFT ELECTRIC"))))
|
|
|
|
(flex :height (lh 2) :gap ((lh 0) (ch 1)) :padding-top (lh 1)
|
|
,@(cl-loop for pane in panes for index from 1
|
|
for short in '("ST" "NT" "SG" "TM" "PL")
|
|
for active = (equal (desktop-demo-window-id pane) (desktop-demo-active demo))
|
|
collect
|
|
`(box :id ,(concat (desktop-demo-window-id pane) "-dock")
|
|
:padding-inline (ch 1)
|
|
:class desktop-chrome ,@(desktop-demo-chrome-style demo pane active)
|
|
:font-weight bold :pointer hand
|
|
:help-echo ,(format "Bring %s to front, even when covered. Alt+arrows moves it."
|
|
(desktop-demo-window-label pane))
|
|
:keymap ,(desktop-demo-keymap demo (desktop-demo-window-id pane))
|
|
,(format "%02d %s" index short))))
|
|
(box :id "desktop-status" :height (lh 1) :class desktop-muted ,@(desktop-demo-style demo 'desktop-muted)
|
|
,(desktop-demo-status demo))))
|