flexdesk 0.16.0 → 0.16.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +44 -0
- package/css/flexdesk.css +153 -0
- package/dist/chunk-B5Q53LAJ.js +111 -0
- package/dist/chunk-B5Q53LAJ.js.map +7 -0
- package/dist/{chunk-CWPMLX67.js → chunk-W6FBJLPW.js} +2 -110
- package/dist/{chunk-CWPMLX67.js.map → chunk-W6FBJLPW.js.map} +3 -3
- package/dist/flexdesk.css +153 -0
- package/dist/tiles.js +471 -16
- package/dist/tiles.js.map +4 -4
- package/dist/widgets.js +23 -9
- package/dist/widgets.js.map +2 -2
- package/dist/wm.js +4 -2
- package/dist/wm.js.map +1 -1
- package/package.json +1 -1
- package/src/tiles/list_tiles.js +422 -0
- package/src/tiles/scope_picker.js +96 -0
- package/src/tiles/tile_base.js +11 -0
- package/src/tiles/tile_grid.js +36 -1
- package/src/ui/components/sortable_list.js +26 -4
package/dist/flexdesk.css
CHANGED
|
@@ -3565,6 +3565,159 @@ body.twm-window-maximized .twm-resize-handle {
|
|
|
3565
3565
|
font-size: var(--font-size-xs);
|
|
3566
3566
|
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
|
|
3567
3567
|
}
|
|
3568
|
+
/* ── the list and people tiles (0.16.1, list_tiles.js) ──────────────────
|
|
3569
|
+
A bar (count, button), the rows, a note. The rows scroll inside the tile;
|
|
3570
|
+
the bar and the note stay put. */
|
|
3571
|
+
.fd-list-tile {
|
|
3572
|
+
flex: 1 1 auto;
|
|
3573
|
+
display: flex;
|
|
3574
|
+
flex-direction: column;
|
|
3575
|
+
min-height: 0;
|
|
3576
|
+
gap: var(--space-xs);
|
|
3577
|
+
margin: calc(-1 * var(--space-sm)) 0;
|
|
3578
|
+
}
|
|
3579
|
+
.fd-list-tile__bar {
|
|
3580
|
+
flex: 0 0 auto;
|
|
3581
|
+
display: flex;
|
|
3582
|
+
align-items: center;
|
|
3583
|
+
gap: var(--space-sm);
|
|
3584
|
+
min-height: 24px;
|
|
3585
|
+
}
|
|
3586
|
+
.fd-list-tile__count {
|
|
3587
|
+
color: var(--text-muted);
|
|
3588
|
+
font-size: var(--font-size-xs);
|
|
3589
|
+
font-variant-numeric: tabular-nums;
|
|
3590
|
+
}
|
|
3591
|
+
.fd-list-tile__spacer { flex: 1 1 auto; }
|
|
3592
|
+
.fd-list-tile__action {
|
|
3593
|
+
display: inline-flex;
|
|
3594
|
+
align-items: center;
|
|
3595
|
+
gap: 4px;
|
|
3596
|
+
padding: 2px 8px;
|
|
3597
|
+
border: 1px solid var(--border-subtle);
|
|
3598
|
+
border-radius: var(--radius-sm);
|
|
3599
|
+
background: transparent;
|
|
3600
|
+
color: var(--text-secondary);
|
|
3601
|
+
font: inherit;
|
|
3602
|
+
font-size: var(--font-size-xs);
|
|
3603
|
+
cursor: pointer;
|
|
3604
|
+
}
|
|
3605
|
+
.fd-list-tile__action:hover { color: var(--text-bright); border-color: var(--text-muted); }
|
|
3606
|
+
.fd-list-tile__action .material-symbols-outlined { font-size: 15px; }
|
|
3607
|
+
.fd-list-tile__rows {
|
|
3608
|
+
flex: 1 1 auto;
|
|
3609
|
+
min-height: 0;
|
|
3610
|
+
overflow-y: auto;
|
|
3611
|
+
overflow-x: hidden;
|
|
3612
|
+
}
|
|
3613
|
+
.fd-list-tile__empty {
|
|
3614
|
+
padding: var(--space-sm) 2px;
|
|
3615
|
+
color: var(--text-muted);
|
|
3616
|
+
font-size: var(--font-size-sm);
|
|
3617
|
+
}
|
|
3618
|
+
.fd-list-tile__row {
|
|
3619
|
+
display: flex;
|
|
3620
|
+
align-items: center;
|
|
3621
|
+
gap: var(--space-sm);
|
|
3622
|
+
min-width: 0;
|
|
3623
|
+
padding: 3px 4px;
|
|
3624
|
+
border-radius: var(--radius-sm);
|
|
3625
|
+
font-size: var(--font-size-sm);
|
|
3626
|
+
cursor: pointer;
|
|
3627
|
+
outline: none;
|
|
3628
|
+
}
|
|
3629
|
+
.fd-list-tile__row:hover { background: rgba(255, 255, 255, 0.05); }
|
|
3630
|
+
.fd-list-tile__row:focus-visible { box-shadow: inset 0 0 0 1px var(--accent-bright); }
|
|
3631
|
+
.fd-list-tile__icon { flex: 0 0 auto; font-size: 16px; color: var(--text-muted); }
|
|
3632
|
+
.fd-list-tile__lead {
|
|
3633
|
+
flex: 0 0 auto;
|
|
3634
|
+
color: var(--text-muted);
|
|
3635
|
+
font-variant-numeric: tabular-nums;
|
|
3636
|
+
white-space: nowrap;
|
|
3637
|
+
}
|
|
3638
|
+
.fd-list-tile__title {
|
|
3639
|
+
flex: 1 1 auto;
|
|
3640
|
+
min-width: 0;
|
|
3641
|
+
color: var(--text-bright);
|
|
3642
|
+
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
|
3643
|
+
}
|
|
3644
|
+
.fd-list-tile__cell {
|
|
3645
|
+
flex: 0 0 auto;
|
|
3646
|
+
display: inline-flex;
|
|
3647
|
+
align-items: center;
|
|
3648
|
+
gap: 2px;
|
|
3649
|
+
max-width: 40%;
|
|
3650
|
+
color: var(--text-secondary);
|
|
3651
|
+
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
|
3652
|
+
}
|
|
3653
|
+
.fd-list-tile__cell .material-symbols-outlined { font-size: 14px; }
|
|
3654
|
+
.fd-list-tile__cell--danger, .fd-people-tile__pill--danger { color: var(--color-danger); }
|
|
3655
|
+
.fd-list-tile__cell--warning, .fd-people-tile__pill--warning { color: var(--color-warning); }
|
|
3656
|
+
.fd-list-tile__cell--ok, .fd-people-tile__pill--ok { color: var(--color-success); }
|
|
3657
|
+
.fd-list-tile__cell--muted, .fd-people-tile__pill--muted { color: var(--text-muted); }
|
|
3658
|
+
.fd-list-tile__note {
|
|
3659
|
+
flex: 0 0 auto;
|
|
3660
|
+
font-size: var(--font-size-xs);
|
|
3661
|
+
color: var(--text-muted);
|
|
3662
|
+
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
|
3663
|
+
}
|
|
3664
|
+
.fd-people-tile__name {
|
|
3665
|
+
flex: 0 1 auto;
|
|
3666
|
+
min-width: 0;
|
|
3667
|
+
color: var(--text-bright);
|
|
3668
|
+
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
|
3669
|
+
}
|
|
3670
|
+
.fd-people-tile__name--muted { color: var(--text-muted); font-style: italic; }
|
|
3671
|
+
.fd-people-tile__pills {
|
|
3672
|
+
flex: 1 1 auto;
|
|
3673
|
+
display: flex;
|
|
3674
|
+
flex-wrap: nowrap;
|
|
3675
|
+
gap: 4px;
|
|
3676
|
+
min-width: 0;
|
|
3677
|
+
overflow: hidden;
|
|
3678
|
+
}
|
|
3679
|
+
.fd-people-tile__pill {
|
|
3680
|
+
flex: 0 0 auto;
|
|
3681
|
+
padding: 0 6px;
|
|
3682
|
+
border: 1px solid var(--border-subtle);
|
|
3683
|
+
border-radius: 9px;
|
|
3684
|
+
font-size: var(--font-size-xs);
|
|
3685
|
+
line-height: 16px;
|
|
3686
|
+
color: var(--text-secondary);
|
|
3687
|
+
white-space: nowrap;
|
|
3688
|
+
}
|
|
3689
|
+
.fd-people-tile__count {
|
|
3690
|
+
flex: 0 0 auto;
|
|
3691
|
+
color: var(--text-secondary);
|
|
3692
|
+
font-size: var(--font-size-xs);
|
|
3693
|
+
font-variant-numeric: tabular-nums;
|
|
3694
|
+
}
|
|
3695
|
+
|
|
3696
|
+
/* ── the scope picker (0.16.1, scope_picker.js): one pressed button of a row */
|
|
3697
|
+
.fd-scope-picker {
|
|
3698
|
+
display: inline-flex;
|
|
3699
|
+
align-items: stretch;
|
|
3700
|
+
border: 1px solid var(--border-subtle);
|
|
3701
|
+
border-radius: var(--radius-sm);
|
|
3702
|
+
overflow: hidden;
|
|
3703
|
+
}
|
|
3704
|
+
.fd-scope-picker__btn {
|
|
3705
|
+
padding: 3px 10px;
|
|
3706
|
+
border: 0;
|
|
3707
|
+
border-left: 1px solid var(--border-subtle);
|
|
3708
|
+
background: transparent;
|
|
3709
|
+
color: var(--text-secondary);
|
|
3710
|
+
font: inherit;
|
|
3711
|
+
font-size: var(--font-size-sm);
|
|
3712
|
+
white-space: nowrap;
|
|
3713
|
+
cursor: pointer;
|
|
3714
|
+
}
|
|
3715
|
+
.fd-scope-picker__btn:first-child { border-left: 0; }
|
|
3716
|
+
.fd-scope-picker__btn:hover { color: var(--text-bright); background: rgba(255, 255, 255, 0.05); }
|
|
3717
|
+
.fd-scope-picker__btn--on,
|
|
3718
|
+
.fd-scope-picker__btn--on:hover { background: var(--accent); color: #fff; }
|
|
3719
|
+
.fd-scope-picker__btn:focus-visible { outline: 1px solid var(--accent-bright); outline-offset: -2px; }
|
|
3720
|
+
|
|
3568
3721
|
/* ===================================================================
|
|
3569
3722
|
REUSABLE ACTION DROPDOWN COMPONENT
|
|
3570
3723
|
Used by Add Scenario, Add Widget, and other action dropdowns
|