kopia lustrzana https://github.com/nextcloud/social
Replace Emoji picker by the new one
This old one completely ddosed my machine because it generated thousands of requests to fetch the images/emojis This also port some things to the nc vue components as a side effect. Signed-off-by: Carl Schwan <carl@carlschwan.eu>pull/1414/head
rodzic
cf2b099dd4
commit
9c8a5f62ae
|
@ -1163,6 +1163,8 @@ class CoreRequestBuilder {
|
||||||
* this just empty all tables from the app.
|
* this just empty all tables from the app.
|
||||||
*/
|
*/
|
||||||
public function emptyAll() {
|
public function emptyAll() {
|
||||||
|
/** @var ISchemaWrapper|SchemaWrapper $schema */
|
||||||
|
$schema = new SchemaWrapper($this->dbConnection);
|
||||||
foreach ($this->tables as $table) {
|
foreach ($this->tables as $table) {
|
||||||
if ($schema->hasTable($table)) {
|
if ($schema->hasTable($table)) {
|
||||||
$qb = $this->dbConnection->getQueryBuilder();
|
$qb = $this->dbConnection->getQueryBuilder();
|
||||||
|
|
Plik diff jest za duży
Load Diff
|
@ -46,9 +46,9 @@
|
||||||
"vue": "^2.6.14",
|
"vue": "^2.6.14",
|
||||||
"vue-click-outside": "^1.0.7",
|
"vue-click-outside": "^1.0.7",
|
||||||
"vue-contenteditable-directive": "^1.2.0",
|
"vue-contenteditable-directive": "^1.2.0",
|
||||||
"vue-emoji-picker": "^1.0.3",
|
|
||||||
"vue-infinite-loading": "^2.4.4",
|
"vue-infinite-loading": "^2.4.4",
|
||||||
"vue-masonry-css": "^1.0.3",
|
"vue-masonry-css": "^1.0.3",
|
||||||
|
"vue-material-design-icons": "^5.0.0",
|
||||||
"vue-router": "^3.5.3",
|
"vue-router": "^3.5.3",
|
||||||
"vue-tribute": "^1.0.6",
|
"vue-tribute": "^1.0.6",
|
||||||
"vue-twemoji": "^1.0.1",
|
"vue-twemoji": "^1.0.1",
|
||||||
|
|
|
@ -22,6 +22,14 @@
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="new-post" data-id="">
|
<div class="new-post" data-id="">
|
||||||
|
<input id="file-upload"
|
||||||
|
ref="fileUploadInput"
|
||||||
|
multiple
|
||||||
|
type="file"
|
||||||
|
tabindex="-1"
|
||||||
|
aria-hidden="true"
|
||||||
|
class="hidden-visually"
|
||||||
|
@change="handleFileInput">
|
||||||
<div class="new-post-author">
|
<div class="new-post-author">
|
||||||
<avatar :user="currentUser.uid" :display-name="currentUser.displayName" :disable-tooltip="true"
|
<avatar :user="currentUser.uid" :display-name="currentUser.displayName" :disable-tooltip="true"
|
||||||
:size="32" />
|
:size="32" />
|
||||||
|
@ -52,56 +60,50 @@
|
||||||
placeholder="What would you like to share?" :class="{'icon-loading': loading}" @keyup.prevent.enter="keyup"
|
placeholder="What would you like to share?" :class="{'icon-loading': loading}" @keyup.prevent.enter="keyup"
|
||||||
@tribute-replaced="updatePostFromTribute" />
|
@tribute-replaced="updatePostFromTribute" />
|
||||||
</vue-tribute>
|
</vue-tribute>
|
||||||
<emoji-picker ref="emojiPicker" :search="search" class="emoji-picker-wrapper"
|
|
||||||
@emoji="insert">
|
|
||||||
<div slot="emoji-invoker" v-tooltip="'Insert emoji'" slot-scope="{ events }"
|
|
||||||
class="emoji-invoker" tabindex="0" @keyup.enter="events.click"
|
|
||||||
@keyup.space="events.click" @click.stop="events.click" />
|
|
||||||
<!-- eslint-disable-next-line vue/no-template-shadow -->
|
|
||||||
<div slot="emoji-picker" slot-scope="{ emojis, insert }" class="emoji-picker popovermenu">
|
|
||||||
<div>
|
|
||||||
<div>
|
|
||||||
<input v-model="search" v-focus-on-create type="text"
|
|
||||||
@keyup.enter="insert(emojis)">
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div v-for="(emojiGroup, category) in emojis" :key="category">
|
|
||||||
<h5>{{ category }}</h5>
|
|
||||||
<div>
|
|
||||||
<!-- eslint-disable vue/no-v-html -->
|
|
||||||
<span v-for="(emoji, emojiName) in emojiGroup" :key="emojiName" :title="emojiName"
|
|
||||||
tabindex="0"
|
|
||||||
class="emoji" @click="insert(emoji)" @keyup.enter="insert(emoji)"
|
|
||||||
@keyup.space="insert(emoji)" v-html="$twemoji.parse(emoji)" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</emoji-picker>
|
|
||||||
|
|
||||||
<masonry>
|
<masonry>
|
||||||
<div v-for="(item, index) in miniatures" :key="index" ref="miniatures">
|
<div v-for="(item, index) in miniatures" :key="index" ref="miniatures">
|
||||||
<img :src="item.img" :usemap="'#map' + index">
|
<img alt="" :src="item.img" :usemap="'#map' + index">
|
||||||
<map :name="'map' + index">
|
<map :name="'map' + index">
|
||||||
<area shape="circle" :coords="getImageMapCoords(index)" @click="removeAttachment(index)">
|
<area shape="circle" :coords="getImageMapCoords(index)" @click="removeAttachment(index)">
|
||||||
</map>
|
</map>
|
||||||
</div>
|
</div>
|
||||||
</masonry>
|
</masonry>
|
||||||
|
|
||||||
<div class="options">
|
<div class="options my-3">
|
||||||
<input :value="currentVisibilityPostLabel" :disabled="post.length < 1 || post==='<br>'" class="submit primary"
|
<div class="new-post-form__emoji-picker mr-3">
|
||||||
type="submit" title="" data-original-title="Post">
|
<EmojiPicker ref="emojiPicker" :search="search" :close-on-select="false"
|
||||||
<div v-click-outside="hidePopoverMenu">
|
:container="containerElement"
|
||||||
<button :class="currentVisibilityIconClass" @click.prevent="togglePopoverMenu" />
|
@select="insert">
|
||||||
|
<Button type="ternary-no-background" :aria-haspopup="true" :aria-label="t('social', 'Add emoji')">
|
||||||
|
<template #icon>
|
||||||
|
<EmoticonOutline :size="16" decorative title="" />
|
||||||
|
</template>
|
||||||
|
</Button>
|
||||||
|
</EmojiPicker>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Button type="ternary-no-background" class="mr-3" :aria-label="t('social', 'Add attachment')"
|
||||||
|
@click.prevent="clickImportInput">
|
||||||
|
<template #icon>
|
||||||
|
<FileUpload :size="16" decorative title="" />
|
||||||
|
</template>
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<div v-click-outside="hidePopoverMenu" class="mr-3">
|
||||||
|
<Button type="ternary-no-background" :class="currentVisibilityIconClass" @click.prevent="togglePopoverMenu" />
|
||||||
<div :class="{open: menuOpened}" class="popovermenu menu-center">
|
<div :class="{open: menuOpened}" class="popovermenu menu-center">
|
||||||
<popover-menu :menu="visibilityPopover" />
|
<popover-menu :menu="visibilityPopover" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="emptySpace" />
|
<div class="emptySpace" />
|
||||||
<label v-tooltip="'Attach document'" class="button icon-upload" for="file-upload" />
|
<Button :value="currentVisibilityPostLabel" :disabled="post.length < 1 || post==='<br>'" type="primary"
|
||||||
<input id="file-upload" ref="addAttach" class="upload-button"
|
@click.prevent="createPost">
|
||||||
type="file" @change="AddAttachment">
|
<template #icon>
|
||||||
|
<Send title="" :size="16" decorative />
|
||||||
|
</template>
|
||||||
|
<template>{{ t('social', 'Post to followers') }}</template>
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
@ -115,6 +117,16 @@
|
||||||
top: 47px;
|
top: 47px;
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
|
|
||||||
|
&-form {
|
||||||
|
flex-grow: 1;
|
||||||
|
position: relative;
|
||||||
|
top: -10px;
|
||||||
|
margin-left: 39px;
|
||||||
|
&__emoji-picker {
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.new-post-author {
|
.new-post-author {
|
||||||
|
@ -155,13 +167,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.new-post-form {
|
|
||||||
flex-grow: 1;
|
|
||||||
position: relative;
|
|
||||||
top: -10px;
|
|
||||||
margin-left: 39px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.message {
|
.message {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding-right: 44px;
|
padding-right: 44px;
|
||||||
|
@ -193,84 +198,12 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: flex-end;
|
align-items: flex-end;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
flex-direction: row-reverse;
|
|
||||||
}
|
|
||||||
|
|
||||||
.options > div {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.options button {
|
|
||||||
width: 34px;
|
|
||||||
height: 34px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.emptySpace {
|
.emptySpace {
|
||||||
flex-grow:1;
|
flex-grow:1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-upload {
|
|
||||||
width: 34px;
|
|
||||||
height: 34px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.upload-button {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.emoji-invoker {
|
|
||||||
background-image: var(--icon-social-emoji-000);
|
|
||||||
background-position: center center;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
width: 38px;
|
|
||||||
opacity: 0.5;
|
|
||||||
background-size: 16px 16px;
|
|
||||||
height: 38px;
|
|
||||||
cursor: pointer;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.emoji-invoker:focus,
|
|
||||||
.emoji-invoker:hover {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.emoji-picker-wrapper {
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.emoji-picker.popovermenu {
|
|
||||||
display: block;
|
|
||||||
padding: 5px;
|
|
||||||
width: 200px;
|
|
||||||
height: 200px;
|
|
||||||
top: 44px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.emoji-picker > div {
|
|
||||||
overflow: hidden;
|
|
||||||
overflow-y: scroll;
|
|
||||||
height: 190px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.emoji-picker input {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.emoji-picker span.emoji {
|
|
||||||
padding: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.emoji-picker span.emoji:focus {
|
|
||||||
background-color: var(--color-background-dark);
|
|
||||||
}
|
|
||||||
|
|
||||||
.emoji-picker .emoji img {
|
|
||||||
width: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.popovermenu {
|
.popovermenu {
|
||||||
top: 55px;
|
top: 55px;
|
||||||
}
|
}
|
||||||
|
@ -385,12 +318,28 @@
|
||||||
.hashtag {
|
.hashtag {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
.mt-3, .my-3 {
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
.mb-3, .my-3 {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
.mr-3, .mx-3 {
|
||||||
|
margin-right: 1rem;
|
||||||
|
}
|
||||||
|
.ml-3, .mx-3 {
|
||||||
|
margin-left: 1rem;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
|
import EmoticonOutline from 'vue-material-design-icons/EmoticonOutline'
|
||||||
|
import Send from 'vue-material-design-icons/Send'
|
||||||
|
import FileUpload from 'vue-material-design-icons/FileUpload'
|
||||||
import Avatar from '@nextcloud/vue/dist/Components/Avatar'
|
import Avatar from '@nextcloud/vue/dist/Components/Avatar'
|
||||||
|
import Button from '@nextcloud/vue/dist/Components/Button'
|
||||||
import PopoverMenu from '@nextcloud/vue/dist/Components/PopoverMenu'
|
import PopoverMenu from '@nextcloud/vue/dist/Components/PopoverMenu'
|
||||||
import EmojiPicker from 'vue-emoji-picker'
|
import EmojiPicker from '@nextcloud/vue/dist/Components/EmojiPicker'
|
||||||
import VueTribute from 'vue-tribute'
|
import VueTribute from 'vue-tribute'
|
||||||
import he from 'he'
|
import he from 'he'
|
||||||
import CurrentUserMixin from './../mixins/currentUserMixin'
|
import CurrentUserMixin from './../mixins/currentUserMixin'
|
||||||
|
@ -404,9 +353,13 @@ export default {
|
||||||
components: {
|
components: {
|
||||||
PopoverMenu,
|
PopoverMenu,
|
||||||
Avatar,
|
Avatar,
|
||||||
|
FileUpload,
|
||||||
ActorAvatar,
|
ActorAvatar,
|
||||||
EmojiPicker,
|
EmojiPicker,
|
||||||
VueTribute
|
VueTribute,
|
||||||
|
EmoticonOutline,
|
||||||
|
Button,
|
||||||
|
Send
|
||||||
},
|
},
|
||||||
directives: {
|
directives: {
|
||||||
FocusOnCreate: FocusOnCreate
|
FocusOnCreate: FocusOnCreate
|
||||||
|
@ -517,6 +470,9 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
containerElement() {
|
||||||
|
return document.querySelector('#content-vue')
|
||||||
|
},
|
||||||
currentVisibilityIconClass() {
|
currentVisibilityIconClass() {
|
||||||
return this.visibilityIconClass(this.type)
|
return this.visibilityIconClass(this.type)
|
||||||
},
|
},
|
||||||
|
@ -614,10 +570,13 @@ export default {
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
AddAttachment() {
|
clickImportInput() {
|
||||||
// TODO: handle (or prevent) mulitple files
|
this.$refs.fileUploadInput.click()
|
||||||
|
},
|
||||||
|
handleFileInput() {
|
||||||
|
// TODO: handle (or prevent) mulitples/ files
|
||||||
let self = this
|
let self = this
|
||||||
let file = this.$refs.addAttach.files[0]
|
let file = this.$refs.fileUploadInput.files[0]
|
||||||
let reader = new FileReader()
|
let reader = new FileReader()
|
||||||
|
|
||||||
// Called when selected file is completly loaded to draw a miniature
|
// Called when selected file is completly loaded to draw a miniature
|
||||||
|
|
Ładowanie…
Reference in New Issue