new toolbar menu

This commit is contained in:
Hugh Bord 2021-11-20 11:10:15 +10:00
parent 3281c33d27
commit f4f1511f0b
4 changed files with 99 additions and 8 deletions

View File

@ -23,6 +23,7 @@
"vue": "^2.6.11",
"vue-clipboard2": "^0.3.1",
"vue-draggable-resizable": "^2.3.0",
"vue-file-toolbar-menu": "https://github.com/motla/vue-file-toolbar-menu#vue2",
"vue-slider-component": "^2.8.16",
"vue-tailwind": "^2.0.0",
"vue-toasted": "^1.1.28",

View File

@ -1,5 +1,8 @@
<template>
<div id="app">
<div> <vue-file-toolbar-menu :content="myMenu" /> </div>
<NewAscii />
<Options v-if="asciibirdMeta.length" />
<EditAscii v-if="asciibirdMeta.length" />
@ -113,14 +116,10 @@
<template v-if="asciibirdMeta.length">
<div
class="bg-gray-500 z-40 relative"
class="bg-gray-500 relative z-auto"
ref="tabbar"
:style="toolbarString"
>
<t-button class="p-1 rounded-xl" @click="openContextMenu">
:::
</t-button>
<span
v-for="(value, key) in asciibirdMeta"
:key="key"
@ -203,6 +202,12 @@
</div>
</template>
<style>
.bar {
background-color: rgba(107, 114, 128) !important;
}
</style>
<script>
import LZString from "lz-string";
import Toolbar from "./components/Toolbar.vue";
@ -234,6 +239,8 @@ import {
splashAscii,
} from "./ascii";
import VueFileToolbarMenu from 'vue-file-toolbar-menu'
export default {
async created() {
// Load from irc watch if present in the URL bar
@ -264,7 +271,8 @@ export default {
KeyboardShortcuts,
LayersLibrary,
Options,
ImageOverlay
ImageOverlay,
VueFileToolbarMenu
},
name: "Dashboard",
data: () => ({
@ -284,6 +292,7 @@ export default {
lastPostURL: "",
isShowingDialog: false,
drawBrush: false,
happy: false
}),
computed: {
splashAscii() {
@ -337,6 +346,38 @@ export default {
currentTab() {
return this.$store.getters.currentTab;
},
myMenu () {
return [
{
text: "File", menu: [
{ text: "New ASCII", click: () => this.$store.commit('openModal', 'new-ascii') },
{ text: "Edit ASCII", click: () => this.$store.commit('openModal', 'edit-ascii') },
{ text: "Close ASCII", click: () => this.closeTab(this.currentTab) }
],
},{
text: "Options", menu: [
{ text: "Show Options", click: () => this.$store.commit('openModal', 'options') },
],
},{
text: "Import", menu: [
{ text: "mIRC File", click: () => startImport('mirc') },
{ text: "mIRC Clipboard", click: () => this.$store.commit('openModal', 'paste-ascii') },
{ text: "ASCIIBIRD State", click: () => this.startImport('asb') },
],
},{
text: "Export", menu: [
{ text: "mIRC File", click: () => this.startExport('file') },
{ text: "mIRC Clipboard", click: () => this.startExport('clipboard') },
{ text: "HTTP POST", click: () => this.startExport('post') },
{ text: "ASCIIBIRD State", click: () => this.exportAsciibirdState() },
],
}
]
}
},
watch: {
// scrollOffset(val) {

View File

@ -2,4 +2,4 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind utilities;

View File

@ -2719,6 +2719,11 @@ cipher-base@^1.0.0, cipher-base@^1.0.1, cipher-base@^1.0.3:
inherits "^2.0.1"
safe-buffer "^5.0.1"
clamp@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/clamp/-/clamp-1.0.1.tgz#66a0e64011816e37196828fdc8c8c147312c8634"
integrity sha1-ZqDmQBGBbjcZaCj9yMjBRzEshjQ=
class-utils@^0.3.5:
version "0.3.6"
resolved "https://registry.yarnpkg.com/class-utils/-/class-utils-0.3.6.tgz#f93369ae8b9a7ce02fd41faad0ca83033190c463"
@ -4924,6 +4929,11 @@ hosted-git-info@^2.1.4:
resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.9.tgz#dffc0bf9a21c02209090f2aa69429e1414daf3f9"
integrity sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==
hotkeys-js@^3.8.2:
version "3.8.7"
resolved "https://registry.yarnpkg.com/hotkeys-js/-/hotkeys-js-3.8.7.tgz#c16cab978b53d7242f860ca3932e976b92399981"
integrity sha512-ckAx3EkUr5XjDwjEHDorHxRO2Kb7z6Z2Sxul4MbBkN8Nho7XDslQsgMJT+CiJ5Z4TgRxxvKHEpuLE3imzqy4Lg==
hpack.js@^2.1.6:
version "2.1.6"
resolved "https://registry.yarnpkg.com/hpack.js/-/hpack.js-2.1.6.tgz#87774c0949e513f42e84575b3c45681fade2a0b2"
@ -6067,6 +6077,11 @@ lodash.range@^3.2.0:
resolved "https://registry.yarnpkg.com/lodash.range/-/lodash.range-3.2.0.tgz#f461e588f66683f7eadeade513e38a69a565a15d"
integrity sha1-9GHliPZmg/fq3q3lE+OKaaVloV0=
lodash.throttle@^4.0.0:
version "4.1.1"
resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
integrity sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=
lodash.topath@^4.5.2:
version "4.5.2"
resolved "https://registry.yarnpkg.com/lodash.topath/-/lodash.topath-4.5.2.tgz#3616351f3bba61994a0931989660bd03254fd009"
@ -6181,6 +6196,16 @@ map-visit@^1.0.0:
dependencies:
object-visit "^1.0.0"
material-colors@^1.0.0:
version "1.2.6"
resolved "https://registry.yarnpkg.com/material-colors/-/material-colors-1.2.6.tgz#6d1958871126992ceecc72f4bcc4d8f010865f46"
integrity sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg==
material-icons@^0.5.3:
version "0.5.5"
resolved "https://registry.yarnpkg.com/material-icons/-/material-icons-0.5.5.tgz#df764ab599246b3d04ccfd44fa1c6d00d502db4c"
integrity sha512-pifjWoBgSziE58FJ+00FYy4IJoKsCCiuye+DyWCxZbPr0b4D2vt3cBViibJP6tU53B2Zqe1BIDgVVeAKMQpr7Q==
md5.js@^1.3.4:
version "1.3.5"
resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
@ -6508,7 +6533,7 @@ no-case@^2.2.0:
dependencies:
lower-case "^1.1.1"
node-emoji@^1.8.1:
node-emoji@^1.10.0, node-emoji@^1.8.1:
version "1.11.0"
resolved "https://registry.yarnpkg.com/node-emoji/-/node-emoji-1.11.0.tgz#69a0150e6946e2f115e9d7ea4df7971e2628301c"
integrity sha512-wo2DpQkQp7Sjm2A0cq+sN7EHKO6Sl0ctXeBdFZrL9T9+UywORbufTcTZxom8YqpLQt/FqNMUkOpkZrJVYSKD3A==
@ -9022,6 +9047,11 @@ tiny-emitter@^2.0.0:
resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423"
integrity sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==
tinycolor2@^1.1.2:
version "1.4.2"
resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.2.tgz#3f6a4d1071ad07676d7fa472e1fac40a719d8803"
integrity sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA==
tmp@^0.0.33:
version "0.0.33"
resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
@ -9423,6 +9453,16 @@ vue-clipboard2@^0.3.1:
dependencies:
clipboard "^2.0.0"
vue-color@^2.8.1:
version "2.8.1"
resolved "https://registry.yarnpkg.com/vue-color/-/vue-color-2.8.1.tgz#a090f3dcf8ed6f07afdb865cac84b19a73302e70"
integrity sha512-BoLCEHisXi2QgwlhZBg9UepvzZZmi4176vbr+31Shen5WWZwSLVgdScEPcB+yrAtuHAz42309C0A4+WiL9lNBw==
dependencies:
clamp "^1.0.1"
lodash.throttle "^4.0.0"
material-colors "^1.0.0"
tinycolor2 "^1.1.2"
vue-draggable-resizable@^2.3.0:
version "2.3.0"
resolved "https://registry.yarnpkg.com/vue-draggable-resizable/-/vue-draggable-resizable-2.3.0.tgz#94c433ca748bc1a4d0959ba1c5c0e1c3536cee5b"
@ -9441,6 +9481,15 @@ vue-eslint-parser@^7.0.0:
lodash "^4.17.21"
semver "^6.3.0"
"vue-file-toolbar-menu@https://github.com/motla/vue-file-toolbar-menu#vue2":
version "1.3.4"
resolved "https://github.com/motla/vue-file-toolbar-menu#f1be47107d587e0ae079ad4a2755f3006e07d58d"
dependencies:
hotkeys-js "^3.8.2"
material-icons "^0.5.3"
node-emoji "^1.10.0"
vue-color "^2.8.1"
vue-hot-reload-api@^2.3.0:
version "2.3.4"
resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz#532955cc1eb208a3d990b3a9f9a70574657e08f2"