Switch inline SVGs to using SVG file loader
This commit is contained in:
Keavon Chambers
parent
bd11f9c865
commit
981ba53c5a
|
|
@ -0,0 +1,3 @@
|
||||||
|
<svg viewBox="0 0 10 10">
|
||||||
|
<polygon points="10,0.7 9.3,0 5,4.3 0.7,0 0,0.7 4.3,5 0,9.3 0.7,10 5,5.7 9.3,10 10,9.3 5.7,5" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 130 B |
|
|
@ -0,0 +1,3 @@
|
||||||
|
<svg viewBox="0 0 10 10">
|
||||||
|
<path d="M10,0v10H0V0H10z M9,1H1v8h8V1z" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 77 B |
|
|
@ -0,0 +1,3 @@
|
||||||
|
<svg viewBox="0 0 10 10">
|
||||||
|
<rect y="4" width="10" height="1" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 70 B |
|
|
@ -0,0 +1,3 @@
|
||||||
|
<svg viewBox="0 0 10 10">
|
||||||
|
<path d="M10,8H8v2H0V2h2V0h8V8z M7,3H1v6h6V3z M9,1H3v1h5v5h1V1z" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 101 B |
|
|
@ -1,3 +1,3 @@
|
||||||
<svg width="16" height="16" viewBox="0 0 16 16">
|
<svg viewBox="0 0 16 16">
|
||||||
<polygon points="12,5 11,4 8,7 5,4 4,5 7,8 4,11 5,12 8,9 11,12 12,11 9,8" />
|
<polygon points="12,5 11,4 8,7 5,4 4,5 7,8 4,11 5,12 8,9 11,12 12,11 9,8" />
|
||||||
</svg>
|
</svg>
|
||||||
|
Before Width: | Height: | Size: 133 B After Width: | Height: | Size: 110 B |
|
|
@ -0,0 +1,12 @@
|
||||||
|
<svg viewBox="0 0 16 16">
|
||||||
|
<path d="M5.5,10.2c0.1,0.2,0,0.3-0.1,0.4c-0.2,0.1-0.3,0-0.4-0.1c0,0,0,0,0,0L2.7,6.7c-0.1-0.2,0-0.3,0.1-0.4c0.2-0.1,0.3,0,0.4,0.1
|
||||||
|
L5.5,10.2z M14.9,14.9L14.9,14.9C14.9,14.9,14.9,15,14.9,14.9C14.8,15,14.8,15,14.9,14.9L14.9,14.9c-0.5,0.2-1,0.4-1.5,0.5
|
||||||
|
c-0.5,0.1-1.1,0.2-1.6,0.2c-0.5,0.1-1.1,0.1-1.6,0c-0.5,0-1.1-0.1-1.6-0.1l-1.6-0.1c-1.7,0-3.9-0.1-4.4-0.1s-1.1-0.2-1.1-0.3
|
||||||
|
c0-0.1,0.3-0.2,0.6-0.2c0.5-0.1,1.1-0.2,1.7-0.3c0.6-0.1,2-0.2,4.1-0.2c0.8,0,1.8,0,1.8,0c0.6,0,1,0,1.9,0c0.7,0,1.1,0,1.2,0
|
||||||
|
c0.3,0,0.6,0.1,0.9,0.2l-2.6-1.9c-0.2,0.1-0.4,0.2-0.7,0.2H4.5c-0.5,0-0.9-0.2-1.1-0.6l-2.9-5c-0.2-0.4-0.2-0.9,0-1.3l2.9-5
|
||||||
|
C3.6,0.5,4,0.3,4.5,0.3h5.8c0.5,0,0.9,0.2,1.1,0.6l2.9,5l0,0l0,0c0,0.1,0.1,0.2,0.1,0.3c0,0,0,0.1,0,0.1c0,0.1,0,0.1,0,0.2
|
||||||
|
c0,0,0.7,7.2,0.7,7.8v0C15.2,14.6,15.1,14.8,14.9,14.9L14.9,14.9z M4.3,1.9L4.2,2l3.6,6.2c0.4-0.1,0.9-0.2,1.4-0.2l0.9-1.3l1.6-0.2
|
||||||
|
c0.2-0.4,0.5-0.8,0.8-1.1l-2.1-3.7c-0.1-0.2-0.3-0.3-0.5-0.3H4.8C4.6,1.6,4.4,1.7,4.3,1.9z M9.4,11.6l-2-1.4C7.4,10.1,7.3,10,7.3,10
|
||||||
|
l0,0L3.5,3.3l-1.7,3c-0.1,0.2-0.1,0.4,0,0.6l2.6,4.5c0.1,0.2,0.3,0.3,0.5,0.3L9.4,11.6z M13.5,11.3l-0.5-4.6c-0.3,0.3-0.5,0.7-0.7,1
|
||||||
|
l-1.6,0.2L9.8,9.2c-0.4,0-0.8,0-1.3,0.1l3.7,2.7C12.5,11.6,13,11.3,13.5,11.3L13.5,11.3z" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.2 KiB |
|
|
@ -0,0 +1,9 @@
|
||||||
|
<svg viewBox="0 0 16 16">
|
||||||
|
<path class="dim" d="M8,7c0,0.55-0.45,1-1,1l0,0C6.45,8,6,7.55,6,7V4.5c0-0.55,0.45-1,1-1l0,0c0.55,0,1,0.45,1,1V7z" />
|
||||||
|
<path class="bright" d="M11,16c-0.18,0-0.36-0.1-0.45-0.28c-0.12-0.25-0.02-0.55,0.22-0.67C10.87,15.01,13,13.88,13,11V6
|
||||||
|
c0-0.28,0.22-0.5,0.5-0.5S14,5.72,14,6v5c0,3.52-2.66,4.89-2.78,4.95C11.15,15.98,11.08,16,11,16z" />
|
||||||
|
<path class="bright" d="M14.5,15c-0.13,0-0.26-0.05-0.35-0.15c-0.19-0.19-0.2-0.51,0-0.7C14.17,14.12,15,13.2,15,11V8
|
||||||
|
c0-0.28,0.22-0.5,0.5-0.5S16,7.72,16,8v3c0,2.68-1.1,3.81-1.15,3.85C14.76,14.95,14.63,15,14.5,15z" />
|
||||||
|
<path class="dim" d="M9,2c1.1,0,2,0.9,2,2v6c0,2.21-1.79,4-4,4s-4-1.79-4-4V4c0-1.1,0.9-2,2-2H9 M9,1H5C3.35,1,2,2.35,2,4
|
||||||
|
v6c0,2.76,2.24,5,5,5s5-2.24,5-5V4C12,2.35,10.65,1,9,1L9,1z" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 773 B |
|
|
@ -0,0 +1,9 @@
|
||||||
|
<svg viewBox="0 0 16 16">
|
||||||
|
<path class="bright" d="M11,16c-0.18,0-0.36-0.1-0.45-0.28c-0.12-0.25-0.02-0.55,0.22-0.67C10.87,15.01,13,13.88,13,11V6
|
||||||
|
c0-0.28,0.22-0.5,0.5-0.5S14,5.72,14,6v5c0,3.52-2.66,4.89-2.78,4.95C11.15,15.98,11.08,16,11,16z" />
|
||||||
|
<path class="bright" d="M14.5,15c-0.13,0-0.26-0.05-0.35-0.15c-0.19-0.19-0.2-0.51,0-0.7C14.17,14.12,15,13.2,15,11V8
|
||||||
|
c0-0.28,0.22-0.5,0.5-0.5S16,7.72,16,8v3c0,2.68-1.1,3.81-1.15,3.85C14.76,14.95,14.63,15,14.5,15z" />
|
||||||
|
<path class="bright" d="M7,1H5C3.35,1,2,2.35,2,4v4h5V1z" />
|
||||||
|
<path class="dim" d="M9,1H8v1h1c1.1,0,2,0.9,2,2v6c0,2.21-1.79,4-4,4s-4-1.79-4-4V9H2v1c0,2.76,2.24,5,5,5s5-2.24,5-5V4
|
||||||
|
C12,2.35,10.65,1,9,1z" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 677 B |
|
|
@ -0,0 +1,5 @@
|
||||||
|
<svg viewBox="0 0 16 16">
|
||||||
|
<path class="bright" d="M8,1H6C4.35,1,3,2.35,3,4v4h5V1z" />
|
||||||
|
<path class="dim" d="M10,1H9v1h1c1.1,0,2,0.9,2,2v6c0,2.21-1.79,4-4,4s-4-1.79-4-4V9H3v1c0,2.76,2.24,5,5,5s5-2.24,5-5V4
|
||||||
|
C13,2.35,11.65,1,10,1z" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 241 B |
|
|
@ -0,0 +1,9 @@
|
||||||
|
<svg viewBox="0 0 16 16">
|
||||||
|
<path class="bright" d="M8,7c0,0.55-0.45,1-1,1l0,0C6.45,8,6,7.55,6,7V4.5c0-0.55,0.45-1,1-1l0,0c0.55,0,1,0.45,1,1V7z" />
|
||||||
|
<path class="bright" d="M11,16c-0.18,0-0.36-0.1-0.45-0.28c-0.12-0.25-0.02-0.55,0.22-0.67C10.87,15.01,13,13.88,13,11V6
|
||||||
|
c0-0.28,0.22-0.5,0.5-0.5S14,5.72,14,6v5c0,3.52-2.66,4.89-2.78,4.95C11.15,15.98,11.08,16,11,16z" />
|
||||||
|
<path class="bright" d="M14.5,15c-0.13,0-0.26-0.05-0.35-0.15c-0.19-0.19-0.2-0.51,0-0.7C14.17,14.12,15,13.2,15,11V8
|
||||||
|
c0-0.28,0.22-0.5,0.5-0.5S16,7.72,16,8v3c0,2.68-1.1,3.81-1.15,3.85C14.76,14.95,14.63,15,14.5,15z" />
|
||||||
|
<path class="dim" d="M9,2c1.1,0,2,0.9,2,2v6c0,2.21-1.79,4-4,4s-4-1.79-4-4V4c0-1.1,0.9-2,2-2H9 M9,1H5C3.35,1,2,2.35,2,4
|
||||||
|
v6c0,2.76,2.24,5,5,5s5-2.24,5-5V4C12,2.35,10.65,1,9,1L9,1z" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 776 B |
|
|
@ -0,0 +1,5 @@
|
||||||
|
<svg viewBox="0 0 16 16">
|
||||||
|
<path class="bright" d="M9,7c0,0.55-0.45,1-1,1l0,0C7.45,8,7,7.55,7,7V4.5c0-0.55,0.45-1,1-1l0,0c0.55,0,1,0.45,1,1V7z" />
|
||||||
|
<path class="dim" d="M10,2c1.1,0,2,0.9,2,2v6c0,2.21-1.79,4-4,4s-4-1.79-4-4V4c0-1.1,0.9-2,2-2H10 M10,1H6
|
||||||
|
C4.35,1,3,2.35,3,4v6c0,2.76,2.24,5,5,5s5-2.24,5-5V4C13,2.35,11.65,1,10,1L10,1z" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 343 B |
|
|
@ -0,0 +1,5 @@
|
||||||
|
<svg viewBox="0 0 16 16">
|
||||||
|
<path class="dim" d="M9,7c0,0.55-0.45,1-1,1l0,0C7.45,8,7,7.55,7,7V4.5c0-0.55,0.45-1,1-1l0,0c0.55,0,1,0.45,1,1V7z" />
|
||||||
|
<path class="dim" d="M10,2c1.1,0,2,0.9,2,2v6c0,2.21-1.79,4-4,4s-4-1.79-4-4V4c0-1.1,0.9-2,2-2H10 M10,1H6
|
||||||
|
C4.35,1,3,2.35,3,4v6c0,2.76,2.24,5,5,5s5-2.24,5-5V4C13,2.35,11.65,1,10,1L10,1z" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 340 B |
|
|
@ -0,0 +1,9 @@
|
||||||
|
<svg viewBox="0 0 16 16">
|
||||||
|
<path class="bright" d="M11,16c-0.18,0-0.36-0.1-0.45-0.28c-0.12-0.25-0.02-0.55,0.22-0.67C10.87,15.01,13,13.88,13,11V6
|
||||||
|
c0-0.28,0.22-0.5,0.5-0.5S14,5.72,14,6v5c0,3.52-2.66,4.89-2.78,4.95C11.15,15.98,11.08,16,11,16z" />
|
||||||
|
<path class="bright" d="M14.5,15c-0.13,0-0.26-0.05-0.35-0.15c-0.19-0.19-0.2-0.51,0-0.7C14.17,14.12,15,13.2,15,11V8
|
||||||
|
c0-0.28,0.22-0.5,0.5-0.5S16,7.72,16,8v3c0,2.68-1.1,3.81-1.15,3.85C14.76,14.95,14.63,15,14.5,15z" />
|
||||||
|
<path class="bright" d="M7,1h2c1.65,0,3,1.35,3,3v4H7V1z" />
|
||||||
|
<path class="dim" d="M5,1h1v1H5C3.9,2,3,2.9,3,4v6c0,2.21,1.79,4,4,4s4-1.79,4-4V9h1v1c0,2.76-2.24,5-5,5s-5-2.24-5-5V4
|
||||||
|
C2,2.35,3.35,1,5,1z" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 675 B |
|
|
@ -0,0 +1,5 @@
|
||||||
|
<svg viewBox="0 0 16 16">
|
||||||
|
<path class="dim" d="M8,1h2c1.65,0,3,1.35,3,3v4H8V1z" />
|
||||||
|
<path class="bright" d="M6,1h1v1H6C4.9,2,4,2.9,4,4v6c0,2.21,1.79,4,4,4s4-1.79,4-4V9h1v1c0,2.76-2.24,5-5,5s-5-2.24-5-5V4
|
||||||
|
C3,2.35,4.35,1,6,1z" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 236 B |
|
|
@ -0,0 +1,6 @@
|
||||||
|
<svg viewBox="0 0 16 16">
|
||||||
|
<polygon class="bright" points="5.5,4 8,6 10.5,4 10.5,6 8,8 5.5,6" />
|
||||||
|
<polygon class="bright" points="5.5,0 8,2 10.5,0 10.5,2 8,4 5.5,2" />
|
||||||
|
<path class="dim" d="M11.5,1.42v1.28C11.8,3.06,12,3.5,12,4v6c0,2.21-1.79,4-4,4s-4-1.79-4-4V4c0-0.5,0.2-0.94,0.5-1.29
|
||||||
|
V1.42C3.61,1.94,3,2.9,3,4v6c0,2.76,2.24,5,5,5s5-2.24,5-5V4C13,2.9,12.39,1.94,11.5,1.42z" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 386 B |
|
|
@ -0,0 +1,6 @@
|
||||||
|
<svg viewBox="0 0 16 16">
|
||||||
|
<polygon class="bright" points="10.5,4 8,2 5.5,4 5.5,2 8,0 10.5,2" />
|
||||||
|
<polygon class="bright" points="10.5,8 8,6 5.5,8 5.5,6 8,4 10.5,6" />
|
||||||
|
<path class="dim" d="M11.5,1.42v1.28C11.8,3.06,12,3.5,12,4v6c0,2.21-1.79,4-4,4s-4-1.79-4-4V4c0-0.5,0.2-0.94,0.5-1.29
|
||||||
|
V1.42C3.61,1.94,3,2.9,3,4v6c0,2.76,2.24,5,5,5s5-2.24,5-5V4C13,2.9,12.39,1.94,11.5,1.42z" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 386 B |
|
|
@ -5,7 +5,7 @@
|
||||||
<div class="tab" :class="{ active: tabIndex === tabActiveIndex }" v-for="(tabLabel, tabIndex) in tabLabels" :key="tabLabel">
|
<div class="tab" :class="{ active: tabIndex === tabActiveIndex }" v-for="(tabLabel, tabIndex) in tabLabels" :key="tabLabel">
|
||||||
<span>{{tabLabel}}</span>
|
<span>{{tabLabel}}</span>
|
||||||
<button v-if="tabCloseButtons">
|
<button v-if="tabCloseButtons">
|
||||||
<CloseX />
|
<CloseX width="16" height="16" />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -170,8 +170,8 @@ import Viewport from "../panels/ViewportPanel.vue";
|
||||||
import Properties from "../panels/PropertiesPanel.vue";
|
import Properties from "../panels/PropertiesPanel.vue";
|
||||||
import Layers from "../panels/LayersPanel.vue";
|
import Layers from "../panels/LayersPanel.vue";
|
||||||
import Minimap from "../panels/MinimapPanel.vue";
|
import Minimap from "../panels/MinimapPanel.vue";
|
||||||
import CloseX from "../../../assets/svg/16x16-bounds-12x12-icon/tab_close_x.svg";
|
|
||||||
import VerticalEllipsis from "../../../assets/svg/16x24-bounds-8x16-icon/vertical-ellipsis.svg";
|
import VerticalEllipsis from "../../../assets/svg/16x24-bounds-8x16-icon/vertical-ellipsis.svg";
|
||||||
|
import CloseX from "../../../assets/svg/16x16-bounds-12x12-icon/close-x.svg";
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components: {
|
components: {
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,7 @@
|
||||||
<LayoutCol class="dockable-grid-resize-gutter"></LayoutCol>
|
<LayoutCol class="dockable-grid-resize-gutter"></LayoutCol>
|
||||||
<LayoutCol class="dockable-grid-subdivision" style="flex-grow: 319;">
|
<LayoutCol class="dockable-grid-subdivision" style="flex-grow: 319;">
|
||||||
<LayoutRow class="dockable-grid-subdivision">
|
<LayoutRow class="dockable-grid-subdivision">
|
||||||
<DockablePanel :panelType="'Properties'" :tabLabels="['Properties', 'Typography', 'Colors']" :tabActiveIndex="0" />
|
<DockablePanel :panelType="'Properties'" :tabLabels="['Properties', 'Spreadsheet', 'Palettes']" :tabActiveIndex="0" />
|
||||||
</LayoutRow>
|
</LayoutRow>
|
||||||
<LayoutRow class="dockable-grid-resize-gutter"></LayoutRow>
|
<LayoutRow class="dockable-grid-resize-gutter"></LayoutRow>
|
||||||
<LayoutRow class="dockable-grid-subdivision">
|
<LayoutRow class="dockable-grid-subdivision">
|
||||||
|
|
@ -14,7 +14,7 @@
|
||||||
</LayoutRow>
|
</LayoutRow>
|
||||||
<LayoutRow class="dockable-grid-resize-gutter"></LayoutRow>
|
<LayoutRow class="dockable-grid-resize-gutter"></LayoutRow>
|
||||||
<LayoutRow class="dockable-grid-subdivision" style="flex-grow: 0; height: 0;">
|
<LayoutRow class="dockable-grid-subdivision" style="flex-grow: 0; height: 0;">
|
||||||
<DockablePanel :panelType="'Minimap'" :tabLabels="['Minimap', 'Brushes', 'Links']" :tabActiveIndex="0" />
|
<DockablePanel :panelType="'Minimap'" :tabLabels="['Minimap', 'Asset Manager']" :tabActiveIndex="0" />
|
||||||
</LayoutRow>
|
</LayoutRow>
|
||||||
</LayoutCol>
|
</LayoutCol>
|
||||||
</LayoutRow>
|
</LayoutRow>
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,16 @@
|
||||||
{{inputKey}}
|
{{inputKey}}
|
||||||
</span>
|
</span>
|
||||||
<span class="input-mouse" v-if="inputMouse">
|
<span class="input-mouse" v-if="inputMouse">
|
||||||
<svg width="16" height="16" viewBox="0 0 16 16" v-html="getMouseIconInnerSVG"></svg>
|
<MouseHintNone v-if="inputMouse === MouseInputInteraction.None" width="16" height="16" />
|
||||||
|
<MouseHintLMB v-if="inputMouse === MouseInputInteraction.LMB" width="16" height="16" />
|
||||||
|
<MouseHintRMB v-if="inputMouse === MouseInputInteraction.RMB" width="16" height="16" />
|
||||||
|
<MouseHintMMB v-if="inputMouse === MouseInputInteraction.MMB" width="16" height="16" />
|
||||||
|
<MouseHintScrollUp v-if="inputMouse === MouseInputInteraction.ScrollUp" width="16" height="16" />
|
||||||
|
<MouseHintScrollDown v-if="inputMouse === MouseInputInteraction.ScrollDown" width="16" height="16" />
|
||||||
|
<MouseHintDrag v-if="inputMouse === MouseInputInteraction.Drag" width="16" height="16" />
|
||||||
|
<MouseHintLMBDrag v-if="inputMouse === MouseInputInteraction.LMBDrag" width="16" height="16" />
|
||||||
|
<MouseHintRMBDrag v-if="inputMouse === MouseInputInteraction.RMBDrag" width="16" height="16" />
|
||||||
|
<MouseHintMMBDrag v-if="inputMouse === MouseInputInteraction.MMBDrag" width="16" height="16" />
|
||||||
</span>
|
</span>
|
||||||
<span class="hint-text">
|
<span class="hint-text">
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
|
|
@ -75,6 +84,16 @@
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent } from "vue";
|
import { defineComponent } from "vue";
|
||||||
|
import MouseHintNone from "../../../../assets/svg/16x16-bounds-16x16-icon/mouse-hint-none.svg";
|
||||||
|
import MouseHintLMB from "../../../../assets/svg/16x16-bounds-16x16-icon/mouse-hint-lmb.svg";
|
||||||
|
import MouseHintRMB from "../../../../assets/svg/16x16-bounds-16x16-icon/mouse-hint-rmb.svg";
|
||||||
|
import MouseHintMMB from "../../../../assets/svg/16x16-bounds-16x16-icon/mouse-hint-mmb.svg";
|
||||||
|
import MouseHintScrollUp from "../../../../assets/svg/16x16-bounds-16x16-icon/mouse-hint-scroll-up.svg";
|
||||||
|
import MouseHintScrollDown from "../../../../assets/svg/16x16-bounds-16x16-icon/mouse-hint-scroll-down.svg";
|
||||||
|
import MouseHintDrag from "../../../../assets/svg/16x16-bounds-16x16-icon/mouse-hint-drag.svg";
|
||||||
|
import MouseHintLMBDrag from "../../../../assets/svg/16x16-bounds-16x16-icon/mouse-hint-lmb-drag.svg";
|
||||||
|
import MouseHintRMBDrag from "../../../../assets/svg/16x16-bounds-16x16-icon/mouse-hint-rmb-drag.svg";
|
||||||
|
import MouseHintMMBDrag from "../../../../assets/svg/16x16-bounds-16x16-icon/mouse-hint-mmb-drag.svg";
|
||||||
|
|
||||||
export enum MouseInputInteraction {
|
export enum MouseInputInteraction {
|
||||||
"None" = "None",
|
"None" = "None",
|
||||||
|
|
@ -90,6 +109,18 @@ export enum MouseInputInteraction {
|
||||||
}
|
}
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
|
components: {
|
||||||
|
MouseHintNone,
|
||||||
|
MouseHintLMB,
|
||||||
|
MouseHintRMB,
|
||||||
|
MouseHintMMB,
|
||||||
|
MouseHintScrollUp,
|
||||||
|
MouseHintScrollDown,
|
||||||
|
MouseHintDrag,
|
||||||
|
MouseHintLMBDrag,
|
||||||
|
MouseHintRMBDrag,
|
||||||
|
MouseHintMMBDrag,
|
||||||
|
},
|
||||||
props: {
|
props: {
|
||||||
inputKeys: { type: Array, default: () => [] },
|
inputKeys: { type: Array, default: () => [] },
|
||||||
inputMouse: { type: String },
|
inputMouse: { type: String },
|
||||||
|
|
@ -99,70 +130,10 @@ export default defineComponent({
|
||||||
return `width-${keyText.length * 8 + 8}`;
|
return `width-${keyText.length * 8 + 8}`;
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
computed: {
|
data() {
|
||||||
getMouseIconInnerSVG(): string {
|
return {
|
||||||
switch (this.inputMouse) {
|
MouseInputInteraction,
|
||||||
case MouseInputInteraction.None: return `
|
};
|
||||||
<path class="dim" d="M9,7c0,0.55-0.45,1-1,1l0,0C7.45,8,7,7.55,7,7V4.5c0-0.55,0.45-1,1-1l0,0c0.55,0,1,0.45,1,1V7z" />
|
|
||||||
<path class="dim" d="M10,2c1.1,0,2,0.9,2,2v6c0,2.21-1.79,4-4,4s-4-1.79-4-4V4c0-1.1,0.9-2,2-2H10 M10,1H6
|
|
||||||
C4.35,1,3,2.35,3,4v6c0,2.76,2.24,5,5,5s5-2.24,5-5V4C13,2.35,11.65,1,10,1L10,1z" />`;
|
|
||||||
case MouseInputInteraction.LMB: return `
|
|
||||||
<path class="bright" d="M8,1H6C4.35,1,3,2.35,3,4v4h5V1z" />
|
|
||||||
<path class="dim" d="M10,1H9v1h1c1.1,0,2,0.9,2,2v6c0,2.21-1.79,4-4,4s-4-1.79-4-4V9H3v1c0,2.76,2.24,5,5,5s5-2.24,5-5V4
|
|
||||||
C13,2.35,11.65,1,10,1z" />`;
|
|
||||||
case MouseInputInteraction.RMB: return `
|
|
||||||
<path class="dim" d="M8,1h2c1.65,0,3,1.35,3,3v4H8V1z" />
|
|
||||||
<path class="bright" d="M6,1h1v1H6C4.9,2,4,2.9,4,4v6c0,2.21,1.79,4,4,4s4-1.79,4-4V9h1v1c0,2.76-2.24,5-5,5s-5-2.24-5-5V4
|
|
||||||
C3,2.35,4.35,1,6,1z" />`;
|
|
||||||
case MouseInputInteraction.MMB: return `
|
|
||||||
<path class="bright" d="M9,7c0,0.55-0.45,1-1,1l0,0C7.45,8,7,7.55,7,7V4.5c0-0.55,0.45-1,1-1l0,0c0.55,0,1,0.45,1,1V7z" />
|
|
||||||
<path class="dim" d="M10,2c1.1,0,2,0.9,2,2v6c0,2.21-1.79,4-4,4s-4-1.79-4-4V4c0-1.1,0.9-2,2-2H10 M10,1H6
|
|
||||||
C4.35,1,3,2.35,3,4v6c0,2.76,2.24,5,5,5s5-2.24,5-5V4C13,2.35,11.65,1,10,1L10,1z" />`;
|
|
||||||
case MouseInputInteraction.ScrollUp: return `
|
|
||||||
<polygon class="bright" points="10.5,4 8,2 5.5,4 5.5,2 8,0 10.5,2" />
|
|
||||||
<polygon class="bright" points="10.5,8 8,6 5.5,8 5.5,6 8,4 10.5,6" />
|
|
||||||
<path class="dim" d="M11.5,1.42v1.28C11.8,3.06,12,3.5,12,4v6c0,2.21-1.79,4-4,4s-4-1.79-4-4V4c0-0.5,0.2-0.94,0.5-1.29
|
|
||||||
V1.42C3.61,1.94,3,2.9,3,4v6c0,2.76,2.24,5,5,5s5-2.24,5-5V4C13,2.9,12.39,1.94,11.5,1.42z" />`;
|
|
||||||
case MouseInputInteraction.ScrollDown: return `
|
|
||||||
<polygon class="bright" points="5.5,4 8,6 10.5,4 10.5,6 8,8 5.5,6" />
|
|
||||||
<polygon class="bright" points="5.5,0 8,2 10.5,0 10.5,2 8,4 5.5,2" />
|
|
||||||
<path class="dim" d="M11.5,1.42v1.28C11.8,3.06,12,3.5,12,4v6c0,2.21-1.79,4-4,4s-4-1.79-4-4V4c0-0.5,0.2-0.94,0.5-1.29
|
|
||||||
V1.42C3.61,1.94,3,2.9,3,4v6c0,2.76,2.24,5,5,5s5-2.24,5-5V4C13,2.9,12.39,1.94,11.5,1.42z" />`;
|
|
||||||
case MouseInputInteraction.Drag: return `
|
|
||||||
<path class="dim" d="M8,7c0,0.55-0.45,1-1,1l0,0C6.45,8,6,7.55,6,7V4.5c0-0.55,0.45-1,1-1l0,0c0.55,0,1,0.45,1,1V7z" />
|
|
||||||
<path class="bright" d="M11,16c-0.18,0-0.36-0.1-0.45-0.28c-0.12-0.25-0.02-0.55,0.22-0.67C10.87,15.01,13,13.88,13,11V6
|
|
||||||
c0-0.28,0.22-0.5,0.5-0.5S14,5.72,14,6v5c0,3.52-2.66,4.89-2.78,4.95C11.15,15.98,11.08,16,11,16z" />
|
|
||||||
<path class="bright" d="M14.5,15c-0.13,0-0.26-0.05-0.35-0.15c-0.19-0.19-0.2-0.51,0-0.7C14.17,14.12,15,13.2,15,11V8
|
|
||||||
c0-0.28,0.22-0.5,0.5-0.5S16,7.72,16,8v3c0,2.68-1.1,3.81-1.15,3.85C14.76,14.95,14.63,15,14.5,15z" />
|
|
||||||
<path class="dim" d="M9,2c1.1,0,2,0.9,2,2v6c0,2.21-1.79,4-4,4s-4-1.79-4-4V4c0-1.1,0.9-2,2-2H9 M9,1H5C3.35,1,2,2.35,2,4
|
|
||||||
v6c0,2.76,2.24,5,5,5s5-2.24,5-5V4C12,2.35,10.65,1,9,1L9,1z" />`;
|
|
||||||
case MouseInputInteraction.LMBDrag: return `
|
|
||||||
<path class="bright" d="M11,16c-0.18,0-0.36-0.1-0.45-0.28c-0.12-0.25-0.02-0.55,0.22-0.67C10.87,15.01,13,13.88,13,11V6
|
|
||||||
c0-0.28,0.22-0.5,0.5-0.5S14,5.72,14,6v5c0,3.52-2.66,4.89-2.78,4.95C11.15,15.98,11.08,16,11,16z" />
|
|
||||||
<path class="bright" d="M14.5,15c-0.13,0-0.26-0.05-0.35-0.15c-0.19-0.19-0.2-0.51,0-0.7C14.17,14.12,15,13.2,15,11V8
|
|
||||||
c0-0.28,0.22-0.5,0.5-0.5S16,7.72,16,8v3c0,2.68-1.1,3.81-1.15,3.85C14.76,14.95,14.63,15,14.5,15z" />
|
|
||||||
<path class="bright" d="M7,1H5C3.35,1,2,2.35,2,4v4h5V1z" />
|
|
||||||
<path class="dim" d="M9,1H8v1h1c1.1,0,2,0.9,2,2v6c0,2.21-1.79,4-4,4s-4-1.79-4-4V9H2v1c0,2.76,2.24,5,5,5s5-2.24,5-5V4
|
|
||||||
C12,2.35,10.65,1,9,1z" />`;
|
|
||||||
case MouseInputInteraction.RMBDrag: return `
|
|
||||||
<path class="bright" d="M11,16c-0.18,0-0.36-0.1-0.45-0.28c-0.12-0.25-0.02-0.55,0.22-0.67C10.87,15.01,13,13.88,13,11V6
|
|
||||||
c0-0.28,0.22-0.5,0.5-0.5S14,5.72,14,6v5c0,3.52-2.66,4.89-2.78,4.95C11.15,15.98,11.08,16,11,16z" />
|
|
||||||
<path class="bright" d="M14.5,15c-0.13,0-0.26-0.05-0.35-0.15c-0.19-0.19-0.2-0.51,0-0.7C14.17,14.12,15,13.2,15,11V8
|
|
||||||
c0-0.28,0.22-0.5,0.5-0.5S16,7.72,16,8v3c0,2.68-1.1,3.81-1.15,3.85C14.76,14.95,14.63,15,14.5,15z" />
|
|
||||||
<path class="bright" d="M7,1h2c1.65,0,3,1.35,3,3v4H7V1z" />
|
|
||||||
<path class="dim" d="M5,1h1v1H5C3.9,2,3,2.9,3,4v6c0,2.21,1.79,4,4,4s4-1.79,4-4V9h1v1c0,2.76-2.24,5-5,5s-5-2.24-5-5V4
|
|
||||||
C2,2.35,3.35,1,5,1z" />`;
|
|
||||||
case MouseInputInteraction.MMBDrag: return `
|
|
||||||
<path class="bright" d="M8,7c0,0.55-0.45,1-1,1l0,0C6.45,8,6,7.55,6,7V4.5c0-0.55,0.45-1,1-1l0,0c0.55,0,1,0.45,1,1V7z" />
|
|
||||||
<path class="bright" d="M11,16c-0.18,0-0.36-0.1-0.45-0.28c-0.12-0.25-0.02-0.55,0.22-0.67C10.87,15.01,13,13.88,13,11V6
|
|
||||||
c0-0.28,0.22-0.5,0.5-0.5S14,5.72,14,6v5c0,3.52-2.66,4.89-2.78,4.95C11.15,15.98,11.08,16,11,16z" />
|
|
||||||
<path class="bright" d="M14.5,15c-0.13,0-0.26-0.05-0.35-0.15c-0.19-0.19-0.2-0.51,0-0.7C14.17,14.12,15,13.2,15,11V8
|
|
||||||
c0-0.28,0.22-0.5,0.5-0.5S16,7.72,16,8v3c0,2.68-1.1,3.81-1.15,3.85C14.76,14.95,14.63,15,14.5,15z" />
|
|
||||||
<path class="dim" d="M9,2c1.1,0,2,0.9,2,2v6c0,2.21-1.79,4-4,4s-4-1.79-4-4V4c0-1.1,0.9-2,2-2H9 M9,1H5C3.35,1,2,2.35,2,4
|
|
||||||
v6c0,2.76,2.24,5,5,5s5-2.24,5-5V4C12,2.35,10.65,1,9,1L9,1z" />`;
|
|
||||||
default: return "";
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -1,17 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="entry">
|
<div class="entry">
|
||||||
<svg width="16" height="16" viewBox="0 0 16 16">
|
<GraphiteLogo width="16" height="16" />
|
||||||
<path d="M5.5,10.2c0.1,0.2,0,0.3-0.1,0.4c-0.2,0.1-0.3,0-0.4-0.1c0,0,0,0,0,0L2.7,6.7c-0.1-0.2,0-0.3,0.1-0.4c0.2-0.1,0.3,0,0.4,0.1
|
|
||||||
L5.5,10.2z M14.9,14.9L14.9,14.9C14.9,14.9,14.9,15,14.9,14.9C14.8,15,14.8,15,14.9,14.9L14.9,14.9c-0.5,0.2-1,0.4-1.5,0.5
|
|
||||||
c-0.5,0.1-1.1,0.2-1.6,0.2c-0.5,0.1-1.1,0.1-1.6,0c-0.5,0-1.1-0.1-1.6-0.1l-1.6-0.1c-1.7,0-3.9-0.1-4.4-0.1s-1.1-0.2-1.1-0.3
|
|
||||||
c0-0.1,0.3-0.2,0.6-0.2c0.5-0.1,1.1-0.2,1.7-0.3c0.6-0.1,2-0.2,4.1-0.2c0.8,0,1.8,0,1.8,0c0.6,0,1,0,1.9,0c0.7,0,1.1,0,1.2,0
|
|
||||||
c0.3,0,0.6,0.1,0.9,0.2l-2.6-1.9c-0.2,0.1-0.4,0.2-0.7,0.2H4.5c-0.5,0-0.9-0.2-1.1-0.6l-2.9-5c-0.2-0.4-0.2-0.9,0-1.3l2.9-5
|
|
||||||
C3.6,0.5,4,0.3,4.5,0.3h5.8c0.5,0,0.9,0.2,1.1,0.6l2.9,5l0,0l0,0c0,0.1,0.1,0.2,0.1,0.3c0,0,0,0.1,0,0.1c0,0.1,0,0.1,0,0.2
|
|
||||||
c0,0,0.7,7.2,0.7,7.8v0C15.2,14.6,15.1,14.8,14.9,14.9L14.9,14.9z M4.3,1.9L4.2,2l3.6,6.2c0.4-0.1,0.9-0.2,1.4-0.2l0.9-1.3l1.6-0.2
|
|
||||||
c0.2-0.4,0.5-0.8,0.8-1.1l-2.1-3.7c-0.1-0.2-0.3-0.3-0.5-0.3H4.8C4.6,1.6,4.4,1.7,4.3,1.9z M9.4,11.6l-2-1.4C7.4,10.1,7.3,10,7.3,10
|
|
||||||
l0,0L3.5,3.3l-1.7,3c-0.1,0.2-0.1,0.4,0,0.6l2.6,4.5c0.1,0.2,0.3,0.3,0.5,0.3L9.4,11.6z M13.5,11.3l-0.5-4.6c-0.3,0.3-0.5,0.7-0.7,1
|
|
||||||
l-1.6,0.2L9.8,9.2c-0.4,0-0.8,0-1.3,0.1l3.7,2.7C12.5,11.6,13,11.3,13.5,11.3L13.5,11.3z" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="entry"><span>File</span></div>
|
<div class="entry"><span>File</span></div>
|
||||||
<div class="entry"><span>Edit</span></div>
|
<div class="entry"><span>Edit</span></div>
|
||||||
|
|
@ -48,8 +37,10 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent } from "vue";
|
import { defineComponent } from "vue";
|
||||||
import { ApplicationPlatform } from "../MainWindow.vue";
|
import { ApplicationPlatform } from "../MainWindow.vue";
|
||||||
|
import GraphiteLogo from "../../../../assets/svg/16x16-bounds-16x16-icon/graphite-logo.svg";
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
|
components: { GraphiteLogo },
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
ApplicationPlatform,
|
ApplicationPlatform,
|
||||||
|
|
|
||||||
|
|
@ -1,23 +1,15 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="windows window-button minimize" title="Minimize">
|
<div class="windows window-button minimize" title="Minimize">
|
||||||
<svg width="10" height="10" viewBox="0 0 10 10">
|
<WindowButtonWinMinimize width="10" height="10" />
|
||||||
<rect y="4" width="10" height="1" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="windows window-button maximize" title="Maximize" v-if="!maximized">
|
<div class="windows window-button maximize" title="Maximize" v-if="!maximized">
|
||||||
<svg width="10" height="10" viewBox="0 0 10 10">
|
<WindowButtonWinMaximize width="10" height="10" />
|
||||||
<path d="M10,0v10H0V0H10z M9,1H1v8h8V1z" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="windows window-button restore-down" title="Restore Down" v-if="maximized">
|
<div class="windows window-button restore-down" title="Restore Down" v-if="maximized">
|
||||||
<svg width="10" height="10" viewBox="0 0 10 10">
|
<WindowButtonWinRestoreDown width="10" height="10" />
|
||||||
<path d="M10,8H8v2H0V2h2V0h8V8z M7,3H1v6h6V3z M9,1H3v1h5v5h1V1z" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="windows window-button close" title="Close">
|
<div class="windows window-button close" title="Close">
|
||||||
<svg width="10" height="10" viewBox="0 0 10 10">
|
<WindowButtonWinClose width="10" height="10" />
|
||||||
<polygon points="10,0.7 9.3,0 5,4.3 0.7,0 0,0.7 4.3,5 0,9.3 0.7,10 5,5.7 9.3,10 10,9.3 5.7,5" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -47,8 +39,18 @@
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent } from "vue";
|
import { defineComponent } from "vue";
|
||||||
|
import WindowButtonWinMinimize from "../../../../assets/svg/10x10-bounds-10x10-icon/window-button-win-minimize.svg";
|
||||||
|
import WindowButtonWinMaximize from "../../../../assets/svg/10x10-bounds-10x10-icon/window-button-win-maximize.svg";
|
||||||
|
import WindowButtonWinRestoreDown from "../../../../assets/svg/10x10-bounds-10x10-icon/window-button-win-restore-down.svg";
|
||||||
|
import WindowButtonWinClose from "../../../../assets/svg/10x10-bounds-10x10-icon/window-button-win-close.svg";
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
|
components: {
|
||||||
|
WindowButtonWinMinimize,
|
||||||
|
WindowButtonWinMaximize,
|
||||||
|
WindowButtonWinRestoreDown,
|
||||||
|
WindowButtonWinClose,
|
||||||
|
},
|
||||||
props: {
|
props: {
|
||||||
maximized: { type: Boolean, default: false },
|
maximized: { type: Boolean, default: false },
|
||||||
},
|
},
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue