-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Branch commit log: ui/b/shell.vue: leave overflow and padding to <b-devicepanel/> ui/b/devicepanel.js: port to LitComponent from Vue * Adjust horizontal scroll shadows * Move overflow scrolling to be handled inside devicepanel * Fix sibling handling in menuopen, fixes #46 * Open menu on press, feels faster * Port to use LitComponent and repeat() * Make use of the device.devs property * Remove devicepanel.vue ase/api, ase/device*: add Device.devs property ui/b/contextmenu.js: avoid binding foreign callbacks to contextmenu ui/tailwind.scss: add .hflex and .vflex classes ui/Makefile.mk: leave "fixme" linting to synsmell, check all files misc/synsmell.py: extend CSS heuristic Signed-off-by: Tim Janik <[email protected]>
- Loading branch information
Showing
12 changed files
with
219 additions
and
159 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,169 @@ | ||
| // This Source Code Form is licensed MPL-2.0: http://mozilla.org/MPL/2.0 | ||
| // @ts-check | ||
|
|
||
| /** @class BDevicePanel | ||
| * @description | ||
| * Panel for editing of devices. | ||
| * ## Props: | ||
| * *track* | ||
| * : Container for the devices. | ||
| */ | ||
|
|
||
| import { LitComponent, html, render, noChange, JsExtract, docs, ref, repeat } from '../little.js'; | ||
| import * as Util from "../util.js"; | ||
| import * as Kbd from '../kbd.js'; | ||
| import { text_content, get_uri, valid_uri, has_uri } from '../dom.js'; | ||
|
|
||
| // == STYLE == | ||
| JsExtract.css` | ||
| $scrollbar-height: 6px; //* Should match Firefox 'scrollbar-width:thin' */ | ||
| b-devicepanel { | ||
| @apply hflex; | ||
| padding: 0 0 3px 0; | ||
| background: $b-devicepanel-bg; | ||
| border-radius: inherit; | ||
| overflow: hidden; | ||
| .b-devicepanel-scroller { | ||
| @apply hflex; | ||
| overflow: auto visible; | ||
| justify-content: flex-start; | ||
| align-items: center; | ||
| } | ||
| .b-devicepanel-vtitle { | ||
| text-align: center; | ||
| /* FF: writing-mode: sideways-rl; */ | ||
| writing-mode: vertical-rl; | ||
| transform: rotate(180deg); | ||
| border-right: 7px solid #9c61ff; | ||
| padding: 1em 5px; | ||
| border-top-right-radius: inherit; | ||
| border-bottom-right-radius: inherit; | ||
| align-self: stretch; | ||
| //* Add slight shadow to the right for a soft scroll boundary */ | ||
| box-shadow: -2px 0 $b-scroll-shadow-blur 0px #000; | ||
| background: #000000ef; | ||
| z-index: 9; //* raise above scrolled siblings */ | ||
| } | ||
| .b-devicepanel-hstack { | ||
| align-self: stretch; | ||
| padding-top: $scrollbar-height; | ||
| padding-bottom: 0; | ||
| > * { flex-grow: 0; } | ||
| .b-more { margin-top: $scrollbar-height; } | ||
| } | ||
| position: relative; | ||
| &::after { | ||
| position: absolute; left:0; top:0; right:0; bottom:0; | ||
| content: ' '; pointer-events: none; | ||
| box-shadow: inset -10px 0 7px -7px #000, inset 10px 0 7px -7px #000; | ||
| z-index: 9; //* raise above scrolled siblings */ | ||
| } | ||
| }`; | ||
|
|
||
| // == HTML == | ||
| const DEVICE_HTML = (t, dev) => html` | ||
| <b-more @mousedown=${e => t.menuopen (e, dev)} | ||
| data-tip="**CLICK** Add New Elements" ></b-more> | ||
| <b-deviceeditor .device=${dev} center ></b-deviceeditor> | ||
| `; | ||
| const HTML = (t) => html` | ||
| <div class="b-devicepanel-scroller" > | ||
| <span class="b-devicepanel-vtitle"> Device Panel </span> | ||
| <h-flex class="b-devicepanel-hstack" > | ||
| ${repeat (t.chain_?.devs || [], dev => dev.$id, dev => DEVICE_HTML (t, dev))} | ||
| <b-more @mousedown=${e => t.menuopen (e)} | ||
| data-tip="**CLICK** Add New Elements" ></b-more> | ||
| <b-contextmenu ${ref (h => t.devicepanelcmenu = h)} | ||
| id="g-devicepanelcmenu" .activate=${t.activate.bind (t)} .isactive=${t.isactive.bind (t)} > | ||
| <b-menutitle> Devices </b-menutitle> | ||
| <b-treebrowser .tree=${t.devicetypes} ?expandall="false"> </b-treebrowser> | ||
| </b-contextmenu> | ||
| </h-flex> | ||
| </div> | ||
| `; | ||
|
|
||
| // == SCRIPT == | ||
| import * as Ase from '../aseapi.js'; | ||
|
|
||
| /** | ||
| * @param {Ase.Device} [device] - Track device. | ||
| */ | ||
| async function list_device_types (device) | ||
| { | ||
| const deviceinfos = await device.list_device_types(); // [{ uri, name, category, },...] | ||
| const cats = {}; | ||
| for (const e of deviceinfos) { | ||
| const category = e.category || 'Other'; | ||
| cats[category] = cats[category] || { label: category, type: 'resource-type-folder', entries: [] }; | ||
| e.label = e.label || e.name; | ||
| cats[category].entries.push (e); | ||
| } | ||
| const list = []; | ||
| for (const c of Object.keys (cats).sort()) | ||
| list.push (cats[c]); | ||
| return Object.freeze (list); | ||
| } | ||
|
|
||
| class BDevicePanel extends LitComponent { | ||
| createRenderRoot() { return this; } | ||
| render() { return HTML (this); } | ||
| static properties = { | ||
| track: { type: Ase.Track, reflect: true }, | ||
| }; | ||
| constructor() | ||
| { | ||
| super(); | ||
| this.track = null; | ||
| this.chain_ = null; | ||
| this.menu_sibling = null; | ||
| this.devicepanelcmenu = null; | ||
| } | ||
| updated (changed_props) | ||
| { | ||
| let info_promise; | ||
| if (changed_props.has ('track')) { | ||
| this.chain_ = null; | ||
| const track_fecth_device = async () => { | ||
| const chain = await this.track.access_device(); | ||
| const devicetypes = await list_device_types (chain); | ||
| this.devicetypes = devicetypes; | ||
| this.chain_ = chain; | ||
| this.request_update(); | ||
| }; | ||
| if (this.track) | ||
| track_fecth_device(); | ||
| } | ||
| } | ||
| async activate (uri) | ||
| { | ||
| // close popup to remove focus guards | ||
| if (this.chain_ && !uri.startsWith ('DevicePanel:')) // assuming b-treebrowser.devicetypes | ||
| { | ||
| const sibling = this.menu_sibling; | ||
| let newdev; | ||
| if (sibling) | ||
| newdev = this.chain_.insert_device (uri, sibling); | ||
| else | ||
| newdev = this.chain_.append_device (uri); | ||
| this.menu_sibling = null; | ||
| newdev = await newdev; | ||
| if (!newdev) | ||
| console.error ("Ase.insert_device failed, got null:", uri); | ||
| } | ||
| } | ||
| isactive (uri) | ||
| { | ||
| if (!this.track) | ||
| return false; | ||
| return true; | ||
| } | ||
| menuopen (event, sibling) | ||
| { | ||
| this.menu_sibling = sibling; | ||
| this.devicepanelcmenu.popup (event, { origin: 'none' }); | ||
| Util.prevent_event (event); | ||
| } | ||
| } | ||
| customElements.define ('b-devicepanel', BDevicePanel); |
Oops, something went wrong.