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
|
||||
- Client: ウィンドウを最大化できるように @syuilo
|
||||
- Client: Shiftキーを押した状態でリンクをクリックするとアプリ内ウィンドウで開くように @syuilo
|
||||
- Client: デッキを使用している際、Ctrlキーを押した状態でリンクをクリックするとページ遷移を強制できるように @syuilo
|
||||
- Client: UIのブラッシュアップ @syuilo
|
||||
|
||||
### Bugfixes
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
||||
|
|
Loading…
Reference in New Issue