117 lines
7.9 KiB
Plaintext
117 lines
7.9 KiB
Plaintext
;; Layout data only. The matching companion owns state and business actions.
|
|
(let ((demo (layer-demo-create)))
|
|
`(column
|
|
:width (vw 100) :height (vh 100)
|
|
:padding ((lh 1) (ch 2))
|
|
:background-color "#F4F3ED" :color "#273B42"
|
|
(box :padding ((lh 1) (ch 2)) :background-color "#153F4A" :color "#FFFFFF"
|
|
"EBOX / LAYER LAB\nRetained content, opaque overlap, native interaction.")
|
|
(box :padding-block (lh 1)
|
|
"Click a control, or move point into it and press RET / SPC.\n"
|
|
"All text shares one font size. Scroll with the wheel or C-v when needed.")
|
|
|
|
(box "01 / LAYERED DESK absolute position + local stacking")
|
|
(flex :flex-wrap wrap :gap ((lh 1) (ch 1)) :padding-block (lh 1)
|
|
:pointer hand :hover-style (:background-color "#CCE0D6")
|
|
(box :padding-inline (ch 1) :background-color "#DDE9DF"
|
|
:help-echo "Hide or show Panel A. Revealing a lower layer shows its latest content."
|
|
:keymap ,(layer-demo-action demo 'toggle) "TOGGLE PANEL A")
|
|
(box :padding-inline (ch 1) :background-color "#DDE9DF"
|
|
:help-echo "Move Panel A between left 4ch / top 2lh and left 10ch / top 0lh."
|
|
:keymap ,(layer-demo-action demo 'move) "MOVE PANEL A")
|
|
(box :padding-inline (ch 1) :background-color "#DDE9DF"
|
|
:help-echo "Switch Panel A between z=2 and z=4; Panel B stays at z=3."
|
|
:keymap ,(layer-demo-action demo 'raise) "RAISE / LOWER A")
|
|
(box :padding-inline (ch 1) :background-color "#DDE9DF"
|
|
:help-echo "Update the lower note even when every part of it is covered."
|
|
:keymap ,(layer-demo-action demo 'update-lower) "UPDATE COVERED NOTE"))
|
|
(box :id "layer-desk" :height (lh 10) :background-color "#DFE5E4"
|
|
(box :height (lh 10)
|
|
"DESK / ordinary content stays in its flow slot\n"
|
|
"........................................................................\n"
|
|
"........................................................................\n"
|
|
"........................................................................\n"
|
|
"........................................................................\n"
|
|
"........................................................................\n"
|
|
"........................................................................\n"
|
|
"........................................................................\n"
|
|
"........................................................................\n"
|
|
"DESK END / panels do not add flow rows")
|
|
(box :id "lower-note" :position absolute :left (ch 4) :top (lh 2)
|
|
:width (ch 38) :height (lh 5) :z-index 0 :padding-inline (ch 1)
|
|
:background-color "#C9DED0" :color "#244F36" :pointer hand
|
|
:hover-style (:background-color "#ADCAB7")
|
|
:help-echo ,(ebox-help-create
|
|
(apply-partially #'layer-demo-help demo 'lower))
|
|
:keymap ,(layer-demo-action demo 'lower)
|
|
,(layer-demo-lower-content demo))
|
|
(box :id "panel-a" :position absolute :left (ch 4) :top (lh 2)
|
|
:width (ch 38) :height (lh 5) :z-index 2 :padding-inline (ch 1)
|
|
:background-color "#3A687E" :color "#FFFFFF"
|
|
:help-echo "Panel A is opaque, including its blank padding. Use the toolbar to move or raise it."
|
|
"PANEL A / blue\nMove and raise from the toolbar.\nA survives under the amber panel.\nOpaque padding covers too.\nThe covered note remains alive.")
|
|
(box :id "panel-b" :position absolute :left (ch 22) :top (lh 4)
|
|
:width (ch 28) :height (lh 4) :z-index 3 :padding-inline (ch 1)
|
|
:background-color "#D7AF6D" :color "#503B21"
|
|
:help-echo "Panel B stays at z=3. Raising A changes which panel owns the overlap."
|
|
"PANEL B / amber\nFixed at z=3.\nLater layers cover earlier\npaint, not logical data."))
|
|
(box :height (lh 1))
|
|
|
|
(box "02 / RELATIVE POSITION reserve the slot, shift the paint")
|
|
(column :height (lh 4) :background-color "#E8E1EE"
|
|
(box :id "relative-marker" :position relative :left (ch 4) :top (lh 1)
|
|
:width (ch 24) :height (lh 1) :z-index 1
|
|
:background-color "#765D87" :color "#FFFFFF" "RELATIVE / +4ch, +1lh")
|
|
(box "flow row 2: the shifted marker covers part of this row")
|
|
(box :id "relative-following" "FLOW ROW 3 / the original slot was kept")
|
|
(box "Each parent keeps a local stacking group automatically."))
|
|
(box :height (lh 1))
|
|
|
|
(box "03 / ANCHORED MENU nested owner + root projection")
|
|
(box :padding-block (lh 1)
|
|
"The owner below clips to one row. Its menu stays a logical child\n"
|
|
"but paints in the root layer, outside that local clip.")
|
|
(flex :gap ((lh 0) (ch 1)) :padding-bottom (lh 1) :pointer hand
|
|
:hover-style (:background-color "#CCE0D6")
|
|
(box :padding-inline (ch 1) :background-color "#DDE9DF"
|
|
:help-echo "Cycle bottom-start, bottom-end, top-start, and top-end. Open the menu to compare."
|
|
:keymap ,(layer-demo-action demo 'placement) "CYCLE PLACEMENT")
|
|
(box :padding-inline (ch 1) :background-color "#DDE9DF"
|
|
:help-echo "Move the relative trigger from left 4ch to 12ch. The open menu follows its anchor."
|
|
:keymap ,(layer-demo-action demo 'anchor) "MOVE ANCHOR"))
|
|
(box :height (lh 3) :background-color "#E5EBE7"
|
|
"SPACE ABOVE / top placements can cover this area\n"
|
|
"........................................................................\n"
|
|
"........................................................................")
|
|
(box :id "menu-owner" :height (lh 1) :overflow hidden :background-color "#CFDCD5"
|
|
(box :id "menu-trigger" :position relative :left (ch 4) :top (lh 0)
|
|
:width (ch 32) :height (lh 1) :padding-inline (ch 1)
|
|
:background-color "#286347" :color "#FFFFFF" :pointer hand
|
|
:hover-style (:background-color "#407E5C")
|
|
:help-echo ,(ebox-help-create
|
|
(apply-partially #'layer-demo-help demo 'menu))
|
|
:keymap ,(layer-demo-action demo 'menu) "OPEN / CLOSE ROOT MENU")
|
|
(box :id "root-menu" :position absolute :layer root :anchor "menu-trigger"
|
|
:placement bottom-start :z-index 50 :visibility hidden
|
|
:width (ch 26) :height (lh 3) :background-color "#153F4A" :color "#FFFFFF"
|
|
(box :padding-inline (ch 1) "ROOT MENU / choose")
|
|
(box :id "menu-sage" :padding-inline (ch 1) :pointer hand
|
|
:hover-style (:background-color "#407E5C")
|
|
:help-echo "Choose sage, update the result, and close the menu."
|
|
:keymap ,(layer-demo-action demo 'sage) "CHOOSE SAGE")
|
|
(box :id "menu-amber" :padding-inline (ch 1) :pointer hand
|
|
:hover-style (:background-color "#895314")
|
|
:help-echo "Choose amber, update the result, and close the menu."
|
|
:keymap ,(layer-demo-action demo 'amber) "CHOOSE AMBER")))
|
|
(box :height (lh 3) :background-color "#E5EBE7"
|
|
"SPACE BELOW / bottom placements can cover this area\n"
|
|
"........................................................................\n"
|
|
"........................................................................")
|
|
(box :id "menu-result" :padding-block (lh 1) "No menu selection yet.")
|
|
(box :id "layer-status" :background-color "#153F4A" :color "#FFFFFF"
|
|
:padding-inline (ch 1) ,(layer-demo-status demo))
|
|
(box :padding-top (lh 1)
|
|
"Try: update the covered note twice, hide A, then activate the revealed note.\n"
|
|
"Open the menu, cycle all four placements, move its anchor, and select a color.\n"
|
|
"Commands publish named-region updates. Layers do not create a focus system.")))
|