@@ -88,26 +86,8 @@
line-height: 28px;
}
- button {
- flex: 0 0 auto;
- outline: none;
- border: none;
- padding: 0;
- width: 16px;
- height: 16px;
- background: none;
- color: #ddd;
- font-weight: bold;
- font-size: 10px;
- border-radius: 2px;
+ .icon-button {
margin-left: 8px;
- fill: #ddd;
-
- &:hover {
- background: #555;
- color: white;
- fill: white;
- }
}
&:not(.active) + .tab:not(.active) {
@@ -137,24 +117,6 @@
}
}
}
-
- .panel-options-ellipsis {
- width: 16px;
- height: 24px;
- margin: 2px 4px;
-
- svg {
- width: 16px;
- height: 24px;
- border-radius: 2px;
- fill: #ddd;
- }
-
- &:hover svg {
- background: #555;
- fill: #fff;
- }
- }
}
.panel-content {
@@ -170,6 +132,8 @@ import Document from "../panels/Document.vue";
import Properties from "../panels/Properties.vue";
import LayerTree from "../panels/LayerTree.vue";
import Minimap from "../panels/Minimap.vue";
+import IconButton from "../widgets/IconButton.vue";
+import DropdownButton, { DropdownButtonIcon } from "../widgets/DropdownButton.vue";
import VerticalEllipsis from "../../../assets/svg/16x24-bounds-8x16-icon/vertical-ellipsis.svg";
import CloseX from "../../../assets/svg/16x16-bounds-12x12-icon/close-x.svg";
@@ -179,6 +143,8 @@ export default defineComponent({
Properties,
LayerTree,
Minimap,
+ IconButton,
+ DropdownButton,
CloseX,
VerticalEllipsis,
},
@@ -189,5 +155,10 @@ export default defineComponent({
tabActiveIndex: { type: Number, required: true },
panelType: { type: String, required: true },
},
+ data() {
+ return {
+ DropdownButtonIcon,
+ };
+ },
});
diff --git a/client/web/src/components/panels/Document.vue b/client/web/src/components/panels/Document.vue
index 7daf5cd4..fcbfdbd5 100644
--- a/client/web/src/components/panels/Document.vue
+++ b/client/web/src/components/panels/Document.vue
@@ -2,16 +2,154 @@
-
+
Select
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
+
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
* {
- margin: 0 4px;
- }
+ margin: 0 8px;
.label {
white-space: nowrap;
font-weight: bold;
}
-
- .divider {
- width: 1px;
- height: 24px;
- background: #888;
- }
- }
-
- .spacer {
- flex: 1 1 100%;
}
}
.shelf-and-viewport {
.shelf {
flex: 0 0 32px;
+
+ .swatch-pair {
+ display: flex;
+ // Reversed order of elements paired with `column-reverse` allows primary to overlap secondary without relying on `z-index`
+ flex-direction: column-reverse;
+ }
+
+ .working-colors {
+ .swatch {
+ width: 24px;
+ height: 24px;
+ border-radius: 50%;
+ border: 2px #888 solid;
+ box-shadow: 0 0 0 2px #333;
+ margin: 2px;
+ padding: 0;
+ box-sizing: unset;
+ outline: none;
+ }
+
+ .primary.swatch {
+ margin-bottom: -8px;
+ }
+ }
+
+ .swap-and-reset {
+ font-size: 0;
+ }
}
.viewport {
@@ -82,12 +234,57 @@
}
}
}
+
+// The `where` pseduo-class does not contribtue to specificity
+:where(.document .options-bar .side > :not(:first-child)) {
+ margin-left: 8px;
+}
diff --git a/client/web/src/components/widgets/DropdownButton.vue b/client/web/src/components/widgets/DropdownButton.vue
new file mode 100644
index 00000000..be837551
--- /dev/null
+++ b/client/web/src/components/widgets/DropdownButton.vue
@@ -0,0 +1,45 @@
+
+
+
+
+
+
+
diff --git a/client/web/src/components/widgets/IconButton.vue b/client/web/src/components/widgets/IconButton.vue
new file mode 100644
index 00000000..c9dcadef
--- /dev/null
+++ b/client/web/src/components/widgets/IconButton.vue
@@ -0,0 +1,64 @@
+
+
+
+
+
+
+
diff --git a/client/web/src/components/widgets/ItemDivider.vue b/client/web/src/components/widgets/ItemDivider.vue
new file mode 100644
index 00000000..26c476de
--- /dev/null
+++ b/client/web/src/components/widgets/ItemDivider.vue
@@ -0,0 +1,51 @@
+
+
+
+
+
+
+
diff --git a/client/web/src/components/widgets/ShelfItem.vue b/client/web/src/components/widgets/ShelfItem.vue
new file mode 100644
index 00000000..3c7fcb0c
--- /dev/null
+++ b/client/web/src/components/widgets/ShelfItem.vue
@@ -0,0 +1,35 @@
+
+
+
+
+
+
+
+
+
diff --git a/client/web/wasm/src/wrappers.rs b/client/web/wasm/src/wrappers.rs
index c8e96ce9..db11011f 100644
--- a/client/web/wasm/src/wrappers.rs
+++ b/client/web/wasm/src/wrappers.rs
@@ -54,6 +54,7 @@ pub fn translate_key(name: &str) -> events::Key {
use events::Key as K;
match name {
"e" => K::KeyE,
+ "v" => K::KeyV,
"r" => K::KeyR,
"m" => K::KeyM,
"x" => K::KeyX,
diff --git a/core/editor/src/dispatcher/events.rs b/core/editor/src/dispatcher/events.rs
index a50e6863..11faaff6 100644
--- a/core/editor/src/dispatcher/events.rs
+++ b/core/editor/src/dispatcher/events.rs
@@ -94,6 +94,7 @@ pub enum Key {
KeyR,
KeyM,
KeyE,
+ KeyV,
KeyX,
Key0,
Key1,
diff --git a/core/editor/src/dispatcher/mod.rs b/core/editor/src/dispatcher/mod.rs
index 80ed1964..9f87c498 100644
--- a/core/editor/src/dispatcher/mod.rs
+++ b/core/editor/src/dispatcher/mod.rs
@@ -62,6 +62,9 @@ impl Dispatcher {
Key::KeyE => {
editor_state.tool_state.active_tool_type = ToolType::Ellipse;
}
+ Key::KeyV => {
+ editor_state.tool_state.active_tool_type = ToolType::Select;
+ }
Key::KeyX => {
editor_state.tool_state.swap_colors();
}