feat(entity): adjusts icons with text

Novout · Oct 8, 2021 · 18859d1 · 18859d1
1 parent cf0236b
commit 18859d1
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 46 deletions.
diff --git a/src/components/editor/entity/EditorEntityShowPopover.vue b/src/components/editor/entity/EditorEntityShowPopover.vue
@@ -127,53 +127,62 @@
         dark:border-gray-700
       "
     >
-      <EditorEntityShowSelect @click.prevent.stop="onNewEntity('paragraph')">
-        <HeroIcon class="wb-icon" @click.prevent.stop="onUpEntity">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="h-4 w-4"
-            viewBox="0 0 20 20"
-            fill="currentColor"
-          >
-            <path
-              fill-rule="evenodd"
-              d="M5.293 7.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L6.707 7.707a1 1 0 01-1.414 0z"
-              clip-rule="evenodd"
-            />
-          </svg>
-        </HeroIcon>
+      <EditorEntityShowSelect @click.prevent.stop="onUpEntity">
+        <template #icon>
+          <HeroIcon>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="h-5 w-5"
+              viewBox="0 0 20 20"
+              fill="currentColor"
+            >
+              <path
+                fill-rule="evenodd"
+                d="M5.293 7.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L6.707 7.707a1 1 0 01-1.414 0z"
+                clip-rule="evenodd"
+              />
+            </svg>
+          </HeroIcon>
+        </template>
+        <p>{{ t('editor.aside.entity.up') }}</p>
       </EditorEntityShowSelect>
-      <EditorEntityShowSelect>
-        <HeroIcon class="wb-icon" @click.prevent.stop="onDownEntity">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="h-4 w-4"
-            viewBox="0 0 20 20"
-            fill="currentColor"
-          >
-            <path
-              fill-rule="evenodd"
-              d="M14.707 12.293a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L9 14.586V3a1 1 0 012 0v11.586l2.293-2.293a1 1 0 011.414 0z"
-              clip-rule="evenodd"
-            />
-          </svg>
-        </HeroIcon>
+      <EditorEntityShowSelect @click.prevent.stop="onDownEntity">
+        <template #icon>
+          <HeroIcon>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="h-5 w-5"
+              viewBox="0 0 20 20"
+              fill="currentColor"
+            >
+              <path
+                fill-rule="evenodd"
+                d="M14.707 12.293a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L9 14.586V3a1 1 0 012 0v11.586l2.293-2.293a1 1 0 011.414 0z"
+                clip-rule="evenodd"
+              />
+            </svg>
+          </HeroIcon>
+        </template>
+        <p>{{ t('editor.aside.entity.down') }}</p>
       </EditorEntityShowSelect>
-      <EditorEntityShowSelect>
-        <HeroIcon class="wb-icon" @click.prevent.stop="onDeleteEntity">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="h-4 w-4"
-            viewBox="0 0 20 20"
-            fill="currentColor"
-          >
-            <path
-              fill-rule="evenodd"
-              d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
-              clip-rule="evenodd"
-            />
-          </svg>
-        </HeroIcon>
+      <EditorEntityShowSelect @click.prevent.stop="onDeleteEntity">
+        <template #icon>
+          <HeroIcon>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="h-5 w-5"
+              viewBox="0 0 20 20"
+              fill="currentColor"
+            >
+              <path
+                fill-rule="evenodd"
+                d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
+                clip-rule="evenodd"
+              />
+            </svg>
+          </HeroIcon>
+        </template>
+        <p>{{ t('editor.aside.entity.delete') }}</p>
       </EditorEntityShowSelect>
     </section>
     <HeroIcon class="wb-icon" @click.prevent.stop="onAdjustEntityWrapper">
@@ -194,8 +203,10 @@
 <script setup lang="ts">
   import { reactive } from 'vue'
   import { useStore } from 'vuex'
+  import { useI18n } from 'vue-i18n'
 
   const store = useStore()
+  const { t } = useI18n()
 
   const state = reactive({
     new: false as boolean,

diff --git a/src/components/editor/entity/EditorEntityShowSelect.vue b/src/components/editor/entity/EditorEntityShowSelect.vue
@@ -1,5 +1,5 @@
 <template>
-  <button class="flex p-1 wb-icon w-full">
+  <button class="flex items-center justify-between p-1 wb-icon w-full">
     <slot name="icon"></slot>
     <p class="px-1 text-sm"><slot></slot></p>
   </button>

diff --git a/src/lang/br/editor.ts b/src/lang/br/editor.ts
@@ -77,6 +77,11 @@ export default {
       lang: 'PT-BR / EN-US',
       draggable: 'Arrastável',
     },
+    entity: {
+      delete: 'Deletar',
+      up: 'Cima',
+      down: 'Baixo',
+    },
     project: {
       title: 'Projeto',
       addons: {

diff --git a/src/lang/en/editor.ts b/src/lang/en/editor.ts
@@ -77,6 +77,11 @@ export default {
       lang: 'PT-BR / EN-US',
       draggable: 'Draggable',
     },
+    entity: {
+      delete: 'Delete',
+      up: 'Up',
+      down: 'Down',
+    },
     project: {
       title: 'Project',
       addons: {