mirrors/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2025-07-08 00:05:00 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Add basic layouts for XML-based GUI system

Browse source
This commit is contained in:
Keavon Chambers 2020-05-24 21:22:16 -07:00
parent e72ab7b000
commit 474b2b39f9
12 changed files with 124 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

3
gui/box.xml Normal file
View file

@ -0,0 +1,3 @@
<box content="INNER_XML" :fill="FILL = none" :round="ROUND = 0px" :border-thickness="BORDER_THICKNESS = 0px" :border-color="BORDER_COLOR = none">
{{INNER_XML}}
</box>

3
gui/col.xml Normal file
View file

@ -0,0 +1,3 @@
<col content="INNER_XML">
{{INNER_XML}}
</col>

20
gui/header/file-menu.xml Normal file
View file

@ -0,0 +1,20 @@
<header.file-menu>
<box height="100%" x-padding="10px">
<text height="100%" y-align="0.5" :color="mildwhite">፨</text>
</box>
<box height="100%" x-padding="10px">
<text height="100%" y-align="0.5" :color="mildwhite">File</text>
</box>
<box height="100%" x-padding="10px">
<text height="100%" y-align="0.5" :color="mildwhite">Edit</text>
</box>
<box height="100%" x-padding="10px">
<text height="100%" y-align="0.5" :color="mildwhite">Comp</text>
</box>
<box height="100%" x-padding="10px">
<text height="100%" y-align="0.5" :color="mildwhite">View</text>
</box>
<box height="100%" x-padding="10px">
<text height="100%" y-align="0.5" :color="mildwhite">Help</text>
</box>
</header.file-menu>

16
gui/header/window-buttons.xml Normal file
View file

@ -0,0 +1,16 @@
<header.window-buttons :maximized="IS_MAXIMIZED">
<box height="100%" y-align="0.5" x-padding="18px">
<icon :src="window_minimize.svg" />
</box>
<box height="100%" y-align="0.5" x-padding="18px">
<if :a="{{IS_MAXIMIZED}}">
<icon :src="window_restore_down.svg" />
</if>
<if :a="{{IS_MAXIMIZED}}" b="false">
<icon :src="maximize.svg" />
</if>
</box>
<box height="100%" y-align="0.5" x-padding="18px">
<icon :src="window_close.svg" />
</box>
</header.window-buttons>

3
gui/icon.xml Normal file
View file

@ -0,0 +1,3 @@
<icon content="SVG_DATA" :src="SVG_SOURCE = none">
</icon>

12
gui/input/checkbox-with-dropdown.xml Normal file
View file

@ -0,0 +1,12 @@
<input.checkbox-with-dropdown content="OPTION_LIST" :disabled="DISABLED = false" :checked="CHECKED = false" :default="DEFAULT = 0">
<!-- Checkbox -->
<col width="height" height="100%">
<box width="100%" height="100%" x-align="0.5" y-align="0.5" :fill="[accent]">
<input.checkbox :checked="{{CHECKED}}" :disabled="{{DISABLED}}" :inverted="true" />
</box>
</col>
<!-- Dropdown -->
<col width="100%">
<input.dropdown width="100%" :default="{{DEFAULT}}" :disabled="{{DISABLED}}">{{OPTION_LIST}}</input.dropdown>
</col>
</input.checkbox-with-dropdown>

20
gui/input/checkbox.xml Normal file
View file

@ -0,0 +1,20 @@
<input.checkbox :checked="CHECKED = false" :disabled="DISABLED = false" :inverted="INVERTED = false">
<box width="14px" height="14px" :fill="{{BOX_COLOR}}" :round="2px">
<if :a="{{CHECKED}}">
<if :a="{{INVERTED}}" :b="false">
<icon>
<svg width="12.84px" height="11.59px" viewBox="0 0 12.84 11.59">
<polygon points="5.53,11.59 0,6.67 1.66,4.8 5.13,7.88 10.82,0 12.84,1.46" fill="#ffffff" />
</svg>
</icon>
</if>
<if :a="{{INVERTED}}">
<icon>
<svg width="12.84px" height="11.59px" viewBox="0 0 12.84 11.59">
<polygon points="5.53,11.59 0,6.67 1.66,4.8 5.13,7.88 10.82,0 12.84,1.46" fill="#4b79a7" />
</svg>
</icon>
</if>
</if>
</box>
</input.checkbox>

16
gui/input/dropdown.xml Normal file
View file

@ -0,0 +1,16 @@
<input.dropdown content="OPTION_LIST" :default="DEFAULT = 0" :disabled="DISABLED = false">
<box width="100%" :round="4px">
<!-- Current selection text -->
<col width="100%" height="24px">
<text width="100%" height="100%" x-align="0.5" y-align="0.5" :color="mildwhite">{{CURRENT_TEXT}}</text>
</col>
<!-- Dropdown arrow icon -->
<col width="8px" height="100%">
<icon width="8px" height="100%" x-align="0.5" y-align="0.5">
<svg width="7" height="5" viewBox="0 0 7 5">
<path d="M0,.5l3.5,3L7,.5v2l-3.5,3L0,2.5Z" transform="translate(0 -0.5)" fill="#ddd" />
</svg>
</icon>
</col>
</box>
</input.dropdown>

3
gui/row.xml Normal file
View file

@ -0,0 +1,3 @@
<row content="INNER_XML">
{{INNER_XML}}
</row>

3
gui/text.xml Normal file
View file

@ -0,0 +1,3 @@
<text content="TEXT_STRING" :color="COLOR = [middlegray]" :size="SIZE = 12px">
</text>

7
gui/viewport/panels.xml Normal file
View file

@ -0,0 +1,7 @@
<viewport.panels>
<checkbox-with-dropdown :checked="true" :default="2">
<dropdown-option>Option A</dropdown-option>
<dropdown-option>Option B</dropdown-option>
<dropdown-option>Option C</dropdown-option>
</checkbox-with-dropdown>
</viewport.panels>

18
gui/window/main.xml Normal file
View file

@ -0,0 +1,18 @@
<!-- Called as <window.main width="1920px" height="1080px" /> -->
<window.main>
<!-- Header -->
<row width="100%" height="28px">
<header.file-menu height="100%" x-align="0" />
<text height="100%" y-align="0.5" x-align="0.5" :color="mildwhite">Document 1* - Graphite</text>
<header.window-buttons height="100%" x-align="1" />
</row>
<!-- Viewport -->
<row width="100%" height="100@">
<viewport.panels />
</row>
<!-- Footer -->
<row width="100%" height="24px">
<text height="100%" y-align="0.5" x-align="0" x-padding="10px" :color="mildwhite" :size="14px">File: 1.8 MB | Memory: 137 MB | Scratch: 0.7/12.3 GB</text>
<text height="100%" y-align="0.5" x-align="1" x-padding="10px" :color="mildwhite" :size="14px">🖰 Box Select Objects | [⇧G] Move Selection | [⇧R] Rotate Selection | [⇧S] Scale Selection</text>
</row>
</window.main>