mirrors/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2025-12-23 10:11:54 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Clean up popovers: background color and placeholder text

Browse source
This commit is contained in:
Keavon Chambers 2021-08-11 23:53:05 -07:00
parent b184f2c974
commit 483f7d5893
6 changed files with 18 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

10
frontend/src/App.vue
View file

@ -19,6 +19,8 @@
<style lang="scss">
:root {
// Replace usage of `-rgb` variants with CSS color() function to calculate alpha when browsers support it
// See https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color() and https://caniuse.com/css-color-function
--color-0-black: #000;
--color-0-black-rgb: 0, 0, 0;
--color-1-nearblack: #111;
@ -57,12 +59,6 @@
--color-accent-hover-rgb: 73, 165, 226;
--color-accent-disabled: #416277;
--color-accent-disabled-rgb: 65, 98, 119;
// TODO: Replace with CSS color() function to calculate alpha when browsers support it
// See https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color() and https://caniuse.com/css-color-function
// F2 = 95% alpha
--floating-menu-opacity-color-2-mildblack: #222222f2;
--floating-menu-shadow: rgba(0, 0, 0, 50%);
}
html,
@ -186,7 +182,7 @@ img {
.unsupported-modal {
background: var(--color-3-darkgray);
border-radius: 4px;
box-shadow: 2px 2px 5px 0 var(--floating-menu-shadow);
box-shadow: 2px 2px 5px 0 rgba(var(--color-0-black-rgb), 50%);
padding: 0 16px 16px 16px;
border: 1px solid var(--color-4-dimgray);
max-width: 500px;

8
frontend/src/components/panels/Document.vue
View file

@ -13,7 +13,7 @@
<OptionalInput v-model:checked="snappingEnabled" @update:checked="comingSoon(200)" :icon="'Snapping'" title="Snapping" />
<PopoverButton>
<h3>Snapping</h3>
<p>More snapping options will be here</p>
<p>The contents of this popover menu are coming soon</p>
</PopoverButton>
<Separator :type="SeparatorType.Unrelated" />
@ -21,7 +21,7 @@
<OptionalInput v-model:checked="gridEnabled" @update:checked="comingSoon(318)" :icon="'Grid'" title="Grid" />
<PopoverButton>
<h3>Grid</h3>
<p>More grid options will be here</p>
<p>The contents of this popover menu are coming soon</p>
</PopoverButton>
<Separator :type="SeparatorType.Unrelated" />
@ -29,7 +29,7 @@
<OptionalInput v-model:checked="overlaysEnabled" @update:checked="comingSoon(99)" :icon="'Overlays'" title="Overlays" />
<PopoverButton>
<h3>Overlays</h3>
<p>More overlays options will be here</p>
<p>The contents of this popover menu are coming soon</p>
</PopoverButton>
<Separator :type="SeparatorType.Unrelated" />
@ -37,7 +37,7 @@
<RadioInput :entries="viewModeEntries" v-model:selectedIndex="viewModeIndex" />
<PopoverButton>
<h3>View Mode</h3>
<p>More view mode options will be here</p>
<p>The contents of this popover menu are coming soon</p>
</PopoverButton>
<Separator :type="SeparatorType.Section" />

2
frontend/src/components/panels/LayerTree.vue
View file

@ -11,7 +11,7 @@
<PopoverButton>
<h3>Compositing Options</h3>
<p>More blend and compositing options will be here</p>
<p>The contents of this popover menu are coming soon</p>
</PopoverButton>
</LayoutRow>
<LayoutRow :class="'layer-tree scrollable-y'">

12
frontend/src/components/widgets/floating-menus/FloatingMenu.vue
View file

@ -38,8 +38,8 @@
display: flex;
.floating-menu-content {
background: var(--floating-menu-opacity-color-2-mildblack);
box-shadow: var(--floating-menu-shadow) 0 2px 4px;
background: rgba(var(--color-2-mildblack-rgb), 0.95);
box-shadow: rgba(var(--color-0-black-rgb), 50%) 0 2px 4px;
border-radius: var(--floating-menu-content-border-radius);
color: var(--color-e-nearwhite);
font-size: inherit;
@ -128,28 +128,28 @@
&.top .tail {
border-width: 8px 6px 0 6px;
border-color: var(--floating-menu-opacity-color-2-mildblack) transparent transparent transparent;
border-color: rgba(var(--color-2-mildblack-rgb), 0.95) transparent transparent transparent;
margin-left: -6px;
margin-bottom: 2px;
}
&.bottom .tail {
border-width: 0 6px 8px 6px;
border-color: transparent transparent var(--floating-menu-opacity-color-2-mildblack) transparent;
border-color: transparent transparent rgba(var(--color-2-mildblack-rgb), 0.95) transparent;
margin-left: -6px;
margin-top: 2px;
}
&.left .tail {
border-width: 6px 0 6px 8px;
border-color: transparent transparent transparent var(--floating-menu-opacity-color-2-mildblack);
border-color: transparent transparent transparent rgba(var(--color-2-mildblack-rgb), 0.95);
margin-top: -6px;
margin-right: 2px;
}
&.right .tail {
border-width: 6px 8px 6px 0;
border-color: transparent var(--floating-menu-opacity-color-2-mildblack) transparent transparent;
border-color: transparent rgba(var(--color-2-mildblack-rgb), 0.95) transparent transparent;
margin-top: -6px;
margin-left: 2px;
}

6
frontend/src/components/widgets/options/ToolOptions.vue
View file

@ -87,7 +87,7 @@ export default defineComponent({
kind: "PopoverButton",
popover: {
title: "Align",
text: "More alignment-related buttons will be here",
text: "The contents of this popover menu are coming soon",
},
props: {},
},
@ -103,7 +103,7 @@ export default defineComponent({
kind: "PopoverButton",
popover: {
title: "Flip",
text: "More flip-related buttons will be here",
text: "The contents of this popover menu are coming soon",
},
props: {},
},
@ -122,7 +122,7 @@ export default defineComponent({
kind: "PopoverButton",
popover: {
title: "Boolean",
text: "More boolean-related buttons will be here",
text: "The contents of this popover menu are coming soon",
},
props: {},
},

2
frontend/src/components/workspace/Panel.vue
View file

@ -16,7 +16,7 @@
</div>
<PopoverButton :icon="PopoverButtonIcon.VerticalEllipsis">
<h3>Panel Options</h3>
<p>More panel-related options will be here</p>
<p>The contents of this popover menu are coming soon</p>
</PopoverButton>
</div>
<div class="panel-body">