jewbird
/
asciibird
3
3
Tükrözés 0
Kód Hibajegyek Egyesítési kérések Kiadások Tevékenység

reviewed / refactored styles

This commit is contained in:
Hugh Bord 2021-08-16 17:03:53 +10:00
szülő b4439f9a5f
commit 1458a09519
11 fájl változott, egészen pontosan 92 új sor hozzáadva és 90 régi sor törölve
Statisztikák mutatása Download Patch File Download Diff File Expand all files Collapse all files

35
src/Dashboard.vue
Fájl megtekintése

@ -72,8 +72,15 @@
class="ml-1"
v-if="asciibirdMeta.length"
>
Edit Current Ascii
Edit Ascii
</li>
<li
@click="closeTab(currentTab)"
class="ml-1"
v-if="asciibirdMeta.length"
>
Close Ascii
</li>
</ul>
</context-menu>
@ -91,6 +98,15 @@
>
<template v-if="asciibirdMeta.length">
<div class="bg-gray-500" >
<t-button
class="p-1 rounded-xl"
@click="openContextMenu"
>
:::
</t-button>
<span
v-for="(value, key) in asciibirdMeta"
:key="key"
@ -98,18 +114,20 @@
>
<t-button
class="p-1"
:class="buttonStyle(key)"
@click="changeTab(key, value)"
>
{{ value.title }}
<t-button
:class="`(currentTab === key) ? 'text-sm pl-1 p-1 h-8 rounded-xl text-white border border-transparent shadow-sm hover:bg-blue-500 bg-gray-600' : ''`"
@click="closeTab(key)"
>
X
</t-button>
</t-button>
</span>
</div>
<Toolbar
:canvas-x="canvasX"
@ -212,7 +230,6 @@ export default {
},
name: "Dashboard",
data: () => ({
currentTab: 1,
canvasX: null,
canvasY: null,
dashboardX: 0,
@ -272,13 +289,16 @@ export default {
currentAscii() {
return this.$store.getters.currentAscii;
},
buttonStyle() {
return this.currentTab
? `text-sm pl-1 p-1 h-8 rounded-xl text-white border border-transparent shadow-sm hover:bg-blue-500 bg-gray-600`
: `text-sm pl-1 p-1 h-8 rounded-xl text-white border border-transparent shadow-sm hover:bg-blue-500 bg-gray-600`;
currentTab() {
return this.$store.getters.currentTab;
},
},
methods: {
buttonStyle(key) {
return (this.currentTab === key)
? `text-sm pl-1 p-1 h-10 text-white border border-transparent shadow-sm hover:bg-blue-500 bg-gray-900`
: `text-sm pl-1 p-1 h-10 text-white border border-transparent shadow-sm hover:bg-blue-500 bg-gray-400`;
},
openContextMenu(e) {
e.preventDefault();
this.$refs.menu.open(e);
@ -386,7 +406,6 @@ export default {
},
changeTab(key) {
// Update the tab index in vuex store
this.currentTab = key;
this.$store.commit("changeTab", key);
},
closeTab(key) {

3
src/components/BrushLibrary.vue
Fájl megtekintése

@ -14,8 +14,7 @@
:y="brushLibraryState.y"
>
<t-card
class="h-full overflow-y-scroll"
header="Brushes Manager"
class="h-full overflow-y-auto overflow-x-auto"
>
<t-button
type="button"

3
src/components/LayersLibrary.vue
Fájl megtekintése

@ -14,8 +14,7 @@
:y="layersLibraryState.y"
>
<t-card
class="h-full overflow-y-scroll"
header="Layers"
class="h-full overflow-y-auto overflow-x-hidden"
>
<Layers />
</t-card>

20
src/components/Toolbar.vue
Fájl megtekintése

@ -15,11 +15,14 @@
:draggable="draggable"
>
<t-card class="h-full">
<Colours />
<div class="flex mb-2">
<Colours />
</div>
<div class="flex">
<label class="ml-1 w-1/3">
<t-checkbox
class="form-checkbox m-1"
name="targetingFg"
v-model="toolbarState.targetingFg"
:disabled="!canBg && !canText"
@ -29,6 +32,7 @@
<label class="ml-1 w-1/3">
<t-checkbox
class="form-checkbox m-1"
name="targetingBg"
v-model="toolbarState.targetingBg"
:disabled="!canFg && !canText"
@ -39,6 +43,7 @@
<label class="ml-1 w-1/3">
<t-checkbox
class="form-checkbox m-1"
name="targetingChar"
v-model="toolbarState.targetingChar"
:disabled="!canFg && !canBg"
@ -50,6 +55,7 @@
<div class="flex">
<label class="ml-1 w-1/2">
<t-checkbox
class="form-checkbox m-1"
name="mirror-x"
v-model="mirror.x"
@change="updateMirror()"
@ -58,6 +64,7 @@
</label>
<label class="ml-1 w-1/2">
<t-checkbox
class="form-checkbox m-1"
name="mirror-y"
v-model="mirror.y"
@change="updateMirror()"
@ -69,6 +76,7 @@
<div class="flex">
<label class="ml-1 w-1/2">
<t-checkbox
class="form-checkbox m-1"
name="update-brush"
v-model="toolbarState.updateBrush"
@change="$store.commit('toggleUpdateBrush', updateBrush)"
@ -77,6 +85,7 @@
</label>
<label class="ml-1 w-1/2">
<t-checkbox
class="form-checkbox m-1"
name="grid"
v-model="toolbarState.gridView"
@change="$store.commit('toggleGridView', gridView)"
@ -85,23 +94,20 @@
</label>
</div>
<hr class="m-3">
<hr class="m-3" />
<t-button
type="button"
v-for="(value, keyToolbar) in toolbarIcons"
:key="keyToolbar + 50"
:class="`w-10 h-10 ${
:class="`w-10 h-10 mt-1 ml-1 ${
currentTool.name === value.name
? 'border-gray-900 bg-blue-500'
: 'border-gray-200 bg-gray-500'
}`"
@click="$store.commit('changeTool', keyToolbar)"
>
<font-awesome-icon
:icon="[value.fa, value.icon]"
size="lg"
/>
<font-awesome-icon :icon="[value.fa, value.icon]" size="lg" />
</t-button>
</t-card>
</vue-draggable-resizable>

7
src/components/parts/BrushCanvas.vue
Fájl megtekintése

@ -14,13 +14,6 @@
</div>
</template>
<style>
.previewcanvas {
background: rgba(0, 0, 0, 0.1);
border: lightgrey 1px solid;
z-index: 0;
}
</style>
<script>
import { mircColours99, blockWidth, blockHeight, cyrb53, getBlocksWidth, filterNullBlocks } from "../../ascii";

10
src/components/parts/ContextMenu.vue
Fájl megtekintése

@ -54,13 +54,3 @@ export default {
},
};
</script>
<style>
.context-menu {
position: fixed;
background: white;
z-index: 999;
outline: none;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
cursor: pointer;
}
</style>

9
src/components/parts/Layers.vue
Fájl megtekintése

@ -2,7 +2,7 @@
<div>
<t-button
type="button"
class="block w-full border-gray-200 bg-gray-500 p-2 m-2"
class="block w-full border-gray-200 bg-gray-500"
@click="addLayer()"
>
Add Layer
@ -80,13 +80,6 @@
</div>
</template>
<style>
.reverseorder {
display: flex;
flex-direction: column-reverse;
}
</style>
<script>
export default {
name: "Layers",

10
src/components/parts/MainBrushCanvas.vue
Fájl megtekintése

@ -21,16 +21,6 @@
</div>
</template>
<style>
.brushcanvas {
background: rgba(0, 0, 0, 0.1);
border: lightgrey 1px solid;
z-index: 0;
}
</style>
<script>
import {
mircColours99,

42
src/style.css
Fájl megtekintése

@ -18,9 +18,47 @@
@import url('https://use.fontawesome.com/releases/v5.0.9/css/all.css');
body {
background: #eee;
background: rgb(58, 58, 58);
}
canvas {
.canvas {
position: absolute;
font-family: "Hack";
background-color: rgba(255, 255, 255, 0.4);
border: lightgrey 1px solid;
z-index: 0;
}
.previewcanvas {
background: rgba(0, 0, 0, 0.1);
border: lightgrey 1px solid;
z-index: 0;
}
.context-menu {
position: fixed;
background: white;
z-index: 999;
outline: none;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
cursor: pointer;
}
.reverseorder {
display: flex;
flex-direction: column-reverse;
}
.brushcanvas {
background: rgba(0, 0, 0, 0.1);
border: lightgrey 1px solid;
z-index: 0;
}
.canvastools {
position: absolute;
font-family: "Hack";
z-index: 10;
cursor: crosshair;
}

16
src/tailwindSettings.js
Fájl megtekintése

@ -70,12 +70,12 @@ export const tailwindCss = {
props: {
fixedClasses: {
wrapper: 'border rounded shadow-sm ',
body: 'p-3',
header: 'border-b p-3 rounded-t',
footer: 'border-t p-3 rounded-b'
body: 'p-1',
header: 'border-b p-1 rounded-t text-sm',
footer: 'border-t p-1 rounded-b'
},
classes: {
wrapper: 'bg-white border-gray-100',
wrapper: 'bg-gray-200 border-gray-100',
body: '',
header: 'border-gray-100',
footer: 'border-gray-100'
@ -96,16 +96,16 @@ export const tailwindCss = {
overlay: 'z-40 overflow-auto scrolling-touch left-0 top-0 bottom-0 right-0 w-full h-full fixed bg-opacity-50',
wrapper: 'relative mx-auto z-50 max-w-lg px-3 py-12',
modal: 'overflow-visible relative rounded',
body: 'p-3',
header: 'border-b p-3 rounded-t',
footer: ' p-3 rounded-b',
body: 'p-1',
header: 'border-b p-1 rounded-t',
footer: ' p-1 rounded-b',
close: 'flex items-center justify-center rounded-full absolute right-0 top-0 -m-3 h-8 w-8 transition duration-100 ease-in-out focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50'
},
classes: {
overlay: 'bg-black',
wrapper: '',
modal: 'bg-white shadow',
body: 'p-3',
body: 'p-1',
header: 'border-gray-100',
footer: 'bg-gray-100',
close: 'bg-gray-100 text-gray-600 hover:bg-gray-200',

27
src/views/Editor.vue
Fájl megtekintése

@ -40,24 +40,6 @@
</div>
</template>
<style>
.canvastools {
position: absolute;
font-family: "Hack";
z-index: 100;
opacity: 0.6;
cursor: crosshair;
}
.canvas {
position: absolute;
font-family: "Hack";
background: rgba(0, 0, 0, 0.8);
border: lightgrey 1px solid;
z-index: 0;
}
</style>
<script>
import {
toolbarIcons,
@ -249,13 +231,6 @@ export default {
watch: {
currentAscii(val, old) {
if (val !== old) {
this.onCanvasResize(
100,
this.top,
this.currentAsciiWidth * blockWidth,
this.currentAsciiHeight * blockHeight
);
this.canvas.width = this.currentAsciiWidth * blockWidth;
this.canvas.height = this.currentAsciiHeight * blockHeight;
@ -446,7 +421,7 @@ export default {
if (this.gridView) {
this.ctx.setLineDash([1]);
this.ctx.strokeStyle = "rgba(0, 0, 0, 0.2)";
this.ctx.strokeStyle = "rgba(0, 0, 0, 1)";
this.ctx.strokeRect(
canvasX,
canvasY,