tooltips on toolbar, save selection to brush library, layers context menu fix

README.md

@@ -28,7 +28,7 @@ A most latest production build to use is available at https://asciibird.jewbird.
 > special thanks to slime aka botmaster slime aka knivey for the wonderful bot integration with asciibird
 ## Greetz to Chat Pals
 
-> darkmage, l0de, bex, blarf, sludg, shart, chode, corn, ralph, jrra, kuntz, moony, sniff, scd, aztec, astro, anji, b-rex, bengt, butth0le, canada420, clamkin, deakin, dumbguy, ElBurro, interdome, syn, darkness, vae, gowce, moneytree, Retarded, spoon, sylar, zen, bj0rn, stovepipe, morthrane, chrono, acidvegas, again, hgc, durendal, knio, mavericks, pyrex, sh, irie, seirdy, sq, stratum, WeEatnKid, dieforirc, tater, buttvomit, luldangs, MichealK, AnalMan, poccri, vap0r, kakama, fregyXin, kayos, stovepipe, higgs, Audasity, PsyMaster, perplexa, alyosha, Darn, efsenable, EchoShun, dumbguy, HorseCrusherKristian
+> darkmage, l0de, bex, blarf, sludg, shart, chode, corn, ralph, jrra, kuntz, moony, sniff, scd, aztec, astro, anji, b-rex, bengt, butth0le, canada420, clamkin, deakin, dumbguy, ElBurro, interdome, syn, darkness, vae, gowce, moneytree, Retarded, spoon, sylar, zen, bj0rn, stovepipe, morthrane, chrono, acidvegas, again, hgc, durendal, knio, mavericks, pyrex, sh, irie, seirdy, sq, stratum, WeEatnKid, dieforirc, tater, buttvomit, luldangs, MichealK, AnalMan, poccri, vap0r, kakama, fregyXin, kayos, stovepipe, higgs, Audasity, PsyMaster, perplexa, alyosha, Darn, efsenable, EchoShun, dumbguy, HorseCrusherKristian, phobos
 
 # Current Features
 
@@ -146,6 +146,7 @@ Doesn't exist at the moment. While the underlying functions and code is compatib
 * Ctrl + c - Copy blocks to clipboard
 * Ctrl + x - Cut blocks to clipboard
 * Ctrl + v - Paste blocks as brush
+* Ctrl + b - Save Selection to Library
 * Delete - Delete selected blocks
 
 ## Eraser Mode

src/Dashboard.vue

@@ -324,15 +324,6 @@ export default {
     currentTool() {
       return toolbarIcons[this.$store.getters.currentTool] ?? null;
     },
-    icon() {
-      return [
-        this.currentTool.fa ?? "fas",
-        this.currentTool.icon ?? "mouse-pointer",
-      ];
-    },
-    // options() {
-    //   return this.$store.getters.options;
-    // },
 
     asciibirdMeta() {
       return this.$store.getters.asciibirdMeta;
@@ -659,6 +650,23 @@ export default {
               disabled: !this.isSelected && !this.selectedBlocks.length,
               hotkey: "Delete",
             },
+            {
+              text: "Save Selection to Library",
+              click: () => {
+                if (this.selectedBlocks.length) {
+                  this.resetSelect = !this.resetSelect;
+                  this.$store.commit("pushBrushLibrary", filterNullBlocks(this.selectedBlocks));
+                  this.selectedBlocks = [];
+                  this.$toasted.show("Saved brush to Library!", {
+                    type: "success",
+                    icon: "brush",
+                  });
+                }
+              },
+              icon: "brush",
+              disabled: !this.isSelected && !this.selectedBlocks.length,
+              hotkey: "ctrl+b",
+            },
           ],
         });
 
@@ -1098,16 +1106,6 @@ export default {
             text: "Help",
             icon: "help",
             menu: [
-              {
-                text: "ASCIIBIRD on GitHub",
-                click: () => window.open("https://github.com/hughbord/asciibird", "_blank"),
-                icon: "code",
-              },
-              {
-                text: "ASCIIBIRD on tcp.direct Git",
-                click: () => window.open("https://git.tcp.direct/jewbird/asciibird", "_blank"),
-                icon: "code",
-              },
               {
                 text: "About ASCIIBIRD",
                 click: () => this.$store.commit("openModal", "about"),
@@ -1136,6 +1134,11 @@ export default {
       if (val) {
         hotkeys.deleteScope("all");
       } 
+    },
+    currentTool(val,old) {
+      if (old === "select") {
+        this.selectedBlocks = [];
+      }
     }
   },
   methods: {

src/components/Toolbar.vue

@@ -27,7 +27,12 @@
               v-model="toolbarState.targetingFg"
               :disabled="!canBg && !canText"
             />
-            <span class="ab-checkbox-label">FG</span>
+            <t-dropdown toggle-on-hover>
+              <span class="ab-checkbox-label" slot="trigger">FG</span>
+              <template>
+                <div class="bg-gray-500 absolute opacity-0 invisible group-hover:animate-tooltip_show ml-2">Ignore Foreground when Editing</div>
+              </template>
+            </t-dropdown>
           </label>
 
           <label class="ab-checkbox-hover">
@@ -38,7 +43,12 @@
               :disabled="!canFg && !canText"
               checked
             />
-            <span class="ab-checkbox-label">BG</span>
+            <t-dropdown toggle-on-hover>
+              <span class="ab-checkbox-label" slot="trigger">BG</span>
+              <template>
+                <div class="bg-gray-500 absolute opacity-0 invisible group-hover:animate-tooltip_show ml-2">Ignore Background when Editing</div>
+              </template>
+            </t-dropdown>
           </label>
 
           <label class="ab-checkbox-hover">
@@ -48,14 +58,19 @@
               v-model="toolbarState.targetingChar"
               :disabled="!canFg && !canBg"
             />
-            <span class="ab-checkbox-label">Text</span>
+            <t-dropdown toggle-on-hover class="">
+              <span class="ab-checkbox-label" slot="trigger">Text</span>
+              <template>
+                <span class="bg-gray-500 absolute opacity-0 invisible group-hover:animate-tooltip_show ml-2">Ignore Characters when Editing</span>
+              </template>
+            </t-dropdown>
           </label>
         </div>
 
-        <div class="flex mb-3 border-t border-black border-opacity-10 pt-2">
+        <div class="flex mb-3 border-t border-black border-opacity-10 pt-2 ">
           <t-button
             type="button"
-            :class="`rounded-3xl w-10 h-10 mt-1 ml-1 ${
+            :class="`ab-toolbar-button ${
               mirror.x
                 ? 'border-gray-900 bg-blue-800'
                 : 'border-gray-200 bg-gray-500'
@@ -66,12 +81,17 @@
               $toasted.show(`Mirror X ${mirror.x ? 'enabled' : 'disabled'}`);
             "
           >
-            <span class="material-icons">more_vert</span>
+            <t-dropdown toggle-on-hover>
+              <span class="material-icons" slot="trigger">more_horiz</span>
+              <template>
+                <div class="bg-gray-500 absolute opacity-0 invisible group-hover:animate-tooltip_show ml-2">Mirror X axis when Editing</div>
+              </template>
+            </t-dropdown>
           </t-button>
 
           <t-button
             type="button"
-            :class="`rounded-3xl w-10 h-10 mt-1 ml-1 ${
+            :class="`ab-toolbar-button ${
               mirror.y
                 ? 'border-gray-900 bg-blue-800'
                 : 'border-gray-200 bg-gray-500'
@@ -82,12 +102,17 @@
               $toasted.show(`Mirror Y ${mirror.y ? 'enabled' : 'disabled'}`);
             "
           >
-            <span class="material-icons">more_horiz</span>
+            <t-dropdown toggle-on-hover>
+              <span class="material-icons" slot="trigger">more_vert</span>
+              <template>
+                <div class="bg-gray-500 absolute opacity-0 invisible group-hover:animate-tooltip_show ml-2">Mirror Y axis when Editing</div>
+              </template>
+            </t-dropdown>
           </t-button>
 
           <t-button
             type="button"
-            :class="`rounded-3xl w-10 h-10 mt-1 ml-1 ${
+            :class="`ab-toolbar-button ${
               toolbarState.updateBrush
                 ? 'border-gray-900 bg-blue-800'
                 : 'border-gray-200 bg-gray-500'
@@ -102,12 +127,19 @@
               );
             "
           >
-            <span class="material-icons">color_lens</span>
+            <t-dropdown toggle-on-hover>
+              <span class="material-icons" slot="trigger">color_lens</span>
+              <template>
+                <div class="bg-gray-500 absolute opacity-0 invisible group-hover:animate-tooltip_show ml-2">
+                  Update Brush Automatically when Colours or Char Changes
+                </div>
+              </template>
+            </t-dropdown>
           </t-button>
 
           <t-button
             type="button"
-            :class="`rounded-3xl w-10 h-10 mt-1 ml-1 ${
+            :class="`ab-toolbar-button ${
               toolbarState.gridView
                 ? 'border-gray-900 bg-blue-800'
                 : 'border-gray-200 bg-gray-500'
@@ -120,9 +152,20 @@
               );
             "
           >
-            <span class="material-icons">{{
-              !this.gridView ? "grid_on" : "grid_off"
-            }}</span>
+            <t-dropdown toggle-on-hover>
+              <span class="material-icons" slot="trigger">{{
+                !this.gridView ? "grid_on" : "grid_off"
+              }}</span>
+
+              <template>
+                <div class="bg-gray-500 absolute opacity-0 invisible group-hover:animate-tooltip_show ml-2">
+                  <span class="material-icons">{{
+                    !this.gridView ? "grid_on" : "grid_off"
+                  }}</span>
+                  Toggle Grid View
+                </div>
+              </template>
+            </t-dropdown>
           </t-button>
         </div>
 
@@ -131,14 +174,25 @@
             type="button"
             v-for="(value, keyToolbar) in toolbarIcons"
             :key="keyToolbar + 50"
-            :class="`rounded-3xl w-10 h-10 mt-1 ml-1 ${
+            :class="`rounded-3xl w-10 h-10 mt-1 ml-1 transition-all group ${
               currentTool.name === value.name
                 ? 'border-gray-900 bg-blue-500'
                 : 'border-gray-200 bg-gray-500'
             }`"
             @click="$store.commit('changeTool', keyToolbar)"
           >
-            <span class="material-icons">{{ value.icon }}</span>
+            <t-dropdown toggle-on-hover>
+              <span slot="trigger">
+                <span class="material-icons">{{ value.icon }}</span>
+              </span>
+
+              <template>
+                <div class="bg-gray-500 absolute opacity-0 invisible group-hover:animate-tooltip_show ml-2">
+                  <span class="material-icons">{{ value.icon }}</span>
+                  {{ tooltipName(value) }}
+                </div>
+              </template>
+            </t-dropdown>
           </t-button>
         </div>
       </t-card>
@@ -244,6 +298,26 @@ export default {
     },
   },
   methods: {
+    tooltipName(value) {
+      switch (value.name) {
+        case "default":
+          return "Defualt Mode";
+        case "select":
+          return "Select Blocks";
+        case "text":
+          return "Text Editing";
+        case "fill":
+          return "Fill Blocks";
+        case "brush":
+          return "Brush Blocks";
+        case "dropper":
+          return "Block Picker";
+        case "eraser":
+          return "Eraser Blocks";
+        case "fill-eraser":
+          return "Fill Eraser Blocks";
+      }
+    },
     updateMirror() {
       this.$store.commit("updateMirror", this.mirror);
     },

src/components/modals/About.vue

@@ -9,6 +9,8 @@
       <div class="mt-6 lg:mt-0 rounded shadow bg-white text-center ">
             <BrushCanvas :blocks="aboutAscii" class="w-32 -right-40 relative" />
 
+            <span class="p-2"><small class="text-blue-400 cursor-pointer"><a href="https://github.com/hughbord/asciibird" target="_blank">Github</a></small> also on <small class="text-blue-400 cursor-pointer"><a href="https://git.tcp.direct/jewbird/asciibird" target="_blank">git.tcp.direct</a></small></span>
+
             <h1 class="p-2 font-extrabold">Big Shout Outs to Patrons</h1>
             <span>beenz, xartet, OfMonsters&Crime, mouse, funkpower, Charles, PP4L, octopus, addct, hotline, dingopride, skg, eraser, aaa, chz, L0j1k</span>
 
@@ -16,7 +18,7 @@
             <span class="text-sm">slime aka botmaster slime aka knivey for the wonderful bot integration with asciibird, sniff</span>
 
             <h5 class="p-2 font-extrabold">Greetz to</h5>
-            <span class="text-xs">darkmage, l0de, bex, blarf, sludg, shart, chode, corn, ralph, jrra, kuntz, moony, sniff, scd, aztec, astro, anji, b-rex, bengt, butth0le, canada420, clamkin, deakin, dumbguy, ElBurro, interdome, syn, darkness, vae, gowce, moneytree, Retarded, spoon, sylar, zen, bj0rn, stovepipe, morthrane, chrono, acidvegas, again, hgc, durendal, knio, mavericks, pyrex, sh, irie, seirdy, sq, stratum, WeEatnKid, dieforirc, tater, buttvomit, luldangs, MichealK, AnalMan, poccri, vap0r, kakama, fregyXin, kayos, stovepipe, higgs, Audasity, PsyMaster, perplexa, alyosha, Darn, efsenable, EchoShun, dumbguy, HorseCrusherKristian</span>
+            <span class="text-xs">darkmage, l0de, bex, blarf, sludg, shart, chode, corn, ralph, jrra, kuntz, moony, sniff, scd, aztec, astro, anji, b-rex, bengt, butth0le, canada420, clamkin, deakin, dumbguy, ElBurro, interdome, syn, darkness, vae, gowce, moneytree, Retarded, spoon, sylar, zen, bj0rn, stovepipe, morthrane, chrono, acidvegas, again, hgc, durendal, knio, mavericks, pyrex, sh, irie, seirdy, sq, stratum, WeEatnKid, dieforirc, tater, buttvomit, luldangs, MichealK, AnalMan, poccri, vap0r, kakama, fregyXin, kayos, stovepipe, higgs, Audasity, PsyMaster, perplexa, alyosha, Darn, efsenable, EchoShun, dumbguy, HorseCrusherKristian, phobos</span>
       </div>
     </template>
 

src/components/parts/Layers.vue

@@ -55,16 +55,32 @@
           <li @click="addLayer()" class="ab-context-menu-item">
             Add New Layer
           </li>
-          <li @click="removeLayer(selectedLayer)" class="ab-context-menu-item">
+          <li
+            v-if="canToggleLayer"
+            @click="removeLayer(selectedLayer)"
+            class="ab-context-menu-item"
+          >
             Remove Selected Layer
           </li>
-          <li @click="downLayer(selectedLayer)" class="ab-context-menu-item">
+          <li
+            v-if="canToggleLayer"
+            @click="downLayer(selectedLayer)"
+            class="ab-context-menu-item"
+          >
             Move Selected Layer Up
           </li>
-          <li @click="upLayer(selectedLayer)" class="ab-context-menu-item">
+          <li
+            v-if="canToggleLayer"
+            @click="upLayer(selectedLayer)"
+            class="ab-context-menu-item"
+          >
             Move Selected Layer Down
           </li>
-          <li @click="toggleLayer(selectedLayer)" class="ab-context-menu-item">
+          <li
+            v-if="canToggleLayer"
+            @click="toggleLayer(selectedLayer)"
+            class="ab-context-menu-item"
+          >
             Show/Hide Layer
           </li>
           <li
@@ -73,7 +89,11 @@
           >
             Rename Layer
           </li>
-          <li @click="mergeLayers()" class="ab-context-menu-item">
+          <li
+            v-if="canToggleLayer"
+            @click="mergeLayers()"
+            class="ab-context-menu-item"
+          >
             Merge All Layers
           </li>
         </ul>

src/style.scss

@@ -130,7 +130,15 @@ body {
 }
 
 .ab-checkbox-hover {
-    @apply ml-1 w-1/3 mb-2 hover:bg-gray-800 hover:text-white;
+    @apply ml-1 w-1/3 mb-2 hover:bg-gray-800 hover:text-white transition-all group;
+}
+
+.ab-tooltip {
+    @apply absolute opacity-0 invisible group-hover:animate-tooltip_show ml-2;
+}
+
+.ab-toolbar-button {
+    @apply rounded-3xl w-10 h-10 mt-1 ml-1 transition-all group 
 }
 
 .ab-context-menu-item {

src/tailwindSettings.js

@@ -7,6 +7,7 @@ import TCard from 'vue-tailwind/dist/t-card';
 import TModal from 'vue-tailwind/dist/t-modal';
 import TDialog from 'vue-tailwind/dist/t-dialog';
 import TSelect from 'vue-tailwind/dist/t-select';
+import TDropdown from 'vue-tailwind/dist/t-dropdown';
 
 export const tailwindCss = {
   't-input': {
@@ -218,5 +219,31 @@ export const tailwindCss = {
         }
       }
     }
+  },
+  't-dropdown': {
+    component: TDropdown,
+    props: {
+      fixedClasses: {
+        button: 'flex items-center text-white block px-4 py-2 transition duration-100 ease-in-out disabled:opacity-50 disabled:cursor-not-allowed',
+        wrapper: 'inline-flex flex-col',
+        dropdownWrapper: 'relative rounded',
+        dropdown: 'origin-top-left absolute left-0 w-56 mt-1 opacity-70 p-2 rounded',
+        enterClass: 'opacity-0 scale-95',
+        enterActiveClass: 'transition transform ease-out duration-100',
+        enterToClass: 'opacity-100 scale-100',
+        leaveClass: 'opacity-100 scale-100',
+        leaveActiveClass: 'transition transform ease-in duration-75',
+        leaveToClass: 'opacity-0 scale-95'
+      },
+      classes: {
+        button: 'bg-blue-500 hover:bg-blue-600',
+      },
+      variants: {
+        danger: {
+          button: 'bg-red-500 hover:bg-red-600',
+          dropdown: 'bg-red-50'
+        }
+      }
+    }
   }
 }

tailwind.config.js

@@ -2,10 +2,24 @@ module.exports = {
   purge: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}", "./src/style.css"],
   darkMode: false,
   theme: {
-    extend: {},
+    extend: {
+      keyframes: {
+        tooltip_show: {
+          '0%' : { visibility: 'hidden', opacity: '0'},
+          '75%' : { visibility: 'hidden', opacity: '0'},
+          '100%' : { visibility: 'visible', opacity: '100'},
+        }
+      },
+      animation: {
+        tooltip_show: 'tooltip_show 1s ease forwards',
+      }
+    },
   },
   variants: {
-    extend: {},
+    extend: {
+      width: ['hover'],
+      animation: ['group-hover'],
+    },
   },
   plugins: [
       require('@tailwindcss/forms'),