Bläddra i källkod

feat: add toggle sidebar button

Ahmad Kholid 3 år sedan
förälder
incheckning
ec0fc3a5c4
4 ändrade filer med 25 tillägg och 1 borttagningar
  1. 1 1
      package.json
  2. 4 0
      src/lib/v-remixicon.js
  3. 1 0
      src/locales/en/newtab.json
  4. 19 0
      src/newtab/pages/workflows/[id].vue

+ 1 - 1
package.json

@@ -1,6 +1,6 @@
 {
   "name": "automa",
-  "version": "0.13.3",
+  "version": "0.13.0",
   "description": "An extension for automating your browser by connecting blocks",
   "license": "MIT",
   "repository": {

+ 4 - 0
src/lib/v-remixicon.js

@@ -1,6 +1,8 @@
 import vRemixicon from 'v-remixicon';
 import {
   riHome5Line,
+  riSideBarLine,
+  riSideBarFill,
   riFolderZipLine,
   riHandHeartLine,
   riCompass3Line,
@@ -79,6 +81,8 @@ import {
 
 export const icons = {
   riHome5Line,
+  riSideBarLine,
+  riSideBarFill,
   riFolderZipLine,
   riHandHeartLine,
   riCompass3Line,

+ 1 - 0
src/locales/en/newtab.json

@@ -25,6 +25,7 @@
     "rename": "Rename workflow",
     "add": "Add workflow",
     "clickToEnable": "Click to enable",
+    "toggleSidebar": "Toggle sidebar",
     "state": {
       "executeBy": "Executed by: \"{name}\""
     },

+ 19 - 0
src/newtab/pages/workflows/[id].vue

@@ -1,6 +1,7 @@
 <template>
   <div class="flex h-screen">
     <div
+      v-if="state.showSidebar"
       class="w-80 bg-white py-6 relative border-l border-gray-100 flex flex-col"
     >
       <workflow-edit-block
@@ -21,6 +22,16 @@
           v-model="activeTab"
           class="border-none px-2 rounded-lg h-full space-x-1 bg-white"
         >
+          <button
+            v-tooltip="t('workflow.toggleSidebar')"
+            class="text-gray-800"
+            style="margin-right: 6px"
+            @click="toggleSidebar"
+          >
+            <v-remixicon
+              :name="state.showSidebar ? 'riSideBarFill' : 'riSideBarLine'"
+            />
+          </button>
           <ui-tab value="editor">{{ t('common.editor') }}</ui-tab>
           <ui-tab value="logs">{{ t('common.log', 2) }}</ui-tab>
           <ui-tab value="running" class="flex items-center">
@@ -199,6 +210,7 @@ const state = reactive({
   blockData: {},
   modalName: '',
   showModal: false,
+  showSidebar: true,
   isEditBlock: false,
   isDataChanged: false,
 });
@@ -248,6 +260,10 @@ function deleteLog(logId) {
     store.dispatch('saveToStorage', 'logs');
   });
 }
+function toggleSidebar() {
+  state.showSidebar = !state.showSidebar;
+  localStorage.setItem('workflow:sidebar', state.showSidebar);
+}
 function deleteBlock(id) {
   if (!state.isEditBlock) return;
 
@@ -362,6 +378,9 @@ onMounted(() => {
     router.push('/workflows');
   }
 
+  state.showSidebar =
+    JSON.parse(localStorage.getItem('workflow:sidebar')) ?? true;
+
   window.onbeforeunload = () => {
     if (state.isDataChanged) {
       return t('message.notSaved');