6f345003c9
Squashed from vjroger/makepad `storybook-pr` at 086d25452 (1,332 commits on top of
6f1e44649; his last commit restored every path outside the contribution to upstream).
- apps/storybook: every component organised, documented and previewed live.
- widgets: about eighty new widgets (accordion, alert, avatar, badge, breadcrumb, calendar,
card, carousel, chat, chip, colour, command palette, date and time pickers, dialog,
dropzone, floating action and panel, form, hamburger, line and radial menus, kanban,
masonry, menu, nav list, pagination, pill nav, popover, progress, property inspector,
range slider, rich text, select, spinner, table, tabs, tag field, timeline, toast,
toolbar, tour, transfer, tree, waveform, wheel picker and more); theme tokens and a
theme store, themes mixed by weight with a legibility check, a twelfth style sheet in
black and orange; the data grid gains row selection, drag and reorder, heading tips and
alignment; the glass button is a water lens; the portal list keeps the wheel it uses,
stands down from a press another control holds, can keep a row on screen and rule the
gap under a short list.
- platform: sweep locks and scroll blocks nest, `is_mouse_held_outside`, per-axis
scroll-handled flags, `next_frame_is_pending`, owner-scoped scroll unblocking, a
hands-off marker for the remote bridge, exploded-view projection and focus.
- draw: the interior distance of square-cornered boxes, a pointer shape, and
`turtle_ancestor_clip`.
- wm: the style tween carries an eighth weight for the new sheet.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
93 lines
3.8 KiB
Text
93 lines
3.8 KiB
Text
use mod.prelude.widgets_internal.*
|
|
mod.widgets.Button.padding = mod.turtle.Inset{left: 8.0 right: 8.0 top: 4.0 bottom: 4.0}
|
|
mod.widgets.Button.draw_bg.border_radius = 0.0
|
|
mod.widgets.Button.draw_bg.border_size = 2.0
|
|
mod.widgets.Button.draw_bg.color_2 = #d4d0c8
|
|
mod.widgets.TextInput.draw_bg.border_radius = 0.0
|
|
mod.widgets.Window.pass.clear_color = #d4d0c8
|
|
|
|
// Raised gray command buttons, with a depressed face while held.
|
|
mod.widgets.Button.draw_bg.pixel = fn() {
|
|
let p=self.pos*self.rect_size
|
|
let size=self.rect_size
|
|
let sunken=self.down>0.5
|
|
let fill=#d4d0c8
|
|
|
|
let tl=min(p.x,p.y)
|
|
let br=min(size.x-p.x,size.y-p.y)
|
|
let d=min(tl,br)
|
|
let upper=tl<br
|
|
let raised_light=if d<1.0 {#ffffff}else{#d4d0c8}
|
|
let raised_dark=if d<1.0 {#404040}else{#808080}
|
|
let light=if sunken {#ffffff}else{raised_light}
|
|
let dark=if sunken {if d<1.0 {#808080}else{#404040}}else{raised_dark}
|
|
let edge=if upper {if sunken {dark}else{light}}else{if sunken {light}else{dark}}
|
|
let color=if d<2.0 {edge}else{fill}
|
|
let focus_p=p-vec2(4.0)
|
|
let focus_q=size-p-vec2(4.0)
|
|
let fd=min(min(focus_p.x,focus_p.y),min(focus_q.x,focus_q.y))
|
|
let dot=fract((floor(p.x)+floor(p.y))*0.5)<0.5
|
|
let face=if self.focus>0.5 && fd>=0.0 && fd<1.0 && dot {#000000}else{color}
|
|
// The wait spinner is drawn by the face, so a style that replaces the
|
|
// face wholesale drops it and a button left waiting looks idle. The
|
|
// hover and disabled mixes are deliberately NOT restored: neither style
|
|
// lit a button under the pointer, and the label carries the disabled
|
|
// state on its own, from draw_text, which no style replaces.
|
|
if self.loading>0.0 {
|
|
let sdf=Sdf2d.viewport(p)
|
|
sdf.clear(face)
|
|
let c=size*0.5
|
|
let r=max(min(size.x,size.y)*0.5-self.loading_inset,1.0)
|
|
let a0=self.anim_time*2.0*PI
|
|
sdf.arc_round_caps(c.x,c.y,r,a0,a0+1.5*PI,self.loading_stroke)
|
|
sdf.fill(vec4(self.loading_color.rgb,self.loading_color.a*self.loading))
|
|
return sdf.result
|
|
}
|
|
return face
|
|
}
|
|
// Sunken white edit fields, independent of the light theme's gradient material.
|
|
mod.widgets.TextInput.draw_bg.pixel = fn() {
|
|
let p=self.pos*self.rect_size
|
|
let size=self.rect_size
|
|
let sunken=true
|
|
let fill=if self.disabled>0.5 {#d4d0c8}else{#ffffff}
|
|
|
|
let tl=min(p.x,p.y)
|
|
let br=min(size.x-p.x,size.y-p.y)
|
|
let d=min(tl,br)
|
|
let upper=tl<br
|
|
let raised_light=if d<1.0 {#ffffff}else{#d4d0c8}
|
|
let raised_dark=if d<1.0 {#404040}else{#808080}
|
|
let light=if sunken {#ffffff}else{raised_light}
|
|
let dark=if sunken {if d<1.0 {#808080}else{#404040}}else{raised_dark}
|
|
let edge=if upper {if sunken {dark}else{light}}else{if sunken {light}else{dark}}
|
|
let color=if d<2.0 {edge}else{fill}
|
|
return color
|
|
}
|
|
|
|
// A white combo field and a separate raised arrow button.
|
|
mod.widgets.DropDown.draw_bg.pixel = fn() {
|
|
let p=self.pos*self.rect_size
|
|
let size=self.rect_size
|
|
let tl=min(p.x,p.y)
|
|
let br=min(size.x-p.x,size.y-p.y)
|
|
let edge=if tl<br {if tl<1.0 {#808080}else{#404040}}else{#ffffff}
|
|
let field=if min(tl,br)<2.0 {edge}else{if self.disabled>0.5 {#d4d0c8}else{#ffffff}}
|
|
let q=p-vec2(size.x-18.0,2.0)
|
|
let bs=vec2(16.0,size.y-4.0)
|
|
if q.x>=0.0 && q.y>=0.0 && q.x<bs.x && q.y<bs.y {
|
|
let a=min(q.x,q.y)
|
|
let b=min(bs.x-q.x,bs.y-q.y)
|
|
let pressed=self.down>0.5 || self.active>0.5
|
|
let face=if min(a,b)<1.0 {if (a<b)!=pressed {#ffffff}else{#808080}}else{#d4d0c8}
|
|
let ay=q.y-(bs.y*0.5-1.0)
|
|
let arrow=ay>=0.0 && ay<=3.0 && abs(q.x-bs.x*0.5)<=3.0-ay
|
|
return if arrow {if self.disabled>0.5 {#808080}else{#000000}}else{face}
|
|
}
|
|
return field
|
|
}
|
|
true
|
|
|
|
// Square two-line panel frames; the app keeps the same resident widgets.
|
|
mod.widgets.PanelView.draw_bg.bevel = 1.0
|
|
mod.widgets.PanelView.draw_bg.border_radius = 0.0
|