sim1222/test1
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

refactor(client): Refine routing (#8846)

Browse Source
This commit is contained in:
syuilo
2022-06-20 17:38:49 +09:00
committed by GitHub
parent 30a39a296d
commit 699f24f3dc
149 changed files with 6312 additions and 6670 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
packages/client/src/components/ui/window.vue
View File

@ -4,14 +4,14 @@
<div class="body _window _shadow _narrow_" @mousedown="onBodyMousedown" @keydown="onKeydown">
<div class="header" :class="{ mini }" @contextmenu.prevent.stop="onContextmenu">
<span class="left">
<slot name="headerLeft"></slot>
<button v-for="button in buttonsLeft" v-tooltip="button.title" class="button _button" :class="{ highlighted: button.highlighted }" @click="button.onClick"><i :class="button.icon"></i></button>
</span>
<span class="title" @mousedown.prevent="onHeaderMousedown" @touchstart.prevent="onHeaderMousedown">
<slot name="header"></slot>
</span>
<span class="right">
<slot name="headerRight"></slot>
<button v-if="closeButton" class="_button" @click="close()"><i class="fas fa-times"></i></button>
<button v-for="button in buttonsRight" v-tooltip="button.title" class="button _button" :class="{ highlighted: button.highlighted }" @click="button.onClick"><i :class="button.icon"></i></button>
<button v-if="closeButton" class="button _button" @click="close()"><i class="fas fa-times"></i></button>
</span>
</div>
<div v-if="padding" class="body">
@ -46,41 +46,41 @@ const minHeight = 50;
const minWidth = 250;
function dragListen(fn) {
window.addEventListener('mousemove', fn);
window.addEventListener('touchmove', fn);
window.addEventListener('mousemove', fn);
window.addEventListener('touchmove', fn);
window.addEventListener('mouseleave', dragClear.bind(null, fn));
window.addEventListener('mouseup', dragClear.bind(null, fn));
window.addEventListener('touchend', dragClear.bind(null, fn));
window.addEventListener('mouseup', dragClear.bind(null, fn));
window.addEventListener('touchend', dragClear.bind(null, fn));
}
function dragClear(fn) {
window.removeEventListener('mousemove', fn);
window.removeEventListener('touchmove', fn);
window.removeEventListener('mousemove', fn);
window.removeEventListener('touchmove', fn);
window.removeEventListener('mouseleave', dragClear);
window.removeEventListener('mouseup', dragClear);
window.removeEventListener('touchend', dragClear);
window.removeEventListener('mouseup', dragClear);
window.removeEventListener('touchend', dragClear);
}
export default defineComponent({
provide: {
inWindow: true
inWindow: true,
},
props: {
padding: {
type: Boolean,
required: false,
default: false
default: false,
},
initialWidth: {
type: Number,
required: false,
default: 400
default: 400,
},
initialHeight: {
type: Number,
required: false,
default: null
default: null,
},
canResize: {
type: Boolean,
@ -105,7 +105,17 @@ export default defineComponent({
contextmenu: {
type: Array,
required: false,
}
},
buttonsLeft: {
type: Array,
required: false,
default: [],
},
buttonsRight: {
type: Array,
required: false,
default: [],
},
},
emits: ['closed'],
@ -162,7 +172,10 @@ export default defineComponent({
this.top();
},
onHeaderMousedown(evt) {
onHeaderMousedown(evt: MouseEvent) {
// 右クリックはコンテキストメニューを開こうとした可能性が高いため無視
if (evt.button === 2) return;
const main = this.$el as any;
if (!contains(main, document.activeElement)) main.focus();
@ -356,12 +369,12 @@ export default defineComponent({
const browserHeight = window.innerHeight;
const windowWidth = main.offsetWidth;
const windowHeight = main.offsetHeight;
if (position.left < 0) main.style.left = 0; // 左はみ出し
if (position.top + windowHeight > browserHeight) main.style.top = browserHeight - windowHeight + 'px'; // 下はみ出し
if (position.left + windowWidth > browserWidth) main.style.left = browserWidth - windowWidth + 'px'; // 右はみ出し
if (position.top < 0) main.style.top = 0; // 上はみ出し
}
}
if (position.left < 0) main.style.left = 0; // 左はみ出し
if (position.top + windowHeight > browserHeight) main.style.top = browserHeight - windowHeight + 'px'; // 下はみ出し
if (position.left + windowWidth > browserWidth) main.style.left = browserWidth - windowWidth + 'px'; // 右はみ出し
if (position.top < 0) main.style.top = 0; // 上はみ出し
},
},
});
</script>
@ -404,17 +417,25 @@ export default defineComponent({
border-bottom: solid 1px var(--divider);
> .left, > .right {
> ::v-deep(button) {
> .button {
height: var(--height);
width: var(--height);
&:hover {
color: var(--fgHighlighted);
}
&.highlighted {
color: var(--accent);
}
}
}
> .left {
margin-right: 16px;
}
> .right {
min-width: 16px;
}