Refactor
This commit is contained in:
parent
6b0d48423d
commit
7bbf022978
|
@ -37,10 +37,6 @@ export default (opts: Opts = {}) => ({
|
||||||
'ctrl+q': this.renoteDirectly,
|
'ctrl+q': this.renoteDirectly,
|
||||||
'up|k|shift+tab': this.focusBefore,
|
'up|k|shift+tab': this.focusBefore,
|
||||||
'down|j|tab': this.focusAfter,
|
'down|j|tab': this.focusAfter,
|
||||||
'shift+up': () => this.$emit('parentFocus', 'up'),
|
|
||||||
'shift+down': () => this.$emit('parentFocus', 'down'),
|
|
||||||
'shift+left': () => this.$emit('parentFocus', 'left'),
|
|
||||||
'shift+right': () => this.$emit('parentFocus', 'right'),
|
|
||||||
'esc': this.blur,
|
'esc': this.blur,
|
||||||
'm|o': () => this.menu(true),
|
'm|o': () => this.menu(true),
|
||||||
's': this.toggleShowContent,
|
's': this.toggleShowContent,
|
||||||
|
|
|
@ -1,14 +1,14 @@
|
||||||
<template>
|
<template>
|
||||||
<x-widgets-column v-if="column.type == 'widgets'" :column="column" :is-stacked="isStacked"/>
|
<x-widgets-column v-if="column.type == 'widgets'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
|
||||||
<x-notifications-column v-else-if="column.type == 'notifications'" :column="column" :is-stacked="isStacked"/>
|
<x-notifications-column v-else-if="column.type == 'notifications'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
|
||||||
<x-tl-column v-else-if="column.type == 'home'" :column="column" :is-stacked="isStacked" @parentFocus="parentFocus"/>
|
<x-tl-column v-else-if="column.type == 'home'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
|
||||||
<x-tl-column v-else-if="column.type == 'local'" :column="column" :is-stacked="isStacked" @parentFocus="parentFocus"/>
|
<x-tl-column v-else-if="column.type == 'local'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
|
||||||
<x-tl-column v-else-if="column.type == 'hybrid'" :column="column" :is-stacked="isStacked" @parentFocus="parentFocus"/>
|
<x-tl-column v-else-if="column.type == 'hybrid'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
|
||||||
<x-tl-column v-else-if="column.type == 'global'" :column="column" :is-stacked="isStacked" @parentFocus="parentFocus"/>
|
<x-tl-column v-else-if="column.type == 'global'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
|
||||||
<x-tl-column v-else-if="column.type == 'list'" :column="column" :is-stacked="isStacked" @parentFocus="parentFocus"/>
|
<x-tl-column v-else-if="column.type == 'list'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
|
||||||
<x-tl-column v-else-if="column.type == 'hashtag'" :column="column" :is-stacked="isStacked" @parentFocus="parentFocus"/>
|
<x-tl-column v-else-if="column.type == 'hashtag'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
|
||||||
<x-mentions-column v-else-if="column.type == 'mentions'" :column="column" :is-stacked="isStacked" @parentFocus="parentFocus"/>
|
<x-mentions-column v-else-if="column.type == 'mentions'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
|
||||||
<x-direct-column v-else-if="column.type == 'direct'" :column="column" :is-stacked="isStacked" @parentFocus="parentFocus"/>
|
<x-direct-column v-else-if="column.type == 'direct'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
|
@ -43,11 +43,7 @@ export default Vue.extend({
|
||||||
methods: {
|
methods: {
|
||||||
focus() {
|
focus() {
|
||||||
this.$children[0].focus();
|
this.$children[0].focus();
|
||||||
},
|
}
|
||||||
|
|
||||||
parentFocus(direction) {
|
|
||||||
this.$emit('parentFocus', direction);
|
|
||||||
},
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -2,7 +2,8 @@
|
||||||
<div class="dnpfarvgbnfmyzbdquhhzyxcmstpdqzs" :class="{ naked, narrow, active, isStacked, draghover, dragging, dropready }"
|
<div class="dnpfarvgbnfmyzbdquhhzyxcmstpdqzs" :class="{ naked, narrow, active, isStacked, draghover, dragging, dropready }"
|
||||||
@dragover.prevent.stop="onDragover"
|
@dragover.prevent.stop="onDragover"
|
||||||
@dragleave="onDragleave"
|
@dragleave="onDragleave"
|
||||||
@drop.prevent.stop="onDrop">
|
@drop.prevent.stop="onDrop"
|
||||||
|
v-hotkey="keymap">
|
||||||
<header :class="{ indicate: count > 0 }"
|
<header :class="{ indicate: count > 0 }"
|
||||||
draggable="true"
|
draggable="true"
|
||||||
@click="goTop"
|
@click="goTop"
|
||||||
|
@ -66,6 +67,15 @@ export default Vue.extend({
|
||||||
computed: {
|
computed: {
|
||||||
isTemporaryColumn(): boolean {
|
isTemporaryColumn(): boolean {
|
||||||
return this.column == null;
|
return this.column == null;
|
||||||
|
},
|
||||||
|
|
||||||
|
keymap(): any {
|
||||||
|
return {
|
||||||
|
'shift+up': () => this.$parent.$emit('parentFocus', 'up'),
|
||||||
|
'shift+down': () => this.$parent.$emit('parentFocus', 'down'),
|
||||||
|
'shift+left': () => this.$parent.$emit('parentFocus', 'left'),
|
||||||
|
'shift+right': () => this.$parent.$emit('parentFocus', 'right'),
|
||||||
|
};
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
<x-column :name="name" :column="column" :is-stacked="isStacked">
|
<x-column :name="name" :column="column" :is-stacked="isStacked">
|
||||||
<span slot="header">%fa:envelope R%{{ name }}</span>
|
<span slot="header">%fa:envelope R%{{ name }}</span>
|
||||||
|
|
||||||
<x-direct @parentFocus="parentFocus"/>
|
<x-direct/>
|
||||||
</x-column>
|
</x-column>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -38,11 +38,7 @@ export default Vue.extend({
|
||||||
methods: {
|
methods: {
|
||||||
focus() {
|
focus() {
|
||||||
this.$refs.tl.focus();
|
this.$refs.tl.focus();
|
||||||
},
|
}
|
||||||
|
|
||||||
parentFocus(direction) {
|
|
||||||
this.$emit('parentFocus', direction);
|
|
||||||
},
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<x-notes ref="timeline" :more="existMore ? more : null" @parentFocus="parentFocus"/>
|
<x-notes ref="timeline" :more="existMore ? more : null"/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
|
@ -93,11 +93,7 @@ export default Vue.extend({
|
||||||
|
|
||||||
focus() {
|
focus() {
|
||||||
this.$refs.timeline.focus();
|
this.$refs.timeline.focus();
|
||||||
},
|
}
|
||||||
|
|
||||||
parentFocus(direction) {
|
|
||||||
this.$emit('parentFocus', direction);
|
|
||||||
},
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<x-notes ref="timeline" :more="existMore ? more : null" :media-view="mediaView" @parentFocus="parentFocus"/>
|
<x-notes ref="timeline" :more="existMore ? more : null" :media-view="mediaView"/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
|
@ -118,11 +118,7 @@ export default Vue.extend({
|
||||||
|
|
||||||
focus() {
|
focus() {
|
||||||
this.$refs.timeline.focus();
|
this.$refs.timeline.focus();
|
||||||
},
|
}
|
||||||
|
|
||||||
parentFocus(direction) {
|
|
||||||
this.$emit('parentFocus', direction);
|
|
||||||
},
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<x-notes ref="timeline" :more="existMore ? more : null" :media-view="mediaView" @parentFocus="parentFocus"/>
|
<x-notes ref="timeline" :more="existMore ? more : null" :media-view="mediaView"/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
|
@ -128,11 +128,7 @@ export default Vue.extend({
|
||||||
|
|
||||||
focus() {
|
focus() {
|
||||||
this.$refs.timeline.focus();
|
this.$refs.timeline.focus();
|
||||||
},
|
}
|
||||||
|
|
||||||
parentFocus(direction) {
|
|
||||||
this.$emit('parentFocus', direction);
|
|
||||||
},
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
<x-column :name="name" :column="column" :is-stacked="isStacked">
|
<x-column :name="name" :column="column" :is-stacked="isStacked">
|
||||||
<span slot="header">%fa:at%{{ name }}</span>
|
<span slot="header">%fa:at%{{ name }}</span>
|
||||||
|
|
||||||
<x-mentions ref="tl" @parentFocus="parentFocus"/>
|
<x-mentions ref="tl"/>
|
||||||
</x-column>
|
</x-column>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -38,11 +38,7 @@ export default Vue.extend({
|
||||||
methods: {
|
methods: {
|
||||||
focus() {
|
focus() {
|
||||||
this.$refs.tl.focus();
|
this.$refs.tl.focus();
|
||||||
},
|
}
|
||||||
|
|
||||||
parentFocus(direction) {
|
|
||||||
this.$emit('parentFocus', direction);
|
|
||||||
},
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<x-notes ref="timeline" :more="existMore ? more : null" @parentFocus="parentFocus"/>
|
<x-notes ref="timeline" :more="existMore ? more : null"/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
|
@ -89,11 +89,7 @@ export default Vue.extend({
|
||||||
|
|
||||||
focus() {
|
focus() {
|
||||||
this.$refs.timeline.focus();
|
this.$refs.timeline.focus();
|
||||||
},
|
}
|
||||||
|
|
||||||
parentFocus(direction) {
|
|
||||||
this.$emit('parentFocus', direction);
|
|
||||||
},
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -22,8 +22,7 @@
|
||||||
:key="note.id"
|
:key="note.id"
|
||||||
@update:note="onNoteUpdated(i, $event)"
|
@update:note="onNoteUpdated(i, $event)"
|
||||||
:media-view="mediaView"
|
:media-view="mediaView"
|
||||||
:mini="true"
|
:mini="true"/>
|
||||||
@parentFocus="parentFocus"/>
|
|
||||||
<p class="date" :key="note.id + '_date'" v-if="i != notes.length - 1 && note._date != _notes[i + 1]._date">
|
<p class="date" :key="note.id + '_date'" v-if="i != notes.length - 1 && note._date != _notes[i + 1]._date">
|
||||||
<span>%fa:angle-up%{{ note._datetext }}</span>
|
<span>%fa:angle-up%{{ note._datetext }}</span>
|
||||||
<span>%fa:angle-down%{{ _notes[i + 1]._datetext }}</span>
|
<span>%fa:angle-down%{{ _notes[i + 1]._datetext }}</span>
|
||||||
|
@ -111,10 +110,6 @@ export default Vue.extend({
|
||||||
(this.$refs.notes as any).children[0].focus ? (this.$refs.notes as any).children[0].focus() : (this.$refs.notes as any).$el.children[0].focus();
|
(this.$refs.notes as any).children[0].focus ? (this.$refs.notes as any).children[0].focus() : (this.$refs.notes as any).$el.children[0].focus();
|
||||||
},
|
},
|
||||||
|
|
||||||
parentFocus(direction) {
|
|
||||||
this.$emit('parentFocus', direction);
|
|
||||||
},
|
|
||||||
|
|
||||||
onNoteUpdated(i, note) {
|
onNoteUpdated(i, note) {
|
||||||
Vue.set((this as any).notes, i, note);
|
Vue.set((this as any).notes, i, note);
|
||||||
},
|
},
|
||||||
|
|
|
@ -20,21 +20,18 @@
|
||||||
:media-only="column.isMediaOnly"
|
:media-only="column.isMediaOnly"
|
||||||
:media-view="column.isMediaView"
|
:media-view="column.isMediaView"
|
||||||
ref="tl"
|
ref="tl"
|
||||||
@parentFocus="parentFocus"
|
|
||||||
/>
|
/>
|
||||||
<x-hashtag-tl v-else-if="column.type == 'hashtag'"
|
<x-hashtag-tl v-else-if="column.type == 'hashtag'"
|
||||||
:tag-tl="$store.state.settings.tagTimelines.find(x => x.id == column.tagTlId)"
|
:tag-tl="$store.state.settings.tagTimelines.find(x => x.id == column.tagTlId)"
|
||||||
:media-only="column.isMediaOnly"
|
:media-only="column.isMediaOnly"
|
||||||
:media-view="column.isMediaView"
|
:media-view="column.isMediaView"
|
||||||
ref="tl"
|
ref="tl"
|
||||||
@parentFocus="parentFocus"
|
|
||||||
/>
|
/>
|
||||||
<x-tl v-else
|
<x-tl v-else
|
||||||
:src="column.type"
|
:src="column.type"
|
||||||
:media-only="column.isMediaOnly"
|
:media-only="column.isMediaOnly"
|
||||||
:media-view="column.isMediaView"
|
:media-view="column.isMediaView"
|
||||||
ref="tl"
|
ref="tl"
|
||||||
@parentFocus="parentFocus"
|
|
||||||
/>
|
/>
|
||||||
</x-column>
|
</x-column>
|
||||||
</template>
|
</template>
|
||||||
|
@ -100,11 +97,7 @@ export default Vue.extend({
|
||||||
|
|
||||||
focus() {
|
focus() {
|
||||||
this.$refs.tl.focus();
|
this.$refs.tl.focus();
|
||||||
},
|
}
|
||||||
|
|
||||||
parentFocus(direction) {
|
|
||||||
this.$emit('parentFocus', direction);
|
|
||||||
},
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<x-notes ref="timeline" :more="existMore ? more : null" :media-view="mediaView" @parentFocus="parentFocus"/>
|
<x-notes ref="timeline" :more="existMore ? more : null" :media-view="mediaView"/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
|
@ -143,11 +143,7 @@ export default Vue.extend({
|
||||||
|
|
||||||
focus() {
|
focus() {
|
||||||
(this.$refs.timeline as any).focus();
|
(this.$refs.timeline as any).focus();
|
||||||
},
|
}
|
||||||
|
|
||||||
parentFocus(direction) {
|
|
||||||
this.$emit('parentFocus', direction);
|
|
||||||
},
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
Loading…
Reference in New Issue