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

new notifications, toolbar front end review

This commit is contained in:
Hugh Bord 2021-12-21 19:51:37 +10:00
parent 90010a8831
commit 48cf5be208
6 changed files with 151 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/BrushLibrary.vue
View File

@ -49,7 +49,7 @@
<t-button
type="button"
class="rounded-3xl h-7 ml-1 mt-1"
class="ab-rounded-button ml-1 mt-1"
@click="saveToLibrary(decompressBlock(brush.blocks))"
>
<span class="material-icons">save</span>
@ -57,14 +57,14 @@
</t-button>
<t-button
type="button"
class="rounded-3xl h-7 ml-1 mt-1"
class="ab-rounded-button ml-1 mt-1"
@click="reuseBlocks(decompressBlock(brush.blocks))">
<span class="material-icons">brush</span>
</t-button>
<t-button
type="button"
class="rounded-3xl h-7 ml-1 mt-1"
class="ab-rounded-button ml-1 mt-1"
@click="removeFromHistory(decompressBlock(brush.blocks))"
>
<span class="material-icons">delete</span>
@ -83,7 +83,7 @@
<t-button
type="button"
class="rounded-3xl h-7 ml-1 mt-1"
class="ab-rounded-button ml-1 mt-1"
@click="removeFromLibrary(decompressBlock(brush.blocks))"
>
<span class="material-icons">trash</span>
@ -91,7 +91,7 @@
</t-button>
<t-button
type="button"
class="rounded-3xl h-7 ml-1 mt-1"
class="ab-rounded-button ml-1 mt-1"
@click="reuseBlocks(decompressBlock(brush.blocks))"
>
<span class="material-icons">brush</span>
@ -190,15 +190,23 @@ export default {
reuseBlocks(value) {
this.$store.commit("brushBlocks", value);
this.$store.commit("changeTool", 4);
this.$toasted.show(`Applied brush from Library`, {
type: "success",
});
},
saveToLibrary(value) {
this.$store.commit("pushBrushLibrary", value);
this.$toasted.show(`Saved brush to Library`, {
type: "success",
});
},
removeFromLibrary(value) {
this.$store.commit("removeBrushLibrary", value);
this.$toasted.show(`Removed brush from Library`);
},
removeFromHistory(value) {
this.$store.commit("removeBrushHistory", value);
this.$toasted.show(`Removed brush from History`);
},
onResize(x, y, w, h) {
this.panel.x = x;

10
src/components/Colours.vue
View File

@ -3,7 +3,7 @@
<t-button
type="button"
:style="`background-color: ${mircColours[currentFg]} !important;`"
class="border-gray-200 w-12 h-12 text-2xl"
class="border-gray-200 w-14 h-14 text-2xl"
id="currentColourFg"
@click="$store.commit('changeIsUpdatingFg', ! toolbarState.isChoosingFg )"
>
@ -13,7 +13,7 @@
<t-button
type="button"
:style="`background-color: ${mircColours[currentBg]} !important;`"
class="border-gray-200 w-12 h-12 text-2xl ml-4"
class="border-gray-200 w-14 h-14 text-2xl ml-2"
id="currentColourBg"
@click="$store.commit('changeIsUpdatingBg', ! toolbarState.isChoosingBg )"
>
@ -22,8 +22,8 @@
<t-button
type="button"
class="rounded-3xl"
style="margin-left: -68px; margin-top: 12px;"
class="rounded-3xl w-7 h-7"
style="margin-left: -75px; margin-top: 12px;"
id="swapColour"
@click="swapColours()"
>
@ -33,7 +33,7 @@
<t-button
type="button"
:style="`background-color: ${mircColours[currentBg]} !important;color: ${mircColours[currentFg]};`"
class="border-gray-200 w-12 h-12 text-2xl ml-12"
class="border-gray-200 w-14 h-14 text-2xl ml-14"
id="currentChar"
@click="$store.commit('changeIsUpdatingChar', ! toolbarState.isChoosingChar )"
>

120
src/components/Toolbar.vue
View File

@ -20,7 +20,7 @@
</div>
<div class="flex">
<label class="ml-1 w-1/3">
<label class="ab-checkbox-hover">
<t-checkbox
class="form-checkbox h-5 w-5 text-blue-600"
name="targetingFg"
@ -28,11 +28,9 @@
:disabled="!canBg && !canText"
/>
<span class="ab-checkbox-label">FG</span>
</label>
<label class="ml-1 w-1/3">
<label class="ab-checkbox-hover">
<t-checkbox
class="ab-checkbox"
name="targetingBg"
@ -43,7 +41,7 @@
<span class="ab-checkbox-label">BG</span>
</label>
<label class="ml-1 w-1/3">
<label class="ab-checkbox-hover">
<t-checkbox
class="ab-checkbox"
name="targetingChar"
@ -54,55 +52,81 @@
</label>
</div>
<div class="flex">
<label class="ml-1 w-1/2">
<t-checkbox
class="ab-checkbox"
name="mirror-x"
v-model="mirror.x"
@change="updateMirror()"
/>
<span class="ab-checkbox-label">Mirror X</span>
</label>
<label class="ml-1 w-1/2">
<t-checkbox
class="ab-checkbox"
name="mirror-y"
v-model="mirror.y"
@change="updateMirror()"
/>
<span class="ab-checkbox-label">Mirror Y</span>
</label>
</div>
<div class="flex mb-3">
<t-button
type="button"
:class="`rounded-3xl w-10 h-10 mt-1 ml-1 ${
mirror.x
? 'border-gray-900 bg-blue-800'
: 'border-gray-200 bg-gray-500'
}`"
@click="
mirror.x = !mirror.x;
updateMirror();
$toasted.show(`Mirror X ${mirror.x ? 'enabled' : 'disabled'}`);
"
>
<span class="material-icons">more_vert</span>
</t-button>
<div class="flex">
<label class="ml-1 w-1/2">
<t-checkbox
class="ab-checkbox"
name="update-brush"
v-model="toolbarState.updateBrush"
@change="$store.commit('toggleUpdateBrush', updateBrush)"
/>
<span class="ab-checkbox-label">Update Brush</span>
</label>
<label class="ml-1 w-1/2">
<t-checkbox
class="ab-checkbox"
name="grid"
v-model="toolbarState.gridView"
@change="$store.commit('toggleGridView', gridView)"
/>
<span class="ab-checkbox-label">Grid</span>
</label>
</div>
<hr class="m-3" />
<t-button
type="button"
:class="`rounded-3xl w-10 h-10 mt-1 ml-1 ${
mirror.y
? 'border-gray-900 bg-blue-800'
: 'border-gray-200 bg-gray-500'
}`"
@click="
mirror.y = !mirror.y;
updateMirror();
$toasted.show(`Mirror Y ${mirror.y ? 'enabled' : 'disabled'}`);
"
>
<span class="material-icons">more_horiz</span>
</t-button>
<t-button
type="button"
:class="`rounded-3xl w-10 h-10 mt-1 ml-1 ${
toolbarState.updateBrush
? 'border-gray-900 bg-blue-800'
: 'border-gray-200 bg-gray-500'
}`"
@click="
$store.commit('toggleUpdateBrush', updateBrush);
toolbarState.updateBrush = !toolbarState.updateBrush;
$toasted.show(`Update Brush when colours or char changes ${toolbarState.updateBrush ? 'enabled' : 'disabled'}`);
"
>
<span class="material-icons">color_lens</span>
</t-button>
<t-button
type="button"
:class="`rounded-3xl w-10 h-10 mt-1 ml-1 ${
toolbarState.gridView
? 'border-gray-900 bg-blue-800'
: 'border-gray-200 bg-gray-500'
}`"
@click="
$store.commit('toggleGridView', gridView);
toolbarState.gridView = !toolbarState.gridView;
$toasted.show(`Grid view ${toolbarState.gridView ? 'enabled' : 'disabled'}`);
"
>
<span class="material-icons">{{
!this.gridView ? "grid_on" : "grid_off"
}}</span>
</t-button>
</div>
<t-button
type="button"
v-for="(value, keyToolbar) in toolbarIcons"
:key="keyToolbar + 50"
:class="`w-10 h-10 mt-1 ml-1 ${
:class="`rounded-3xl w-10 h-10 mt-1 ml-1 ${
currentTool.name === value.name
? 'border-gray-900 bg-blue-500'
: 'border-gray-200 bg-gray-500'
@ -197,7 +221,7 @@ export default {
},
watch: {
yOffset(val) {
this.$refs.toolbardrag.top = Number.parseInt(this.toolbarState.y + val);
this.$refs.toolbardrag.top = Number.parseInt(this.toolbarState.y + val);
},
},
methods: {

21
src/components/parts/Layers.vue
View File

@ -25,7 +25,7 @@
<div class="flex p-1">
<t-button
type="button"
class="rounded-xl"
class="ab-rounded-button"
@click="updateImageOverlay"
>
<span class="material-icons">{{
@ -58,7 +58,7 @@
<div class="w-12">
<t-button
type="button"
class="rounded-3xl h-7"
class="ab-rounded-button"
@click="toggleLayer(key)"
:disabled="!canToggleLayer"
>
@ -69,7 +69,7 @@
<t-button
type="button"
class="rounded-3xl h-7"
class="ab-rounded-button"
@click="removeLayer(key)"
:disabled="!canToggleLayer"
>
@ -90,7 +90,7 @@
<div class="w-5">
<t-button
type="button"
class="rounded-3xl h-7"
class="ab-rounded-button"
@click="downLayer(key)"
:disabled="!canToggleLayer"
>
@ -101,7 +101,7 @@
<t-button
type="button"
class="rounded-3xl h-7"
class="ab-rounded-button"
@click="upLayer(key)"
:disabled="!canToggleLayer"
>
@ -130,7 +130,7 @@ export default {
return this.$store.getters.selectedLayer;
},
canToggleLayer() {
return this.currentAsciiLayers.length !== 1;
return this.currentAsciiLayers.length > 1;
// We want to avoid hiding all the layers, so if there's only one
// visible left, we have to disable the buttons
},
@ -214,9 +214,15 @@ export default {
},
addLayer() {
this.$store.commit("addLayer");
this.$toasted.show(`Added a new layer.`, {
type: "success",
});
},
mergeLayers() {
this.$store.commit("mergeAllLayers");
this.$toasted.show(`All layers have been merged.`, {
type: "success",
});
},
changeLayer(key) {
this.$store.commit("changeLayer", key);
@ -232,6 +238,9 @@ export default {
},
removeLayer(key) {
this.$store.commit("removeLayer", key);
this.$toasted.show(`Removed layer.`, {
type: "success",
});
},
showOverlayModal() {
this.$store.commit("openModal", "overlay");

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

@ -1,19 +1,19 @@
<template>
<div>
<t-card class="overflow-x-scroll overflow-y-scroll h-full" :h="blocksWidthHeight.h">
<t-card
class="overflow-x-scroll overflow-y-scroll h-full"
:h="blocksWidthHeight.h"
>
<div
:style="`height: ${blocksWidthHeight.h}px;width: ${blocksWidthHeight.w}px;`"
@mouseup.right="openContextMenu"
>
<canvas
ref="brushcanvas"
id="brushcanvas"
class="brushcanvas"
@mousemove="canvasMouseMove"
@mousedown.left="processClick"
@mouseup.left="canTool = false"
@contextmenu.prevent
:width="blocksWidthHeight.w"
@ -24,36 +24,22 @@
<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="ml-1 text-sm hover:bg-gray-400">
Save as PNG
</li>
<li
@click="true"
class="ml-1 text-sm hover:bg-gray-400"
>
<li @click="true" class="ml-1 text-sm hover:bg-gray-400">
Export Brush to mIRC Clipboard
</li>
<li
@click="true"
class="ml-1 text-sm hover:bg-gray-400"
>
<li @click="true" class="ml-1 text-sm hover:bg-gray-400">
Export Brush to mIRC File
</li>
<li
@click="true"
class="ml-1 text-sm hover:bg-gray-400"
>
<li @click="true" class="ml-1 text-sm hover:bg-gray-400">
Save to Library
</li>
</ul>
</context-menu>
</div>
</t-card>
</div>
</template>
@ -222,7 +208,7 @@ export default {
openContextMenu(e) {
e.preventDefault();
// These are the correct X and Y when inside the floating panel
this.$refs['main-brush-menu'].open({
this.$refs["main-brush-menu"].open({
pageX: e.layerX,
pageY: e.layerY,
});
@ -300,7 +286,8 @@ export default {
if (this.brushBlocks[y] && this.brushBlocks[y][x]) {
const curBlock = this.brushBlocks[y][x];
if (curBlock.bg !== undefined) { // we had used to hide or show depending on canFg, etc && this.isTargettingBg
if (curBlock.bg !== undefined) {
// we had used to hide or show depending on canFg, etc && this.isTargettingBg
this.ctx.fillStyle = this.mircColours[curBlock.bg];
this.ctx.fillRect(
@ -311,11 +298,13 @@ export default {
);
}
if (curBlock.fg !== undefined) { // we had used to hide or show depending on canFg, etc && this.isTargettingFg
if (curBlock.fg !== undefined) {
// we had used to hide or show depending on canFg, etc && this.isTargettingFg
this.ctx.fillStyle = this.mircColours[curBlock.fg];
}
if (curBlock.char !== undefined) { // we had used to hide or show depending on canFg, etc && this.isTargettingChar
if (curBlock.char !== undefined) {
// we had used to hide or show depending on canFg, etc && this.isTargettingChar
this.ctx.fillStyle = this.mircColours[curBlock.fg];
this.ctx.fillText(
curBlock.char,
@ -391,6 +380,9 @@ export default {
// 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",
});
},
},
};

56
src/style.css
View File

@ -68,32 +68,32 @@ body {
}
@layer base {
.bar {
@apply bg-gray-500;
}
.bar-button {
@apply text-white;
}
.bar-button:hover {
@apply bg-gray-800;
}
.ab-toolbar-button {
@apply w-10 h-10 mt-1 ml-1 border-gray-200 bg-gray-500;
}
.ab-toolbar-button-active {
@apply w-10 h-10 mt-1 ml-1 border-gray-900 bg-blue-500;
}
.ab-checkbox {
@apply h-4 w-4 text-blue-600;
}
.ab-checkbox-label {
@apply ml-2 text-gray-700;
}
/* @layer base { */
.bar {
@apply bg-gray-500;
}
.bar-button {
@apply text-white;
}
.bar-button:hover {
@apply bg-gray-800;
}
.ab-checkbox {
@apply h-4 w-4 text-blue-600;
}
.ab-checkbox-label {
@apply ml-2 text-gray-700;
}
.ab-rounded-button {
@apply rounded-3xl h-7;
}
.ab-checkbox-hover {
@apply ml-1 w-1/3 mb-2 hover:bg-gray-500;
}
/* } */