better toolbar and polishing

Author: barelyhuman

src/components/button.vue

@@ -24,6 +24,7 @@ button {
 }
 
 button:hover {
+  cursor: pointer;
   background: var(--surface);
 }
 

src/components/menu-item.vue

@@ -24,10 +24,11 @@ defineProps({
   padding-bottom: 8px;
   font-size: 12px;
   text-transform: uppercase;
-  color:var(--subtle);
+  color: var(--subtle);
 }
 
 .item-wrapper:hover {
+  cursor: pointer;
   background: var(--surface);
 }
 

src/components/menu.vue

@@ -1,14 +1,10 @@
 <template>
   <div class="container">
-    <Button @click="state.dropdownOpen = !state.dropdownOpen" class="trigger">
+    <Button @click="state.dropdownOpen = !state.dropdownOpen" class="ghost trigger">
       {{ triggerLabel }}
     </Button>
 
-    <div
-      v-if="state.dropdownOpen"
-      class="dropdown"
-      @click="state.dropdownOpen = false"
-    ></div>
+    <div v-if="state.dropdownOpen" class="dropdown" @click="state.dropdownOpen = false"></div>
 
     <div v-if="state.dropdownOpen" class="dropdown-items">
       <slot></slot>
@@ -36,6 +32,7 @@ const state = reactive({ dropdownOpen: false });
 .trigger {
   position: relative;
 }
+
 .dropdown {
   position: fixed;
   height: 100vh;
@@ -46,12 +43,13 @@ const state = reactive({ dropdownOpen: false });
 .dropdown-items {
   position: absolute;
   left: 0;
+  bottom: calc(var(--toolbar-height) + 10px);
   margin-top: 8px;
   padding-top: 8px;
   padding-bottom: 8px;
-  width: 30em;
+  width: 15em;
   background: var(--overlay);
-  color:var(--subtle);
+  color: var(--subtle);
   border-radius: 12px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
   z-index: 20;

src/components/toolbar.vue

@@ -0,0 +1,6 @@
+<template>
+    <div class="toolbar">
+        <slot />
+    </div>
+</template>
+  

src/pages/Home.vue

@@ -2,36 +2,37 @@
   <BaseLayout>
     <Toast ref="toastRef" />
     <div class="flex justify-between mb-2">
-      <Menu triggerLabel="Menu">
-        <MenuItem
-          label="Toggle Preview"
-          modifier="⌘ + k"
-          @click="handlePreviewToggle"
-        />
-        <MenuItem label="Copy as HTML" @click="handleCopyAsHTML" />
-        <MenuItem label="Save File" modifier="⌘ + s" @click="handleSaveFile" />
-        <MenuItem
-          label="Save File as HTML"
-          modifier="⌘ + ⇧ + s "
-          @click="handleSaveAsHTML"
-        />
-        <MenuItem label="Save File as PDF" @click="handleSaveAsPDF" />
-        <MenuItem label="Save File as Image" @click="handleSaveAsImage" />
-      </Menu>
-
-      <Button class="ghost" @click="handlePreviewToggle" title="Toggle preview state">
-        <span
-          class="preview-dot"
-          v-bind:class="{ on: state.showPreview }"
-        ></span>
-      </Button>
+      <Toolbar>
+        <Menu triggerLabel="Menu">
+          <MenuItem label="Toggle Preview" modifier="⌘ + k" @click="handlePreviewToggle" />
+          <MenuItem label="Copy as HTML" @click="handleCopyAsHTML" />
+          <MenuItem label="Save File" modifier="⌘ + s" @click="handleSaveFile" />
+          <MenuItem label="Save File as HTML" modifier="⌘ + ⇧ + s " @click="handleSaveAsHTML" />
+          <MenuItem label="Save File as PDF" @click="handleSaveAsPDF" />
+          <MenuItem label="Save File as Image" @click="handleSaveAsImage" />
+        </Menu>
+        <div class="flex align-center">
+          <Button class="trigger ghost" v-bind:class="{ active: state.copied }" @click="handleCopyAsHTML">
+            <svg v-if="!state.copied" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+              stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+              <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+              <rect x="8" y="8" width="12" height="12" rx="2"></rect>
+              <path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path>
+            </svg>
+            <svg v-if="state.copied" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+              stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+              <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+              <circle cx="12" cy="12" r="9"></circle>
+              <path d="M9 12l2 2l4 -4"></path>
+            </svg>
+          </Button>
+          <Button class="ghost" @click="handlePreviewToggle">
+            <span class="preview-dot" v-bind:class="{'on':state.showPreview}"></span>
+          </Button>
+        </div>
+      </Toolbar>
     </div>
-    <Editor
-      v-if="!state.showPreview"
-      class="mt-1"
-      v-on:change="handleChange"
-      v-bind:code="state.code"
-    ></Editor>
+    <Editor v-if="!state.showPreview" class="mt-1" v-on:change="handleChange" v-bind:code="state.code"></Editor>
     <Preview v-if="state.showPreview" v-bind:code="marked(state.code)" />
   </BaseLayout>
 </template>
@@ -40,6 +41,7 @@
 import BaseLayout from "../components/base-layout.vue";
 import Menu from "../components/menu.vue";
 import MenuItem from "../components/menu-item.vue";
+import Toolbar from "../components/toolbar.vue";
 import Editor from "../components/editor.vue";
 import Button from "../components/button.vue";
 import Preview from "../components/preview.vue";
@@ -65,7 +67,11 @@ const getDefaultCode = () => {
   return defaultMarkdownText;
 };
 
-const state = reactive({ code: getDefaultCode(), showPreview: false });
+const state = reactive({
+  copied: false,
+  code: getDefaultCode(),
+  showPreview: false,
+});
 
 onMounted(() => {
   document.addEventListener("keydown", shortcutListener.bind(this));
@@ -103,7 +109,10 @@ async function handleCopyAsHTML() {
   }
   const htmlValue = marked(state.code);
   await copy(htmlValue);
-  toastRef.value.createSuccessToast("Copied!");
+  state.copied = true;
+  setTimeout(() => {
+    state.copied = false;
+  }, 2500);
 }
 
 function handlePreviewToggle() {
@@ -194,4 +203,5 @@ function exportFile(filename, file, generateDataURI = true) {
 </script>
 
 <style scoped>
+
 </style>

src/styles/index.css

@@ -3,11 +3,14 @@
 
 :root {
   --base-spacing: 4px;
-  --base: #e9eaeb;
-  --overlay: #d3d5d6;
-  --surface: #bdbfc2;
+  --base: #fff;
+  --overlay: #f8f9fa;
+  --surface: #f1f3f5;
   --text: #030405;
   --subtle: #07090a;
+  --warn: #e5c07b;
+  --success: #98c379;
+  --toolbar-height: 42px;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -40,14 +43,14 @@ a {
 }
 
 .preview-dot {
-  height: 12px;
-  width: 12px;
+  height: 10px;
+  width: 10px;
   border-radius: 25px;
-  background: #e5c07b;
+  background: var(--warn);
 }
 
 .preview-dot.on {
-  background: #98c379;
+  background: var(--success);
 }
 
 .flex {
@@ -62,6 +65,10 @@ a {
   justify-content: space-between;
 }
 
+.align-center {
+  align-items: center;
+}
+
 .p-5 {
   padding: calc(var(--base-spacing) * 5);
 }
@@ -89,3 +96,34 @@ a {
 .min-h-screen {
   min-height: 100vh;
 }
+
+.toolbar {
+  color: var(--subtle);
+  height: var(--toolbar-height);
+  align-items: center;
+  justify-content: space-between;
+  gap: 4px;
+  padding-right: 10px;
+  display: inline-flex;
+  position: fixed;
+  bottom: 20px;
+  left: 50%;
+  min-width: 350px;
+  border-radius: 50px;
+  transform: translateX(-50%);
+  background: var(--overlay);
+  box-shadow: 0px 2px 4px rgba(0,0,0,0.12);
+}
+
+.trigger {
+  min-width: 50px;
+  max-width: 150px;
+  border-radius: 0px !important;
+  height: var(--toolbar-height);
+  padding-left: 16px !important;
+  padding-right: 16px !important;
+}
+
+.trigger.active {
+  color: var(--success);
+}