Clean up popovers: background color and placeholder text

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

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" />

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'">

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;
}

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: {},
},

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">