enhance(client): tweak ui

This commit is contained in:
syuilo 2022-07-18 05:03:39 +09:00
parent 85f7100d41
commit b76d76b8f9
5 changed files with 23 additions and 10 deletions

View File

@ -13,6 +13,8 @@ You should also include the user name that made the change.
### Improvements
- Client: ウィンドウを最大化できるように @syuilo
- Client: Shiftキーを押した状態でリンクをクリックするとアプリ内ウィンドウで開くように @syuilo
- Client: デッキを使用している際、Ctrlキーを押した状態でリンクをクリックするとページ遷移を強制できるように @syuilo
- Client: UIのブラッシュアップ @syuilo
### Bugfixes

View File

@ -50,7 +50,7 @@ function onContextmenu(ev) {
icon: 'fas fa-expand-alt',
text: i18n.ts.showInPage,
action: () => {
router.push(props.to);
router.push(props.to, 'forcePage');
},
}, null, {
icon: 'fas fa-external-link-alt',
@ -79,7 +79,7 @@ function popout() {
popout_(props.to);
}
function nav() {
function nav(ev: MouseEvent) {
if (props.behavior === 'browser') {
location.href = props.to;
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>

View File

@ -1,6 +1,6 @@
<template>
<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="header" :class="{ mini }" @contextmenu.prevent.stop="onContextmenu">
<span class="left">
@ -87,7 +87,7 @@ const emit = defineEmits<{
provide('inWindow', true);
let rootEl = $ref<HTMLElement>();
let rootEl = $ref<HTMLElement | null>();
let showing = $ref(true);
let beforeClickedAt = 0;
let maximized = $ref(false);
@ -116,8 +116,10 @@ function onContextmenu(ev: MouseEvent) {
//
function top() {
if (rootEl) {
rootEl.style.zIndex = os.claimZIndex(props.front ? 'middle' : 'low');
}
}
function maximize() {
maximized = true;
@ -412,7 +414,7 @@ defineExpose({
left: 0;
> .body {
overflow: hidden;
overflow: clip;
display: flex;
flex-direction: column;
contain: content;
@ -550,5 +552,11 @@ defineExpose({
cursor: nesw-resize;
}
}
&.maximized {
> .body {
border-radius: 0;
}
}
}
</style>

View File

@ -330,13 +330,11 @@ definePageMetadata(INFO);
width: 34%;
padding-right: 32px;
box-sizing: border-box;
overflow: auto;
}
> .main {
flex: 1;
min-width: 0;
overflow: auto;
}
}
}

View File

@ -1,7 +1,7 @@
<template>
<div class="_formRoot">
<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"/>
<MkButton primary rounded class="avatarEdit" @click="changeAvatar">{{ i18n.ts._profile.changeAvatar }}</MkButton>
</div>
@ -187,6 +187,7 @@ definePageMetadata({
position: relative;
background-size: cover;
background-position: center;
border: solid 1px var(--divider);
border-radius: 10px;
overflow: clip;