enhance(client): tweak ui
This commit is contained in:
parent
cbd07cdbe9
commit
49499f3d7d
|
@ -13,6 +13,8 @@ You should also include the user name that made the change.
|
||||||
|
|
||||||
### Improvements
|
### Improvements
|
||||||
- Client: ウィンドウを最大化できるように @syuilo
|
- Client: ウィンドウを最大化できるように @syuilo
|
||||||
|
- Client: Shiftキーを押した状態でリンクをクリックするとアプリ内ウィンドウで開くように @syuilo
|
||||||
|
- Client: デッキを使用している際、Ctrlキーを押した状態でリンクをクリックするとページ遷移を強制できるように @syuilo
|
||||||
- Client: UIのブラッシュアップ @syuilo
|
- Client: UIのブラッシュアップ @syuilo
|
||||||
|
|
||||||
### Bugfixes
|
### Bugfixes
|
||||||
|
|
|
@ -50,7 +50,7 @@ function onContextmenu(ev) {
|
||||||
icon: 'fas fa-expand-alt',
|
icon: 'fas fa-expand-alt',
|
||||||
text: i18n.ts.showInPage,
|
text: i18n.ts.showInPage,
|
||||||
action: () => {
|
action: () => {
|
||||||
router.push(props.to);
|
router.push(props.to, 'forcePage');
|
||||||
},
|
},
|
||||||
}, null, {
|
}, null, {
|
||||||
icon: 'fas fa-external-link-alt',
|
icon: 'fas fa-external-link-alt',
|
||||||
|
@ -79,7 +79,7 @@ function popout() {
|
||||||
popout_(props.to);
|
popout_(props.to);
|
||||||
}
|
}
|
||||||
|
|
||||||
function nav() {
|
function nav(ev: MouseEvent) {
|
||||||
if (props.behavior === 'browser') {
|
if (props.behavior === 'browser') {
|
||||||
location.href = props.to;
|
location.href = props.to;
|
||||||
return;
|
return;
|
||||||
|
@ -93,6 +93,10 @@ function nav() {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
router.push(props.to);
|
if (ev.shiftKey) {
|
||||||
|
return openWindow();
|
||||||
|
}
|
||||||
|
|
||||||
|
router.push(props.to, ev.ctrlKey ? 'forcePage' : null);
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<transition :name="$store.state.animation ? 'window' : ''" appear @after-leave="$emit('closed')">
|
<transition :name="$store.state.animation ? 'window' : ''" appear @after-leave="$emit('closed')">
|
||||||
<div v-if="showing" ref="rootEl" class="ebkgocck">
|
<div v-if="showing" ref="rootEl" class="ebkgocck" :class="{ maximized }">
|
||||||
<div class="body _shadow _narrow_" @mousedown="onBodyMousedown" @keydown="onKeydown">
|
<div class="body _shadow _narrow_" @mousedown="onBodyMousedown" @keydown="onKeydown">
|
||||||
<div class="header" :class="{ mini }" @contextmenu.prevent.stop="onContextmenu">
|
<div class="header" :class="{ mini }" @contextmenu.prevent.stop="onContextmenu">
|
||||||
<span class="left">
|
<span class="left">
|
||||||
|
@ -87,7 +87,7 @@ const emit = defineEmits<{
|
||||||
|
|
||||||
provide('inWindow', true);
|
provide('inWindow', true);
|
||||||
|
|
||||||
let rootEl = $ref<HTMLElement>();
|
let rootEl = $ref<HTMLElement | null>();
|
||||||
let showing = $ref(true);
|
let showing = $ref(true);
|
||||||
let beforeClickedAt = 0;
|
let beforeClickedAt = 0;
|
||||||
let maximized = $ref(false);
|
let maximized = $ref(false);
|
||||||
|
@ -116,8 +116,10 @@ function onContextmenu(ev: MouseEvent) {
|
||||||
|
|
||||||
// 最前面へ移動
|
// 最前面へ移動
|
||||||
function top() {
|
function top() {
|
||||||
|
if (rootEl) {
|
||||||
rootEl.style.zIndex = os.claimZIndex(props.front ? 'middle' : 'low');
|
rootEl.style.zIndex = os.claimZIndex(props.front ? 'middle' : 'low');
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
function maximize() {
|
function maximize() {
|
||||||
maximized = true;
|
maximized = true;
|
||||||
|
@ -412,7 +414,7 @@ defineExpose({
|
||||||
left: 0;
|
left: 0;
|
||||||
|
|
||||||
> .body {
|
> .body {
|
||||||
overflow: hidden;
|
overflow: clip;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
contain: content;
|
contain: content;
|
||||||
|
@ -550,5 +552,11 @@ defineExpose({
|
||||||
cursor: nesw-resize;
|
cursor: nesw-resize;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.maximized {
|
||||||
|
> .body {
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -330,13 +330,11 @@ definePageMetadata(INFO);
|
||||||
width: 34%;
|
width: 34%;
|
||||||
padding-right: 32px;
|
padding-right: 32px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
overflow: auto;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
> .main {
|
> .main {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
overflow: auto;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="_formRoot">
|
<div class="_formRoot">
|
||||||
<div class="llvierxe" :style="{ backgroundImage: $i.bannerUrl ? `url(${ $i.bannerUrl })` : null }">
|
<div class="llvierxe" :style="{ backgroundImage: $i.bannerUrl ? `url(${ $i.bannerUrl })` : null }">
|
||||||
<div class="avatar _acrylic">
|
<div class="avatar">
|
||||||
<MkAvatar class="avatar" :user="$i" :disable-link="true" @click="changeAvatar"/>
|
<MkAvatar class="avatar" :user="$i" :disable-link="true" @click="changeAvatar"/>
|
||||||
<MkButton primary rounded class="avatarEdit" @click="changeAvatar">{{ i18n.ts._profile.changeAvatar }}</MkButton>
|
<MkButton primary rounded class="avatarEdit" @click="changeAvatar">{{ i18n.ts._profile.changeAvatar }}</MkButton>
|
||||||
</div>
|
</div>
|
||||||
|
@ -187,6 +187,7 @@ definePageMetadata({
|
||||||
position: relative;
|
position: relative;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
|
border: solid 1px var(--divider);
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
overflow: clip;
|
overflow: clip;
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue