时钟设置对话框增加新增字段
This commit is contained in:
fangxiang
parent
f8b859144a
commit
575774df8b
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "media_player_client",
|
||||
"version": "1.4.6",
|
||||
"version": "1.4.7",
|
||||
"description": "A Quasar Framework app",
|
||||
"productName": "MediaPlayerClient",
|
||||
"author": "fangxiang <fangxiang@cloudview.work>",
|
||||
|
|
|
|||
|
|
@ -51,13 +51,21 @@
|
|||
>{{ $t("server version") }}: {{ server_version }}</q-item-section
|
||||
>
|
||||
</q-item>
|
||||
<q-item v-if="click_count > target_click_count">
|
||||
<q-item
|
||||
v-if="
|
||||
click_count > target_click_count || $store.state.advanced_debug
|
||||
"
|
||||
>
|
||||
<q-item-section
|
||||
>{{ $t("server commit hash") }}:
|
||||
{{ server_commit_hash }}</q-item-section
|
||||
>
|
||||
</q-item>
|
||||
<div v-if="click_count > target_click_count">
|
||||
<div
|
||||
v-if="
|
||||
click_count > target_click_count || $store.state.advanced_debug
|
||||
"
|
||||
>
|
||||
<q-item>
|
||||
<q-item-section
|
||||
>{{ $t("server branch name") }}:
|
||||
|
|
@ -83,16 +91,6 @@
|
|||
>
|
||||
</q-item>
|
||||
</div>
|
||||
<q-item
|
||||
v-if="
|
||||
click_count > target_click_count * 2 &&
|
||||
click_count < target_click_count * 2 + 2
|
||||
"
|
||||
>
|
||||
<q-item-section
|
||||
><q-btn :label="$t('restart')" @click="restart_device" />
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
|
|
@ -130,12 +128,6 @@ export default defineComponent({
|
|||
let kernel_version = ref("unknow");
|
||||
let rootfs_version = ref("unknow");
|
||||
|
||||
const restart_device = () => {
|
||||
GlobalData.getInstance()
|
||||
.getCurrentClient()
|
||||
?.restartDevice(1000 * 5);
|
||||
};
|
||||
|
||||
return {
|
||||
show_dialog,
|
||||
click_count,
|
||||
|
|
@ -148,7 +140,6 @@ export default defineComponent({
|
|||
kernel_version,
|
||||
rootfs_version,
|
||||
|
||||
restart_device,
|
||||
async showDialog() {
|
||||
click_count.value = 0;
|
||||
show_dialog.value = true;
|
||||
|
|
|
|||
|
|
@ -38,10 +38,7 @@
|
|||
|
||||
<q-separator />
|
||||
|
||||
<q-card-section
|
||||
style="max-height: 50vh; width: 55vw; height: 50vh"
|
||||
class="scroll"
|
||||
>
|
||||
<q-card-section style="max-height: 68vh; width: 55vw" class="scroll">
|
||||
<q-list>
|
||||
<q-item v-if="false">
|
||||
<q-item-section avatar class="head_1">
|
||||
|
|
@ -52,13 +49,188 @@
|
|||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section avatar class="head_1">
|
||||
{{ $t("font size") }}
|
||||
<q-item-section>
|
||||
<q-item>
|
||||
<q-item-section avatar class="head_1">
|
||||
{{ $t("clock type") }}
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-select
|
||||
v-model="clock_entity.type"
|
||||
:options="[
|
||||
{
|
||||
label: $t('normal clock'),
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
label: $t('analog clock'),
|
||||
value: 2,
|
||||
},
|
||||
]"
|
||||
emit-value
|
||||
map-options
|
||||
>
|
||||
</q-select>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-input v-model="clock_entity.font_size" type="number" />
|
||||
<q-item>
|
||||
<q-item-section avatar class="head_1">
|
||||
{{ $t("font size") }}
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-input v-model="clock_entity.font_size" type="number" />
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-item-section>
|
||||
<q-item-section avatar>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section class="q-mr-md">
|
||||
<q-item>
|
||||
<q-item-section avatar class="head_1">
|
||||
{{ $t("font color") }}
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-input
|
||||
v-model="clock_entity.font_color"
|
||||
:rules="['anyColor']"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon name="colorize" class="cursor-pointer">
|
||||
<q-popup-proxy
|
||||
cover
|
||||
transition-show="scale"
|
||||
transition-hide="scale"
|
||||
>
|
||||
<q-color v-model="clock_entity.font_color" />
|
||||
</q-popup-proxy>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item>
|
||||
<q-item-section avatar class="head_1">
|
||||
{{ $t("background color") }}
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-input
|
||||
v-model="clock_entity.background_color"
|
||||
:rules="['anyColor']"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon name="colorize" class="cursor-pointer">
|
||||
<q-popup-proxy
|
||||
cover
|
||||
transition-show="scale"
|
||||
transition-hide="scale"
|
||||
>
|
||||
<q-color v-model="clock_entity.background_color" />
|
||||
</q-popup-proxy>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item>
|
||||
<q-item-section avatar class="head_1">
|
||||
{{ $t("date format") }}
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-select
|
||||
v-model="clock_entity.date_format"
|
||||
:options="date_format_options"
|
||||
emit-value
|
||||
map-options
|
||||
>
|
||||
</q-select>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-item-section>
|
||||
|
||||
<q-item-section>
|
||||
<q-item>
|
||||
<q-item-section avatar class="head_1">
|
||||
{{ $t("time format") }}
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-select
|
||||
v-model="clock_entity.time_format"
|
||||
:options="time_format_options"
|
||||
emit-value
|
||||
map-options
|
||||
>
|
||||
</q-select>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item>
|
||||
<q-item-section avatar class="head_2">
|
||||
{{ $t("text") }}
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-input
|
||||
:disable="clock_entity.multiple_lines"
|
||||
v-model="clock_entity.text"
|
||||
/>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-item-section>
|
||||
<q-tooltip v-if="clock_entity.multiple_lines">
|
||||
{{
|
||||
$t(
|
||||
"the current property is only valid for single-line displays"
|
||||
)
|
||||
}}</q-tooltip
|
||||
>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-checkbox
|
||||
left-label
|
||||
v-model="clock_entity.show_date"
|
||||
:label="$t('date')"
|
||||
/>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-checkbox
|
||||
left-label
|
||||
v-model="clock_entity.show_time"
|
||||
:label="$t('time')"
|
||||
/>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-checkbox
|
||||
left-label
|
||||
v-model="clock_entity.show_week"
|
||||
:label="$t('week')"
|
||||
/>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-checkbox
|
||||
v-model="clock_entity.background_transparent"
|
||||
left-label
|
||||
:label="$t('background transparent')"
|
||||
/>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-checkbox
|
||||
left-label
|
||||
v-model="clock_entity.multiple_lines"
|
||||
:label="$t('multiple lines')"
|
||||
/>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-checkbox
|
||||
v-model="clock_entity.bold"
|
||||
left-label
|
||||
|
|
@ -66,59 +238,128 @@
|
|||
/>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section avatar class="head_1">
|
||||
{{ $t("font color") }}
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-input
|
||||
v-model="clock_entity.font_color"
|
||||
:rules="['anyColor']"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon name="colorize" class="cursor-pointer">
|
||||
<q-popup-proxy
|
||||
cover
|
||||
transition-show="scale"
|
||||
transition-hide="scale"
|
||||
>
|
||||
<q-color v-model="clock_entity.font_color" />
|
||||
</q-popup-proxy>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section avatar class="head_1">
|
||||
{{ $t("background color") }}
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-input
|
||||
v-model="clock_entity.background_color"
|
||||
:rules="['anyColor']"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon name="colorize" class="cursor-pointer">
|
||||
<q-popup-proxy
|
||||
cover
|
||||
transition-show="scale"
|
||||
transition-hide="scale"
|
||||
>
|
||||
<q-color v-model="clock_entity.background_color" />
|
||||
</q-popup-proxy>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</q-item-section>
|
||||
<q-item-section avatar>
|
||||
<q-checkbox
|
||||
v-model="clock_entity.background_transparent"
|
||||
left-label
|
||||
:label="$t('background transparent')"
|
||||
/>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<div class="q-mt-xs" v-if="clock_entity.type == 2">
|
||||
<q-separator class="q-mb-md" />
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-btn
|
||||
flat
|
||||
no-caps
|
||||
class="fit"
|
||||
:style="{
|
||||
'background-color':
|
||||
clock_entity.analog_hour_pointer_color,
|
||||
color:
|
||||
getForegroundColor(
|
||||
clock_entity.analog_hour_pointer_color
|
||||
) + ' !important',
|
||||
}"
|
||||
:label="$t('hour pointer color')"
|
||||
>
|
||||
<q-popup-proxy
|
||||
cover
|
||||
transition-show="scale"
|
||||
transition-hide="scale"
|
||||
>
|
||||
<q-color
|
||||
v-model="clock_entity.analog_hour_pointer_color"
|
||||
/> </q-popup-proxy></q-btn
|
||||
></q-item-section>
|
||||
<q-item-section>
|
||||
<q-btn
|
||||
flat
|
||||
no-caps
|
||||
class="fit"
|
||||
:style="{
|
||||
'background-color': clock_entity.analog_minute_color,
|
||||
color:
|
||||
getForegroundColor(clock_entity.analog_minute_color) +
|
||||
' !important',
|
||||
}"
|
||||
:label="$t('minute mark color')"
|
||||
>
|
||||
<q-popup-proxy
|
||||
cover
|
||||
transition-show="scale"
|
||||
transition-hide="scale"
|
||||
>
|
||||
<q-color
|
||||
v-model="clock_entity.analog_minute_color"
|
||||
/> </q-popup-proxy
|
||||
></q-btn>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-btn
|
||||
flat
|
||||
no-caps
|
||||
class="fit"
|
||||
:style="{
|
||||
'background-color':
|
||||
clock_entity.analog_minute_pointer_color,
|
||||
color:
|
||||
getForegroundColor(
|
||||
clock_entity.analog_minute_pointer_color
|
||||
) + ' !important',
|
||||
}"
|
||||
:label="$t('minute pointer color')"
|
||||
>
|
||||
<q-popup-proxy
|
||||
cover
|
||||
transition-show="scale"
|
||||
transition-hide="scale"
|
||||
>
|
||||
<q-color
|
||||
v-model="clock_entity.analog_minute_pointer_color"
|
||||
/> </q-popup-proxy></q-btn
|
||||
></q-item-section>
|
||||
<q-item-section>
|
||||
<q-btn
|
||||
flat
|
||||
no-caps
|
||||
class="fit"
|
||||
:style="{
|
||||
'background-color': clock_entity.analog_second_color,
|
||||
color:
|
||||
getForegroundColor(clock_entity.analog_second_color) +
|
||||
' !important',
|
||||
}"
|
||||
:label="$t('second mark color')"
|
||||
>
|
||||
<q-popup-proxy
|
||||
cover
|
||||
transition-show="scale"
|
||||
transition-hide="scale"
|
||||
>
|
||||
<q-color
|
||||
v-model="clock_entity.analog_second_color"
|
||||
/> </q-popup-proxy></q-btn
|
||||
></q-item-section>
|
||||
<q-item-section>
|
||||
<q-btn
|
||||
flat
|
||||
no-caps
|
||||
class="fit"
|
||||
:style="{
|
||||
'background-color':
|
||||
clock_entity.analog_second_pointer_color,
|
||||
color:
|
||||
getForegroundColor(
|
||||
clock_entity.analog_second_pointer_color
|
||||
) + ' !important',
|
||||
}"
|
||||
:label="$t('second pointer color')"
|
||||
>
|
||||
<q-popup-proxy
|
||||
cover
|
||||
transition-show="scale"
|
||||
transition-hide="scale"
|
||||
>
|
||||
<q-color
|
||||
v-model="clock_entity.analog_second_pointer_color"
|
||||
/> </q-popup-proxy></q-btn
|
||||
></q-item-section>
|
||||
</q-item>
|
||||
</div>
|
||||
</q-list>
|
||||
</q-card-section>
|
||||
|
||||
|
|
@ -148,7 +389,11 @@
|
|||
|
||||
<style scoped>
|
||||
.head_1 {
|
||||
width: 15%;
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.head_2 {
|
||||
width: 12%;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -156,7 +401,7 @@
|
|||
import { defineComponent, ref, Ref, watch, computed } from "vue";
|
||||
import { useStore } from "src/store";
|
||||
import GlobalData from "src/common/GlobalData";
|
||||
import { useQuasar } from "quasar";
|
||||
import { useQuasar, date as DateHelper } from "quasar";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import ClockWindowParamEntity from "src/entities/ClockWindowParamEntity";
|
||||
|
||||
|
|
@ -169,6 +414,33 @@ export default defineComponent({
|
|||
let $q = useQuasar();
|
||||
let $t = useI18n();
|
||||
|
||||
const now = Date.now();
|
||||
const date_format_options = ref([
|
||||
{
|
||||
label: DateHelper.formatDate(now, "YYYY年MM月DD日"),
|
||||
value: "yyyy年MM月dd日",
|
||||
},
|
||||
{
|
||||
label: DateHelper.formatDate(now, "YYYY/MM/DD"),
|
||||
value: "yyyy/MM/dd",
|
||||
},
|
||||
{
|
||||
label: DateHelper.formatDate(now, "YYYY-MM-DD"),
|
||||
value: "yyyy-MM-dd",
|
||||
},
|
||||
]);
|
||||
|
||||
const time_format_options = ref([
|
||||
{
|
||||
label: DateHelper.formatDate(now, "HH时mm分ss秒"),
|
||||
value: "hh时mm分ss秒",
|
||||
},
|
||||
{
|
||||
label: DateHelper.formatDate(now, "HH:mm:ss"),
|
||||
value: "hh:mm:ss",
|
||||
},
|
||||
]);
|
||||
|
||||
let show_dialog = ref(false);
|
||||
let loading = ref(false);
|
||||
|
||||
|
|
@ -191,6 +463,9 @@ export default defineComponent({
|
|||
show_dialog,
|
||||
loading,
|
||||
clock_entity,
|
||||
date_format_options,
|
||||
time_format_options,
|
||||
|
||||
showDialogAsync(options: any) {
|
||||
if (_resolove) {
|
||||
_resolove();
|
||||
|
|
@ -227,6 +502,56 @@ export default defineComponent({
|
|||
} catch {}
|
||||
loading.value = false;
|
||||
},
|
||||
getForegroundColor(color: string) {
|
||||
// rgbToHex(0, 51, 255) => "#0033ff"
|
||||
function rgbToHex(r: any, g: any, b: any) {
|
||||
return (
|
||||
"#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)
|
||||
);
|
||||
}
|
||||
|
||||
//hexToRgb("#0033ff") => {r: 0, g: 51, b: 255}
|
||||
//hexToRgb("#0033ff").g => 51
|
||||
function hexToRgb(hex: any) {
|
||||
// Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
|
||||
var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
|
||||
hex = hex.replace(
|
||||
shorthandRegex,
|
||||
function (m: any, r: any, g: any, b: any) {
|
||||
return r + r + g + g + b + b;
|
||||
}
|
||||
);
|
||||
|
||||
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
||||
return result
|
||||
? {
|
||||
r: parseInt(result[1], 16),
|
||||
g: parseInt(result[2], 16),
|
||||
b: parseInt(result[3], 16),
|
||||
}
|
||||
: null;
|
||||
}
|
||||
|
||||
//灰度 = 红×0.299 + 绿×0.587 + 蓝×0.114
|
||||
function getGrayLevelFromRgb(r: any, g: any, b: any) {
|
||||
return (0.299 * r + 0.587 * g + 0.114 * b) / 255;
|
||||
}
|
||||
|
||||
// getGrayLevel('#167df0') => 0.4208352941176471
|
||||
function getGrayLevel(hex: any) {
|
||||
var rgb = hexToRgb(hex);
|
||||
if (rgb) {
|
||||
return getGrayLevelFromRgb(rgb.r, rgb.g, rgb.b);
|
||||
}
|
||||
return "#000000";
|
||||
}
|
||||
|
||||
function getColor(background_color: any) {
|
||||
var grayLevel = getGrayLevel(background_color);
|
||||
return grayLevel > 0.5 ? "#000000b3" : "#fff";
|
||||
}
|
||||
return getColor(color ?? "#000000");
|
||||
},
|
||||
};
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -7,4 +7,17 @@ export default class ClockWindowParamEntity {
|
|||
font_color = "#000000";
|
||||
background_color = "#000000";
|
||||
background_transparent = true;
|
||||
|
||||
date_format = "yyyy/MM/dd";
|
||||
time_format = "hh:mm:ss";
|
||||
show_date = true;
|
||||
show_time = true;
|
||||
show_week = true;
|
||||
analog_minute_color = "#ff0000";
|
||||
analog_minute_pointer_color = "#00ff00";
|
||||
analog_second_color = "#00ff00";
|
||||
analog_second_pointer_color = "#0000ff";
|
||||
analog_hour_pointer_color = "#ff0000";
|
||||
text = "";
|
||||
multiple_lines = false;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -514,4 +514,20 @@ export default {
|
|||
"lossless ": "无损",
|
||||
"picture quality": "画质",
|
||||
set: "设置",
|
||||
"time format": "时间格式",
|
||||
"date format": "日期格式",
|
||||
"multiple lines": "多行",
|
||||
week: "星期",
|
||||
date: "日期",
|
||||
"normal clock": "普通时钟",
|
||||
"analog clock": "模拟时钟",
|
||||
"clock type": "时钟类型",
|
||||
text: "文本",
|
||||
"hour pointer color": "时针",
|
||||
"minute pointer color": "分针",
|
||||
"second pointer color": "秒针",
|
||||
"minute mark color": "分标",
|
||||
"second mark color": "秒标",
|
||||
"the current property is only valid for single-line displays":
|
||||
"当前属性只对单行显示有效",
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue