a1gard
/
xshop
mirror of https://github.com/4xmen/xshop.git
1
0
Fork 1
Code Issues 1 Packages Projects Releases Wiki Activity

fixed bug gfx vue component

Browse Source
pull/44/head
A1Gard 5 months ago
parent ecf6301212
commit 60698fce0c
1 changed files with 52 additions and 48 deletions
Show Stats Download Patch File Download Diff File

100
resources/js/components/Gfxer.vue
Unescape Escape View File

@ -7,34 +7,37 @@
<i class="ri-brush-2-line"></i> <i class="ri-brush-2-line"></i>
GFX GFX
</h3> </h3>
<div v-for="(v,i) in values" class="p-2 item-gfx"> <template v-for="(v,i) in values" >
<div class="float-end" <div v-if="v != undefined" class="p-2 item-gfx">
v-if="i == 'background' || i == 'primary' || i == 'secondary' || i == 'text'"> <div class="float-end"
<input type="color" v-model="values[i]" class="form-control-color"> v-if="i == 'background' || i == 'primary' || i == 'secondary' || i == 'text'">
<input type="color" v-model="values[i]" class="form-control-color">
</div>
<label class="pt-2 mb-1">
{{ titles[i] }}
</label>
<br>
<template v-if="i == 'border-radius'">
<border-radios-input v-model="values[i]"></border-radios-input>
</template>
<template v-if="i == 'shadow'">
<shadow-input v-model="values[i]"></shadow-input>
</template>
<template v-if="i == 'font'">
<select v-model="values[i]" class="form-control">
<option value="Vazir"> Vazir</option>
</select>
</template>
<template v-if="i == 'container'">
<select v-model="values[i]" class="form-control">
<option value="container"> Container</option>
<option value="container-fluid"> Container fluid</option>
</select>
</template>
<input :name="'gfx['+i+']'" :type="_dbg_" :value="v">
</div> </div>
<label class="pt-2 mb-1"> </template>
{{ titles[i] }}
</label>
<br>
<template v-if="i == 'border-radius'">
<border-radios-input v-model="values[i]"></border-radios-input>
</template>
<template v-if="i == 'shadow'">
<shadow-input v-model="values[i]"></shadow-input>
</template>
<template v-if="i == 'font'">
<select v-model="values[i]" class="form-control">
<option value="Vazir"> Vazir</option>
</select>
</template>
<template v-if="i == 'container'">
<select v-model="values[i]" class="form-control">
<option value="container"> Container</option>
<option value="container-fluid"> Container fluid</option>
</select>
</template>
<input :name="'gfx['+i+']'" :type="_dbg_" :value="v">
</div>
<div class="p-2"> <div class="p-2">
<select v-model="device" class="form-control"> <select v-model="device" class="form-control">
<option value="desktop"> Desktop</option> <option value="desktop"> Desktop</option>
@ -128,13 +131,13 @@
<i class="ri-wifi-line"></i> <i class="ri-wifi-line"></i>
</span> </span>
<span> <span>
{{nowTime}} {{ nowTime }}
</span> </span>
<i class="ri-battery-low-line"></i> <i class="ri-battery-low-line"></i>
</div> </div>
<div :style="`background: ${values.primary};`" > <div :style="`background: ${values.primary};`">
<div class="diff p-2"> <div class="diff p-2">
{{tempUrl}} {{ tempUrl }}
</div> </div>
</div> </div>
</div> </div>
@ -258,46 +261,46 @@ export default {
return css; return css;
}, },
tempUrl(){ tempUrl() {
return window.location.hostname; return window.location.hostname;
}, },
nowTime(){ nowTime() {
const dt = new Date(); const dt = new Date();
return dt.getHours()+':'+dt.getMinutes(); return dt.getHours() + ':' + dt.getMinutes();
}, },
lighter(){ lighter() {
if (this.values.primary != undefined){ if (this.values.primary != undefined) {
return this.lightenColor(this.values.primary); return this.lightenColor(this.values.primary);
} }
} }
}, },
methods: { methods: {
lightenColor(col,amt = 20) { lightenColor(col, amt = 20) {
var usePound = false; var usePound = false;
if ( col[0] == "#" ) { if (col[0] == "#") {
col = col.slice(1); col = col.slice(1);
usePound = true; usePound = true;
} }
var num = parseInt(col,16); var num = parseInt(col, 16);
var r = (num >> 16) + amt; var r = (num >> 16) + amt;
if ( r > 255 ) r = 255; if (r > 255) r = 255;
else if (r < 0) r = 0; else if (r < 0) r = 0;
var b = ((num >> 8) & 0x00FF) + amt; var b = ((num >> 8) & 0x00FF) + amt;
if ( b > 255 ) b = 255; if (b > 255) b = 255;
else if (b < 0) b = 0; else if (b < 0) b = 0;
var g = (num & 0x0000FF) + amt; var g = (num & 0x0000FF) + amt;
if ( g > 255 ) g = 255; if (g > 255) g = 255;
else if ( g < 0 ) g = 0; else if (g < 0) g = 0;
return (usePound?"#":"") + (g | (b << 8) | (r << 16)).toString(16); return (usePound ? "#" : "") + (g | (b << 8) | (r << 16)).toString(16);
} }
} }
} }
@ -317,7 +320,7 @@ export default {
overflow-y: auto; overflow-y: auto;
} }
#m-content{ #m-content {
border-radius: 20px; border-radius: 20px;
overflow: hidden; overflow: hidden;
} }
@ -393,7 +396,8 @@ export default {
padding: 3rem; padding: 3rem;
} }
.diff{ .diff {
filter: invert(1);mix-blend-mode: difference; filter: invert(1);
mix-blend-mode: difference;
} }
</style> </style>

Write Preview
Loading…
Cancel
Save