jewbird
/
asciibird
3
3
Fork 0
Code Issues Pull Requests Releases Activity

brush save fix, menu css and icons review

This commit is contained in:
Hugh Bord 2021-12-21 21:25:18 +10:00
parent 45a386863a
commit 7a5cd1b870
5 changed files with 78 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/Dashboard.vue
View File

@ -36,53 +36,53 @@
<ul>
<li
@click="$store.commit('openModal', 'new-ascii')"
class="ml-1"
class="ab-context-menu-item"
@contextmenu.prevent
>
New ASCII
</li>
<li
@click="$store.commit('openModal', 'edit-ascii')"
class="ml-1"
class="ab-context-menu-item"
v-if="asciibirdMeta.length"
>
Edit Ascii
</li>
<li
@click="closeTab(currentTab)"
class="ml-1 border-b"
class="ab-context-menu-item border-b"
v-if="asciibirdMeta.length"
>
Close Ascii
</li>
<li
@click="$store.commit('openModal', 'options')"
class="ml-1 border-b"
class="ab-context-menu-item border-b"
v-if="asciibirdMeta.length"
>
Options
</li>
<li @click="startImport('mirc')" class="ml-1">Import mIRC from File</li>
<li @click="startImport('mirc')" class="ab-context-menu-item">Import mIRC from File</li>
<li
@click="startExport('file')"
class="ml-1 border-b"
class="ab-context-menu-item border-b"
v-if="asciibirdMeta.length"
>
Export mIRC to File
</li>
<li class="ml-1" @click="$store.commit('openModal', 'paste-ascii')">
<li class="ab-context-menu-item" @click="$store.commit('openModal', 'paste-ascii')">
Import mIRC from Clipboard
</li>
<li
class="ml-1"
class="ab-context-menu-item"
@click="startExport('clipboard')"
v-if="asciibirdMeta.length"
>
Export mIRC to Clipboard
</li>
<li
class="ml-1 border-b"
class="ab-context-menu-item border-b"
@click="startExport('post')"
v-if="asciibirdMeta.length"
>
@ -90,12 +90,12 @@
</li>
<li
@click="exportAsciibirdState()"
class="ml-1"
class="ab-context-menu-item"
v-if="asciibirdMeta.length"
>
Save Asciibird State
</li>
<li @click="startImport('asb')" class="ml-1">Load Asciibird State</li>
<li @click="startImport('asb')" class="ab-context-menu-item">Load Asciibird State</li>
</ul>
</context-menu>
@ -368,6 +368,7 @@ export default {
menu.push({
text: "File",
icon: "insert_drive_file",
menu: [
{
text: "New ASCII",
@ -393,6 +394,7 @@ export default {
menu.push({
text: "Options",
icon: "settings",
menu: [
{
text: "Show Options",
@ -405,6 +407,7 @@ export default {
menu.push({
text: "Import",
icon: "upload_file",
menu: [
{ text: "mIRC File", click: () => this.startImport("mirc"), icon: 'upload_file' },
{
@ -420,6 +423,7 @@ export default {
menu.push(
{
text: "Export",
icon: "save_alt",
menu: [
{ text: "mIRC File", click: () => this.startExport("file"), icon: 'download_file' },
{
@ -437,6 +441,7 @@ export default {
},
{
text: "Layers",
icon: "layers",
menu: [
// {
// text: "Change Layers",

5
src/components/Toolbar.vue
View File

@ -52,7 +52,7 @@
</label>
</div>
<div class="flex mb-3">
<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 ${
@ -122,6 +122,7 @@
</t-button>
</div>
<div class="border-t border-black border-opacity-10 pt-2">
<t-button
type="button"
v-for="(value, keyToolbar) in toolbarIcons"
@ -135,6 +136,8 @@
>
<span class="material-icons">{{ value.icon }}</span>
</t-button>
</div>
</t-card>
</vue-draggable-resizable>
</div>

6
src/components/parts/BrushCanvas.vue
View File

@ -17,19 +17,19 @@
<ul>
<li
@click="true"
class="ml-1 text-sm hover:bg-gray-400"
class="ab-context-menu-item"
>
Save as PNG
</li>
<li
@click="true"
class="ml-1 text-sm hover:bg-gray-400"
class="ab-context-menu-item"
>
Export ASCII to mIRC Clipboard
</li>
<li
@click="true"
class="ml-1 text-sm hover:bg-gray-400"
class="ab-context-menu-item"
>
Export ASCII to mIRC File
</li>

26
src/components/parts/MainBrushCanvas.vue
View File

@ -24,16 +24,16 @@
<context-menu ref="main-brush-menu" class="z-50" @contextmenu.prevent>
<ul>
<li @click="true" class="ml-1 text-sm hover:bg-gray-400">
<li @click="true" class="ab-context-menu-item">
Save as PNG
</li>
<li @click="true" class="ml-1 text-sm hover:bg-gray-400">
<li @click="true" class="ab-context-menu-item">
Export Brush to mIRC Clipboard
</li>
<li @click="true" class="ml-1 text-sm hover:bg-gray-400">
<li @click="true" class="ab-context-menu-item">
Export Brush to mIRC File
</li>
<li @click="true" class="ml-1 text-sm hover:bg-gray-400">
<li @click="true" class="ab-context-menu-item">
Save to Library
</li>
</ul>
@ -75,6 +75,7 @@ export default {
redraw: true,
canTool: false,
showContextMenu: true,
hasChanged: false,
x: 0,
y: 0,
}),
@ -228,10 +229,12 @@ export default {
this.y = Math.floor(this.y / blockHeight);
if (this.isErasing) {
this.hasChanged = true;
this.eraseBlock();
}
if (this.isBrushing) {
this.hasChanged = true;
this.addBlock();
}
},
@ -335,7 +338,7 @@ export default {
},
// Basic block editing
canvasMouseMove(e) {
if (this.canTool) {
if (this.canTool && (this.isErasing || this.isBrushing)) {
this.processClick(e);
}
},
@ -378,11 +381,14 @@ export default {
enableToolbarMoving() {
// Save the blocks when the mouse leaves the canvas area
// To avoid one block history changes
this.$store.commit("brushBlocks", this.brushBlocks);
this.$store.commit("changeToolBarDraggable", true);
this.$toasted.show(`Saved brush to Library`, {
type: "success",
});
if ( (this.isErasing || this.isBrushing) && this.hasChanged) {
this.$store.commit("brushBlocks", this.brushBlocks);
this.$store.commit("changeToolBarDraggable", true);
this.hasChanged = false;
this.$toasted.show(`Saved brush to Library`, {
type: "success",
});
}
},
},
};

40
src/style.css
View File

@ -67,6 +67,39 @@ body {
cursor: crosshair;
}
:root {
--bar-font-color: rgba(0, 0, 0, 0.75);
--bar-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--bar-font-size: 15.5px;
--bar-button-icon-size: 20px;
--bar-button-padding: 4px 7px 5px 7px;
--bar-button-radius: 0;
--bar-button-hover-bkg: none;
--bar-button-active-color: white;
--bar-button-active-bkg: rgba(55, 65, 81);
--bar-button-open-color: white;
--bar-button-open-bkg: rgba(55, 65, 81);
--bar-menu-bkg: rgba(255, 255, 255, 0.95);
--bar-menu-backdrop-filter: saturate(180%) blur(20px);
--bar-menu-backdrop-filter-bkg: rgba(255, 255, 255, 0.3);
--bar-menu-border: solid 1px #BBB;
--bar-menu-border-radius: 0 0 6px 6px;
--bar-menu-item-chevron-margin: 0;
--bar-menu-item-hover-color: white;
--bar-menu-item-hover-bkg: rgba(55, 65, 81);
--bar-menu-item-padding: 1px 12px 2px 25px;
--bar-menu-item-icon-size: 16px;
--bar-menu-item-icon-margin: 0 4px 0 -20px;
--bar-menu-padding: 3px 0;
--bar-menu-shadow: 0 6px 13px 0 rgba(60, 60, 60, 0.4);
--bar-menu-separator-height: 2px;
--bar-menu-separator-margin: 5px 0;
--bar-menu-separator-color: rgba(0, 0, 0, 0.08);
--bar-separator-color: rgba(0, 0, 0, 0.1);
--bar-separator-width: 2px;
--bar-separator-margin: 5px 7px;
--bar-sub-menu-border-radius: 6px;
}
/* @layer base { */
.bar {
@ -87,6 +120,7 @@ body {
.ab-checkbox-label {
@apply ml-2 text-gray-700;
}
.ab-rounded-button {
@ -94,6 +128,10 @@ body {
}
.ab-checkbox-hover {
@apply ml-1 w-1/3 mb-2 hover:bg-gray-500;
@apply ml-1 w-1/3 mb-2 hover:bg-gray-800 hover:text-white;
}
.ab-context-menu-item {
@apply ml-1 hover:bg-gray-800 hover:text-white;
}
/* } */