fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-20 03:18:06 +08:00
Code Issues Packages Projects Releases Wiki Activity

Keyboard menu/widget navigation (#628)

Browse Source 
* Keyboard menu navigation

* Fix dropdown keyboard navigation

* Fix merge error

* Some code review

* Interactive dropdowns

* Query by data attr not class name

* Add locking behaviour

* Change query selector style

* Change query selector style (again)

* Code review feedback

* Fix highlighted entry regression

* Styling and disabling checkbox tabindex in MenuLists

* Don't redirect space off canvas to backend

* Do not emit update if value same

* Escape closes all floating menus

* Close dropdowns on blur

Co-authored-by: Keavon Chambers <keavon@keavon.com>
This commit is contained in:
0HyperCube
2022-05-25 22:10:18 +01:00
committed by Keavon Chambers
parent eca9797597
commit 889e988fb3
12 changed files with 176 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
frontend/src/components/widgets/groups/WidgetSection.vue
View File

@@ -1,11 +1,11 @@
<!-- TODO: Implement collapsable sections with properties system -->
<template>
<LayoutCol class="widget-section">
<LayoutRow class="header" @click.stop="() => (expanded = !expanded)">
<button class="header" @click.stop="() => (expanded = !expanded)">
<div class="expand-arrow" :class="{ expanded }"></div>
<Separator :type="'Related'" />
<TextLabel :bold="true">{{ widgetData.name }}</TextLabel>
</LayoutRow>
</button>
<LayoutCol class="body" v-if="expanded">
<component :is="layoutRowType(layoutRow)" :widgetData="layoutRow" :layoutTarget="layoutTarget" v-for="(layoutRow, index) in widgetData.layout" :key="index"></component>
</LayoutCol>
@@ -17,11 +17,14 @@
flex: 0 0 auto;
.header {
display: flex;
flex: 0 0 24px;
background: var(--color-4-dimgray);
align-items: center;
border: 0;
text-align: left;
padding: 0 8px;
margin: 0 -4px;
background: var(--color-4-dimgray);
align-items: center;
.expand-arrow {
width: 6px;