Feature/add sticker picker
adds sticker picker to post status form as well as 2 stickerpacks
Merge request reports
Activity
Resolved by HJregarding the sticker packs, anything we distribute with Pleroma, we need to know what the copyright + redistribution terms are. can you get that information for us?
- Last reply by absturztaube
157 157 @uploaded="addMediaFile" 158 158 @upload-failed="uploadFailed" 159 159 /> 160 <div 161 class="sticker-icon" 162 > 163 <i 164 :title="$t('stickers.add_sticker')" 165 class="icon-picture btn btn-default" 166 :class="stickerPickerVisible && 'selected'" -
or just use v-if?
Edited by HJ changed this line in version 2 of the diff
27 selectTab (tab) { 28 this.path = tab.path 29 const self = this 30 window.fetch(this.path + 'pack.json') 31 .then((res) => { 32 if (res.ok) { 33 res.json().then((json) => { 34 self.meta = json 35 }) 36 } 37 }) 38 }, 39 pick (sticker) { 40 const self = this 41 const store = this.$store 42 window.fetch(this.path + sticker) changed this line in version 2 of the diff
7 class="sticker-picker-panel" 8 > 9 <div 10 class="tab-switcher" 11 > 12 <div 13 class="tabs sticker-picker-tabs" 14 > 15 <div 16 v-for="tab in pack" 17 :key="tab.path" 18 class="tab-wrapper" 19 > 20 <button 21 class="tab tab-sticker" 22 @click="selectTab(tab)" changed this line in version 2 of the diff
-
some UX/UI concerns:
- de-saturating icons makes it harder to see and recognize them, glow would probably be better
- no meaningful names or hover text for anything, filenames are garbage too
- having stickers.json and other stuff in git makes it harder to customize it for admins.
- a bit weird and not clear convention - list references tabs and it's assumes that there should be tab.png and pack.json, directly referencing pack.json and listing tab icon in pack.json would be better.
- grid is somewhat ugly with that empty space on the right
added 12 commits
- 5cea7695 - use bare fetch
- 9a287f3b - load all packs at once
- 616be446 - use Object.entries
- 323cdd21 - don't display icon if no stickers
- 3c5ce250 - fix select highlight on sticker icon
- e498ee63 - use tab-switcher component
- e97ac2e5 - add glow on hover over sticker
- 0c1e9b27 - remove sticker packs and sticker.json
- cf68c5ae - using sticker title as file desription on attachment
- 32b58c13 - add image to tab switcher
- da5bdc05 - add todo at sticker upload
- e1a4fc70 - proper handling in post status form if stickers can't be loaded
Toggle commit list-
@hj review please
31 } 32 }, 33 pick (sticker, name) { 34 const store = this.$store 35 // TODO remove this workaround by finding a way to bypass reuploads 36 fetch(sticker) 37 .then((res) => { 38 res.blob().then((blob) => { 39 var file = new File([blob], name, { mimetype: 'image/png' }) 40 var formData = new FormData() 41 formData.append('file', file) 42 statusPosterService.uploadMedia({ store, formData }) 43 .then((fileData) => { 44 this.$emit('uploaded', fileData) 45 this.clear() 46 }, (error) => { // eslint-disable-line handle-callback-err changed this line in version 4 of the diff
-
overall looks good, except for broken tab icons, but i just reused stickers from earlier commit, not sure if you changed format.
and yeah, format, we probably still need to discuss format and distribution and how backend gonna serve those, because backend doesn't like including stuff in frontend.
added 6 commits
Toggle commit list
