diff --git a/priv/static/static/font/font/fontello.eot b/priv/static/static/font/font/fontello.eot
old mode 100755
new mode 100644
index d08692e84..197a60420
Binary files a/priv/static/static/font/font/fontello.eot and b/priv/static/static/font/font/fontello.eot differ
diff --git a/priv/static/static/font/font/fontello.svg b/priv/static/static/font/font/fontello.svg
old mode 100755
new mode 100644
index fdd7caa73..7ffb321bc
--- a/priv/static/static/font/font/fontello.svg
+++ b/priv/static/static/font/font/fontello.svg
@@ -84,6 +84,8 @@
+
+
diff --git a/priv/static/static/font/font/fontello.ttf b/priv/static/static/font/font/fontello.ttf
old mode 100755
new mode 100644
index 6f5a81d76..6ec04a304
Binary files a/priv/static/static/font/font/fontello.ttf and b/priv/static/static/font/font/fontello.ttf differ
diff --git a/priv/static/static/font/font/fontello.woff b/priv/static/static/font/font/fontello.woff
old mode 100755
new mode 100644
index 79972a576..231c2c460
Binary files a/priv/static/static/font/font/fontello.woff and b/priv/static/static/font/font/fontello.woff differ
diff --git a/priv/static/static/font/font/fontello.woff2 b/priv/static/static/font/font/fontello.woff2
old mode 100755
new mode 100644
index 94d79274a..bf84b5608
Binary files a/priv/static/static/font/font/fontello.woff2 and b/priv/static/static/font/font/fontello.woff2 differ
diff --git a/priv/static/static/js/2.48f39bc510b7c0a7fca6.js b/priv/static/static/js/2.48f39bc510b7c0a7fca6.js
new file mode 100644
index 000000000..eabbcf690
--- /dev/null
+++ b/priv/static/static/js/2.48f39bc510b7c0a7fca6.js
@@ -0,0 +1,2 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[2],{987:function(t,e,i){"use strict";i.r(e);var n=i(988),c=i.n(n);for(var r in n)"default"!==r&&function(t){i.d(e,t,function(){return n[t]})}(r);var a=i(991),s=i(0);var o=function(t){i(989)},u=Object(s.a)(c.a,a.a,a.b,!1,o,null,null);e.default=u.exports},988:function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var n=c(i(332));function c(t){return t&&t.__esModule?t:{default:t}}var r={components:{TabSwitcher:c(i(197)).default},data:function(){return{meta:{stickers:[]},path:""}},computed:{pack:function(){return this.$store.state.instance.stickers||[]}},methods:{clear:function(){this.meta={stickers:[]}},pick:function(t,e){var i=this,c=this.$store;fetch(t).then(function(t){t.blob().then(function(t){var r=new File([t],e,{mimetype:"image/png"}),a=new FormData;a.append("file",r),n.default.uploadMedia({store:c,formData:a}).then(function(t){i.$emit("uploaded",t),i.clear()},function(t){console.warn("Can't attach sticker"),console.warn(t),i.$emit("upload-failed","default")})})})}}};e.default=r},989:function(t,e,i){var n=i(990);"string"==typeof n&&(n=[[t.i,n,""]]),n.locals&&(t.exports=n.locals);(0,i(2).default)("cc6cdea4",n,!0,{})},990:function(t,e,i){(t.exports=i(1)(!1)).push([t.i,".sticker-picker{width:100%;position:relative}.sticker-picker .tab-switcher{position:absolute;top:0;bottom:0;left:0;right:0}.sticker-picker .sticker-picker-content .sticker{display:inline-block;width:20%;height:20%}.sticker-picker .sticker-picker-content .sticker img{width:100%}.sticker-picker .sticker-picker-content .sticker img:hover{filter:drop-shadow(0 0 5px var(--link,#d8a070))}",""])},991:function(t,e,i){"use strict";i.d(e,"a",function(){return n}),i.d(e,"b",function(){return c});var n=function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"sticker-picker"},[i("tab-switcher",{staticClass:"tab-switcher",attrs:{"render-only-focused":!0,"scrollable-tabs":""}},t._l(t.pack,function(e){return i("div",{key:e.path,staticClass:"sticker-picker-content",attrs:{"image-tooltip":e.meta.title,image:e.path+e.meta.tabIcon}},t._l(e.meta.stickers,function(n){return i("div",{key:n,staticClass:"sticker",on:{click:function(i){i.stopPropagation(),i.preventDefault(),t.pick(e.path+n,e.meta.title)}}},[i("img",{attrs:{src:e.path+n}})])}),0)}),0)],1)},c=[]}}]);
+//# sourceMappingURL=2.48f39bc510b7c0a7fca6.js.map
\ No newline at end of file
diff --git a/priv/static/static/js/2.48f39bc510b7c0a7fca6.js.map b/priv/static/static/js/2.48f39bc510b7c0a7fca6.js.map
new file mode 100644
index 000000000..be87ffa46
--- /dev/null
+++ b/priv/static/static/js/2.48f39bc510b7c0a7fca6.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["webpack:///./src/components/sticker_picker/sticker_picker.vue","webpack:///./src/components/sticker_picker/sticker_picker.js","webpack:///./src/components/sticker_picker/sticker_picker.vue?d6cd","webpack:///./src/components/sticker_picker/sticker_picker.vue?d5ea","webpack:///./src/components/sticker_picker/sticker_picker.vue?8003"],"names":["__webpack_require__","r","__webpack_exports__","_babel_loader_sticker_picker_js__WEBPACK_IMPORTED_MODULE_0__","_babel_loader_sticker_picker_js__WEBPACK_IMPORTED_MODULE_0___default","n","__WEBPACK_IMPORT_KEY__","key","d","_node_modules_vue_loader_lib_template_compiler_index_id_data_v_70972e0c_hasScoped_false_optionsId_0_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_sticker_picker_vue__WEBPACK_IMPORTED_MODULE_1__","_node_modules_vue_loader_lib_runtime_component_normalizer__WEBPACK_IMPORTED_MODULE_2__","__vue_styles__","context","Component","Object","a","StickerPicker","components","TabSwitcher","data","meta","stickers","path","computed","pack","this","$store","state","instance","methods","clear","pick","sticker","name","_this","store","fetch","then","res","blob","file","File","mimetype","formData","FormData","append","statusPosterService","uploadMedia","fileData","$emit","error","console","warn","content","module","i","locals","exports","add","default","push","render","staticRenderFns","_vm","_h","$createElement","_c","_self","staticClass","attrs","render-only-focused","scrollable-tabs","_l","stickerpack","image-tooltip","title","image","tabIcon","on","click","$event","stopPropagation","preventDefault","src"],"mappings":"0FAAAA,EAAAC,EAAAC,GAAA,IAAAC,EAAAH,EAAA,KAAAI,EAAAJ,EAAAK,EAAAF,GAAA,QAAAG,KAAAH,EAAA,YAAAG,GAAA,SAAAC,GAAAP,EAAAQ,EAAAN,EAAAK,EAAA,kBAAAJ,EAAAI,KAAA,CAAAD,GAAA,IAAAG,EAAAT,EAAA,KAAAU,EAAAV,EAAA,GAQA,IAEAW,EAVA,SAAAC,GACEZ,EAAQ,MAeVa,EAAgBC,OAAAJ,EAAA,EAAAI,CACdV,EAAAW,EACAN,EAAA,EACAA,EAAA,GAXF,EAaAE,EATA,KAEA,MAYeT,EAAA,QAAAW,EAAiB,2FCzBhC,QAAAb,EAAA,yDAGA,IAAMgB,EAAgB,CACpBC,WAAY,CACVC,cAJJlB,EAAA,MAIIkB,SAEFC,KAJoB,WAKlB,MAAO,CACLC,KAAM,CACJC,SAAU,IAEZC,KAAM,KAGVC,SAAU,CACRC,KADQ,WAEN,OAAOC,KAAKC,OAAOC,MAAMC,SAASP,UAAY,KAGlDQ,QAAS,CACPC,MADO,WAELL,KAAKL,KAAO,CACVC,SAAU,KAGdU,KANO,SAMDC,EAASC,GAAM,IAAAC,EAAAT,KACbU,EAAQV,KAAKC,OAEnBU,MAAMJ,GACHK,KAAK,SAACC,GACLA,EAAIC,OAAOF,KAAK,SAACE,GACf,IAAIC,EAAO,IAAIC,KAAK,CAACF,GAAON,EAAM,CAAES,SAAU,cAC1CC,EAAW,IAAIC,SACnBD,EAASE,OAAO,OAAQL,GACxBM,UAAoBC,YAAY,CAAEZ,QAAOQ,aACtCN,KAAK,SAACW,GACLd,EAAKe,MAAM,WAAYD,GACvBd,EAAKJ,SACJ,SAACoB,GACFC,QAAQC,KAAK,wBACbD,QAAQC,KAAKF,GACbhB,EAAKe,MAAM,gBAAiB,8BAQ7BjC,uBChDf,IAAAqC,EAAcrD,EAAQ,KACtB,iBAAAqD,MAAA,EAA4CC,EAAAC,EAASF,EAAA,MACrDA,EAAAG,SAAAF,EAAAG,QAAAJ,EAAAG,SAGAE,EADU1D,EAAQ,GAAgE2D,SAClF,WAAAN,GAAA,4BCRAC,EAAAG,QAA2BzD,EAAQ,EAARA,EAA0D,IAKrF4D,KAAA,CAAcN,EAAAC,EAAS,oYAAoY,uCCL3ZvD,EAAAQ,EAAAN,EAAA,sBAAA2D,IAAA7D,EAAAQ,EAAAN,EAAA,sBAAA4D,IAAA,IAAAD,EAAA,WAA0B,IAAAE,EAAAtC,KAAauC,EAAAD,EAAAE,eAA0BC,EAAAH,EAAAI,MAAAD,IAAAF,EAAwB,OAAAE,EAAA,OAAiBE,YAAA,kBAA6B,CAAAF,EAAA,gBAAqBE,YAAA,eAAAC,MAAA,CAAkCC,uBAAA,EAAAC,kBAAA,KAAiDR,EAAAS,GAAAT,EAAA,cAAAU,GAAyC,OAAAP,EAAA,OAAiB3D,IAAAkE,EAAAnD,KAAA8C,YAAA,yBAAAC,MAAA,CAAiEK,gBAAAD,EAAArD,KAAAuD,MAAAC,MAAAH,EAAAnD,KAAAmD,EAAArD,KAAAyD,UAA4Fd,EAAAS,GAAAC,EAAArD,KAAA,kBAAAY,GAAsD,OAAAkC,EAAA,OAAiB3D,IAAAyB,EAAAoC,YAAA,UAAAU,GAAA,CAAsCC,MAAA,SAAAC,GAAyBA,EAAAC,kBAAyBD,EAAAE,iBAAwBnB,EAAAhC,KAAA0C,EAAAnD,KAAAU,EAAAyC,EAAArD,KAAAuD,UAA+D,CAAAT,EAAA,OAAYG,MAAA,CAAOc,IAAAV,EAAAnD,KAAAU,SAAsC,KAAK,QAC1vB8B,EAAA","file":"static/js/2.48f39bc510b7c0a7fca6.js","sourcesContent":["function injectStyle (context) {\n require(\"!!vue-style-loader!css-loader?minimize!../../../node_modules/vue-loader/lib/style-compiler/index?{\\\"optionsId\\\":\\\"0\\\",\\\"vue\\\":true,\\\"scoped\\\":false,\\\"sourceMap\\\":false}!sass-loader!../../../node_modules/vue-loader/lib/selector?type=styles&index=0!./sticker_picker.vue\")\n}\n/* script */\nexport * from \"!!babel-loader!./sticker_picker.js\"\nimport __vue_script__ from \"!!babel-loader!./sticker_picker.js\"/* template */\nimport {render as __vue_render__, staticRenderFns as __vue_static_render_fns__} from \"!!../../../node_modules/vue-loader/lib/template-compiler/index?{\\\"id\\\":\\\"data-v-70972e0c\\\",\\\"hasScoped\\\":false,\\\"optionsId\\\":\\\"0\\\",\\\"buble\\\":{\\\"transforms\\\":{}}}!../../../node_modules/vue-loader/lib/selector?type=template&index=0!./sticker_picker.vue\"\n/* template functional */\nvar __vue_template_functional__ = false\n/* styles */\nvar __vue_styles__ = injectStyle\n/* scopeId */\nvar __vue_scopeId__ = null\n/* moduleIdentifier (server only) */\nvar __vue_module_identifier__ = null\nimport normalizeComponent from \"!../../../node_modules/vue-loader/lib/runtime/component-normalizer\"\nvar Component = normalizeComponent(\n __vue_script__,\n __vue_render__,\n __vue_static_render_fns__,\n __vue_template_functional__,\n __vue_styles__,\n __vue_scopeId__,\n __vue_module_identifier__\n)\n\nexport default Component.exports\n","/* eslint-env browser */\nimport statusPosterService from '../../services/status_poster/status_poster.service.js'\nimport TabSwitcher from '../tab_switcher/tab_switcher.js'\n\nconst StickerPicker = {\n components: {\n TabSwitcher\n },\n data () {\n return {\n meta: {\n stickers: []\n },\n path: ''\n }\n },\n computed: {\n pack () {\n return this.$store.state.instance.stickers || []\n }\n },\n methods: {\n clear () {\n this.meta = {\n stickers: []\n }\n },\n pick (sticker, name) {\n const store = this.$store\n // TODO remove this workaround by finding a way to bypass reuploads\n fetch(sticker)\n .then((res) => {\n res.blob().then((blob) => {\n var file = new File([blob], name, { mimetype: 'image/png' })\n var formData = new FormData()\n formData.append('file', file)\n statusPosterService.uploadMedia({ store, formData })\n .then((fileData) => {\n this.$emit('uploaded', fileData)\n this.clear()\n }, (error) => {\n console.warn(\"Can't attach sticker\")\n console.warn(error)\n this.$emit('upload-failed', 'default')\n })\n })\n })\n }\n }\n}\n\nexport default StickerPicker\n","// style-loader: Adds some css to the DOM by adding a \n","import FollowCard from '../follow_card/follow_card.vue'\nimport Conversation from '../conversation/conversation.vue'\nimport Status from '../status/status.vue'\nimport map from 'lodash/map'\n\nconst Search = {\n components: {\n FollowCard,\n Conversation,\n Status\n },\n props: [\n 'query'\n ],\n data () {\n return {\n loaded: false,\n loading: false,\n searchTerm: this.query || '',\n userIds: [],\n statuses: [],\n hashtags: [],\n currenResultTab: 'statuses'\n }\n },\n computed: {\n users () {\n return this.userIds.map(userId => this.$store.getters.findUser(userId))\n },\n visibleStatuses () {\n const allStatusesObject = this.$store.state.statuses.allStatusesObject\n\n return this.statuses.filter(status =>\n allStatusesObject[status.id] && !allStatusesObject[status.id].deleted\n )\n }\n },\n mounted () {\n this.search(this.query)\n },\n watch: {\n query (newValue) {\n this.searchTerm = newValue\n this.search(newValue)\n }\n },\n methods: {\n newQuery (query) {\n this.$router.push({ name: 'search', query: { query } })\n this.$refs.searchInput.focus()\n },\n search (query) {\n if (!query) {\n this.loading = false\n return\n }\n\n this.loading = true\n this.userIds = []\n this.statuses = []\n this.hashtags = []\n this.$refs.searchInput.blur()\n\n this.$store.dispatch('search', { q: query, resolve: true })\n .then(data => {\n this.loading = false\n this.userIds = map(data.accounts, 'id')\n this.statuses = data.statuses\n this.hashtags = data.hashtags\n this.currenResultTab = this.getActiveTab()\n this.loaded = true\n })\n },\n resultCount (tabName) {\n const length = this[tabName].length\n return length === 0 ? '' : ` (${length})`\n },\n onResultTabSwitch (key) {\n this.currenResultTab = key\n },\n getActiveTab () {\n if (this.visibleStatuses.length > 0) {\n return 'statuses'\n } else if (this.users.length > 0) {\n return 'people'\n } else if (this.hashtags.length > 0) {\n return 'hashtags'\n }\n\n return 'statuses'\n },\n lastHistoryRecord (hashtag) {\n return hashtag.history && hashtag.history[0]\n }\n }\n}\n\nexport default Search\n","/* eslint-env browser */\nimport { filter, trim } from 'lodash'\n\nimport TabSwitcher from '../tab_switcher/tab_switcher.js'\nimport StyleSwitcher from '../style_switcher/style_switcher.vue'\nimport InterfaceLanguageSwitcher from '../interface_language_switcher/interface_language_switcher.vue'\nimport { extractCommit } from '../../services/version/version.service'\n\nconst pleromaFeCommitUrl = 'https://git.pleroma.social/pleroma/pleroma-fe/commit/'\nconst pleromaBeCommitUrl = 'https://git.pleroma.social/pleroma/pleroma/commit/'\n\nconst settings = {\n data () {\n const user = this.$store.state.config\n const instance = this.$store.state.instance\n\n return {\n hideAttachmentsLocal: user.hideAttachments,\n hideAttachmentsInConvLocal: user.hideAttachmentsInConv,\n maxThumbnails: user.maxThumbnails,\n hideNsfwLocal: user.hideNsfw,\n useOneClickNsfw: user.useOneClickNsfw,\n hideISPLocal: user.hideISP,\n preloadImage: user.preloadImage,\n\n hidePostStatsLocal: typeof user.hidePostStats === 'undefined'\n ? instance.hidePostStats\n : user.hidePostStats,\n hidePostStatsDefault: this.$t('settings.values.' + instance.hidePostStats),\n\n hideUserStatsLocal: typeof user.hideUserStats === 'undefined'\n ? instance.hideUserStats\n : user.hideUserStats,\n hideUserStatsDefault: this.$t('settings.values.' + instance.hideUserStats),\n\n hideFilteredStatusesLocal: typeof user.hideFilteredStatuses === 'undefined'\n ? instance.hideFilteredStatuses\n : user.hideFilteredStatuses,\n hideFilteredStatusesDefault: this.$t('settings.values.' + instance.hideFilteredStatuses),\n\n notificationVisibilityLocal: user.notificationVisibility,\n replyVisibilityLocal: user.replyVisibility,\n loopVideoLocal: user.loopVideo,\n muteWordsString: user.muteWords.join('\\n'),\n autoLoadLocal: user.autoLoad,\n streamingLocal: user.streaming,\n pauseOnUnfocusedLocal: user.pauseOnUnfocused,\n hoverPreviewLocal: user.hoverPreview,\n autohideFloatingPostButtonLocal: user.autohideFloatingPostButton,\n\n hideMutedPostsLocal: typeof user.hideMutedPosts === 'undefined'\n ? instance.hideMutedPosts\n : user.hideMutedPosts,\n hideMutedPostsDefault: this.$t('settings.values.' + instance.hideMutedPosts),\n\n collapseMessageWithSubjectLocal: typeof user.collapseMessageWithSubject === 'undefined'\n ? instance.collapseMessageWithSubject\n : user.collapseMessageWithSubject,\n collapseMessageWithSubjectDefault: this.$t('settings.values.' + instance.collapseMessageWithSubject),\n\n subjectLineBehaviorLocal: typeof user.subjectLineBehavior === 'undefined'\n ? instance.subjectLineBehavior\n : user.subjectLineBehavior,\n subjectLineBehaviorDefault: instance.subjectLineBehavior,\n\n postContentTypeLocal: typeof user.postContentType === 'undefined'\n ? instance.postContentType\n : user.postContentType,\n postContentTypeDefault: instance.postContentType,\n\n alwaysShowSubjectInputLocal: typeof user.alwaysShowSubjectInput === 'undefined'\n ? instance.alwaysShowSubjectInput\n : user.alwaysShowSubjectInput,\n alwaysShowSubjectInputDefault: this.$t('settings.values.' + instance.alwaysShowSubjectInput),\n\n scopeCopyLocal: typeof user.scopeCopy === 'undefined'\n ? instance.scopeCopy\n : user.scopeCopy,\n scopeCopyDefault: this.$t('settings.values.' + instance.scopeCopy),\n\n minimalScopesModeLocal: typeof user.minimalScopesMode === 'undefined'\n ? instance.minimalScopesMode\n : user.minimalScopesMode,\n minimalScopesModeDefault: this.$t('settings.values.' + instance.minimalScopesMode),\n\n stopGifs: user.stopGifs,\n webPushNotificationsLocal: user.webPushNotifications,\n loopVideoSilentOnlyLocal: user.loopVideosSilentOnly,\n loopSilentAvailable:\n // Firefox\n Object.getOwnPropertyDescriptor(HTMLVideoElement.prototype, 'mozHasAudio') ||\n // Chrome-likes\n Object.getOwnPropertyDescriptor(HTMLMediaElement.prototype, 'webkitAudioDecodedByteCount') ||\n // Future spec, still not supported in Nightly 63 as of 08/2018\n Object.getOwnPropertyDescriptor(HTMLMediaElement.prototype, 'audioTracks'),\n playVideosInModal: user.playVideosInModal,\n useContainFit: user.useContainFit,\n\n backendVersion: instance.backendVersion,\n frontendVersion: instance.frontendVersion\n }\n },\n components: {\n TabSwitcher,\n StyleSwitcher,\n InterfaceLanguageSwitcher\n },\n computed: {\n user () {\n return this.$store.state.users.currentUser\n },\n currentSaveStateNotice () {\n return this.$store.state.interface.settings.currentSaveStateNotice\n },\n postFormats () {\n return this.$store.state.instance.postFormats || []\n },\n instanceSpecificPanelPresent () { return this.$store.state.instance.showInstanceSpecificPanel },\n frontendVersionLink () {\n return pleromaFeCommitUrl + this.frontendVersion\n },\n backendVersionLink () {\n return pleromaBeCommitUrl + extractCommit(this.backendVersion)\n }\n },\n watch: {\n hideAttachmentsLocal (value) {\n this.$store.dispatch('setOption', { name: 'hideAttachments', value })\n },\n hideAttachmentsInConvLocal (value) {\n this.$store.dispatch('setOption', { name: 'hideAttachmentsInConv', value })\n },\n hidePostStatsLocal (value) {\n this.$store.dispatch('setOption', { name: 'hidePostStats', value })\n },\n hideUserStatsLocal (value) {\n this.$store.dispatch('setOption', { name: 'hideUserStats', value })\n },\n hideFilteredStatusesLocal (value) {\n this.$store.dispatch('setOption', { name: 'hideFilteredStatuses', value })\n },\n hideNsfwLocal (value) {\n this.$store.dispatch('setOption', { name: 'hideNsfw', value })\n },\n useOneClickNsfw (value) {\n this.$store.dispatch('setOption', { name: 'useOneClickNsfw', value })\n },\n preloadImage (value) {\n this.$store.dispatch('setOption', { name: 'preloadImage', value })\n },\n hideISPLocal (value) {\n this.$store.dispatch('setOption', { name: 'hideISP', value })\n },\n 'notificationVisibilityLocal.likes' (value) {\n this.$store.dispatch('setOption', { name: 'notificationVisibility', value: this.$store.state.config.notificationVisibility })\n },\n 'notificationVisibilityLocal.follows' (value) {\n this.$store.dispatch('setOption', { name: 'notificationVisibility', value: this.$store.state.config.notificationVisibility })\n },\n 'notificationVisibilityLocal.repeats' (value) {\n this.$store.dispatch('setOption', { name: 'notificationVisibility', value: this.$store.state.config.notificationVisibility })\n },\n 'notificationVisibilityLocal.mentions' (value) {\n this.$store.dispatch('setOption', { name: 'notificationVisibility', value: this.$store.state.config.notificationVisibility })\n },\n replyVisibilityLocal (value) {\n this.$store.dispatch('setOption', { name: 'replyVisibility', value })\n },\n loopVideoLocal (value) {\n this.$store.dispatch('setOption', { name: 'loopVideo', value })\n },\n loopVideoSilentOnlyLocal (value) {\n this.$store.dispatch('setOption', { name: 'loopVideoSilentOnly', value })\n },\n autoLoadLocal (value) {\n this.$store.dispatch('setOption', { name: 'autoLoad', value })\n },\n streamingLocal (value) {\n this.$store.dispatch('setOption', { name: 'streaming', value })\n },\n pauseOnUnfocusedLocal (value) {\n this.$store.dispatch('setOption', { name: 'pauseOnUnfocused', value })\n },\n hoverPreviewLocal (value) {\n this.$store.dispatch('setOption', { name: 'hoverPreview', value })\n },\n autohideFloatingPostButtonLocal (value) {\n this.$store.dispatch('setOption', { name: 'autohideFloatingPostButton', value })\n },\n muteWordsString (value) {\n value = filter(value.split('\\n'), (word) => trim(word).length > 0)\n this.$store.dispatch('setOption', { name: 'muteWords', value })\n },\n hideMutedPostsLocal (value) {\n this.$store.dispatch('setOption', { name: 'hideMutedPosts', value })\n },\n collapseMessageWithSubjectLocal (value) {\n this.$store.dispatch('setOption', { name: 'collapseMessageWithSubject', value })\n },\n scopeCopyLocal (value) {\n this.$store.dispatch('setOption', { name: 'scopeCopy', value })\n },\n alwaysShowSubjectInputLocal (value) {\n this.$store.dispatch('setOption', { name: 'alwaysShowSubjectInput', value })\n },\n subjectLineBehaviorLocal (value) {\n this.$store.dispatch('setOption', { name: 'subjectLineBehavior', value })\n },\n postContentTypeLocal (value) {\n this.$store.dispatch('setOption', { name: 'postContentType', value })\n },\n minimalScopesModeLocal (value) {\n this.$store.dispatch('setOption', { name: 'minimalScopesMode', value })\n },\n stopGifs (value) {\n this.$store.dispatch('setOption', { name: 'stopGifs', value })\n },\n webPushNotificationsLocal (value) {\n this.$store.dispatch('setOption', { name: 'webPushNotifications', value })\n if (value) this.$store.dispatch('registerPushNotifications')\n },\n playVideosInModal (value) {\n this.$store.dispatch('setOption', { name: 'playVideosInModal', value })\n },\n useContainFit (value) {\n this.$store.dispatch('setOption', { name: 'useContainFit', value })\n },\n maxThumbnails (value) {\n value = this.maxThumbnails = Math.floor(Math.max(value, 0))\n this.$store.dispatch('setOption', { name: 'maxThumbnails', value })\n }\n }\n}\n\nexport default settings\n","import { rgb2hex, hex2rgb, getContrastRatio, alphaBlend } from '../../services/color_convert/color_convert.js'\nimport { set, delete as del } from 'vue'\nimport { generateColors, generateShadows, generateRadii, generateFonts, composePreset, getThemes } from '../../services/style_setter/style_setter.js'\nimport ColorInput from '../color_input/color_input.vue'\nimport RangeInput from '../range_input/range_input.vue'\nimport OpacityInput from '../opacity_input/opacity_input.vue'\nimport ShadowControl from '../shadow_control/shadow_control.vue'\nimport FontControl from '../font_control/font_control.vue'\nimport ContrastRatio from '../contrast_ratio/contrast_ratio.vue'\nimport TabSwitcher from '../tab_switcher/tab_switcher.js'\nimport Preview from './preview.vue'\nimport ExportImport from '../export_import/export_import.vue'\n\n// List of color values used in v1\nconst v1OnlyNames = [\n 'bg',\n 'fg',\n 'text',\n 'link',\n 'cRed',\n 'cGreen',\n 'cBlue',\n 'cOrange'\n].map(_ => _ + 'ColorLocal')\n\nexport default {\n data () {\n return {\n availableStyles: [],\n selected: this.$store.state.config.theme,\n\n previewShadows: {},\n previewColors: {},\n previewRadii: {},\n previewFonts: {},\n\n shadowsInvalid: true,\n colorsInvalid: true,\n radiiInvalid: true,\n\n keepColor: false,\n keepShadows: false,\n keepOpacity: false,\n keepRoundness: false,\n keepFonts: false,\n\n textColorLocal: '',\n linkColorLocal: '',\n\n bgColorLocal: '',\n bgOpacityLocal: undefined,\n\n fgColorLocal: '',\n fgTextColorLocal: undefined,\n fgLinkColorLocal: undefined,\n\n btnColorLocal: undefined,\n btnTextColorLocal: undefined,\n btnOpacityLocal: undefined,\n\n inputColorLocal: undefined,\n inputTextColorLocal: undefined,\n inputOpacityLocal: undefined,\n\n panelColorLocal: undefined,\n panelTextColorLocal: undefined,\n panelLinkColorLocal: undefined,\n panelFaintColorLocal: undefined,\n panelOpacityLocal: undefined,\n\n topBarColorLocal: undefined,\n topBarTextColorLocal: undefined,\n topBarLinkColorLocal: undefined,\n\n alertErrorColorLocal: undefined,\n\n badgeOpacityLocal: undefined,\n badgeNotificationColorLocal: undefined,\n\n borderColorLocal: undefined,\n borderOpacityLocal: undefined,\n\n faintColorLocal: undefined,\n faintOpacityLocal: undefined,\n faintLinkColorLocal: undefined,\n\n cRedColorLocal: '',\n cBlueColorLocal: '',\n cGreenColorLocal: '',\n cOrangeColorLocal: '',\n\n shadowSelected: undefined,\n shadowsLocal: {},\n fontsLocal: {},\n\n btnRadiusLocal: '',\n inputRadiusLocal: '',\n checkboxRadiusLocal: '',\n panelRadiusLocal: '',\n avatarRadiusLocal: '',\n avatarAltRadiusLocal: '',\n attachmentRadiusLocal: '',\n tooltipRadiusLocal: ''\n }\n },\n created () {\n const self = this\n\n getThemes().then((themesComplete) => {\n self.availableStyles = themesComplete\n })\n },\n mounted () {\n this.normalizeLocalState(this.$store.state.config.customTheme)\n if (typeof this.shadowSelected === 'undefined') {\n this.shadowSelected = this.shadowsAvailable[0]\n }\n },\n computed: {\n selectedVersion () {\n return Array.isArray(this.selected) ? 1 : 2\n },\n currentColors () {\n return {\n bg: this.bgColorLocal,\n text: this.textColorLocal,\n link: this.linkColorLocal,\n\n fg: this.fgColorLocal,\n fgText: this.fgTextColorLocal,\n fgLink: this.fgLinkColorLocal,\n\n panel: this.panelColorLocal,\n panelText: this.panelTextColorLocal,\n panelLink: this.panelLinkColorLocal,\n panelFaint: this.panelFaintColorLocal,\n\n input: this.inputColorLocal,\n inputText: this.inputTextColorLocal,\n\n topBar: this.topBarColorLocal,\n topBarText: this.topBarTextColorLocal,\n topBarLink: this.topBarLinkColorLocal,\n\n btn: this.btnColorLocal,\n btnText: this.btnTextColorLocal,\n\n alertError: this.alertErrorColorLocal,\n badgeNotification: this.badgeNotificationColorLocal,\n\n faint: this.faintColorLocal,\n faintLink: this.faintLinkColorLocal,\n border: this.borderColorLocal,\n\n cRed: this.cRedColorLocal,\n cBlue: this.cBlueColorLocal,\n cGreen: this.cGreenColorLocal,\n cOrange: this.cOrangeColorLocal\n }\n },\n currentOpacity () {\n return {\n bg: this.bgOpacityLocal,\n btn: this.btnOpacityLocal,\n input: this.inputOpacityLocal,\n panel: this.panelOpacityLocal,\n topBar: this.topBarOpacityLocal,\n border: this.borderOpacityLocal,\n faint: this.faintOpacityLocal\n }\n },\n currentRadii () {\n return {\n btn: this.btnRadiusLocal,\n input: this.inputRadiusLocal,\n checkbox: this.checkboxRadiusLocal,\n panel: this.panelRadiusLocal,\n avatar: this.avatarRadiusLocal,\n avatarAlt: this.avatarAltRadiusLocal,\n tooltip: this.tooltipRadiusLocal,\n attachment: this.attachmentRadiusLocal\n }\n },\n preview () {\n return composePreset(this.previewColors, this.previewRadii, this.previewShadows, this.previewFonts)\n },\n previewTheme () {\n if (!this.preview.theme.colors) return { colors: {}, opacity: {}, radii: {}, shadows: {}, fonts: {} }\n return this.preview.theme\n },\n // This needs optimization maybe\n previewContrast () {\n if (!this.previewTheme.colors.bg) return {}\n const colors = this.previewTheme.colors\n const opacity = this.previewTheme.opacity\n if (!colors.bg) return {}\n const hints = (ratio) => ({\n text: ratio.toPrecision(3) + ':1',\n // AA level, AAA level\n aa: ratio >= 4.5,\n aaa: ratio >= 7,\n // same but for 18pt+ texts\n laa: ratio >= 3,\n laaa: ratio >= 4.5\n })\n\n // fgsfds :DDDD\n const fgs = {\n text: hex2rgb(colors.text),\n panelText: hex2rgb(colors.panelText),\n panelLink: hex2rgb(colors.panelLink),\n btnText: hex2rgb(colors.btnText),\n topBarText: hex2rgb(colors.topBarText),\n inputText: hex2rgb(colors.inputText),\n\n link: hex2rgb(colors.link),\n topBarLink: hex2rgb(colors.topBarLink),\n\n red: hex2rgb(colors.cRed),\n green: hex2rgb(colors.cGreen),\n blue: hex2rgb(colors.cBlue),\n orange: hex2rgb(colors.cOrange)\n }\n\n const bgs = {\n bg: hex2rgb(colors.bg),\n btn: hex2rgb(colors.btn),\n panel: hex2rgb(colors.panel),\n topBar: hex2rgb(colors.topBar),\n input: hex2rgb(colors.input),\n alertError: hex2rgb(colors.alertError),\n badgeNotification: hex2rgb(colors.badgeNotification)\n }\n\n /* This is a bit confusing because \"bottom layer\" used is text color\n * This is done to get worst case scenario when background below transparent\n * layer matches text color, making it harder to read the lower alpha is.\n */\n const ratios = {\n bgText: getContrastRatio(alphaBlend(bgs.bg, opacity.bg, fgs.text), fgs.text),\n bgLink: getContrastRatio(alphaBlend(bgs.bg, opacity.bg, fgs.link), fgs.link),\n bgRed: getContrastRatio(alphaBlend(bgs.bg, opacity.bg, fgs.red), fgs.red),\n bgGreen: getContrastRatio(alphaBlend(bgs.bg, opacity.bg, fgs.green), fgs.green),\n bgBlue: getContrastRatio(alphaBlend(bgs.bg, opacity.bg, fgs.blue), fgs.blue),\n bgOrange: getContrastRatio(alphaBlend(bgs.bg, opacity.bg, fgs.orange), fgs.orange),\n\n tintText: getContrastRatio(alphaBlend(bgs.bg, 0.5, fgs.panelText), fgs.text),\n\n panelText: getContrastRatio(alphaBlend(bgs.panel, opacity.panel, fgs.panelText), fgs.panelText),\n panelLink: getContrastRatio(alphaBlend(bgs.panel, opacity.panel, fgs.panelLink), fgs.panelLink),\n\n btnText: getContrastRatio(alphaBlend(bgs.btn, opacity.btn, fgs.btnText), fgs.btnText),\n\n inputText: getContrastRatio(alphaBlend(bgs.input, opacity.input, fgs.inputText), fgs.inputText),\n\n topBarText: getContrastRatio(alphaBlend(bgs.topBar, opacity.topBar, fgs.topBarText), fgs.topBarText),\n topBarLink: getContrastRatio(alphaBlend(bgs.topBar, opacity.topBar, fgs.topBarLink), fgs.topBarLink)\n }\n\n return Object.entries(ratios).reduce((acc, [k, v]) => { acc[k] = hints(v); return acc }, {})\n },\n previewRules () {\n if (!this.preview.rules) return ''\n return [\n ...Object.values(this.preview.rules),\n 'color: var(--text)',\n 'font-family: var(--interfaceFont, sans-serif)'\n ].join(';')\n },\n shadowsAvailable () {\n return Object.keys(this.previewTheme.shadows).sort()\n },\n currentShadowOverriden: {\n get () {\n return !!this.currentShadow\n },\n set (val) {\n if (val) {\n set(this.shadowsLocal, this.shadowSelected, this.currentShadowFallback.map(_ => Object.assign({}, _)))\n } else {\n del(this.shadowsLocal, this.shadowSelected)\n }\n }\n },\n currentShadowFallback () {\n return this.previewTheme.shadows[this.shadowSelected]\n },\n currentShadow: {\n get () {\n return this.shadowsLocal[this.shadowSelected]\n },\n set (v) {\n set(this.shadowsLocal, this.shadowSelected, v)\n }\n },\n themeValid () {\n return !this.shadowsInvalid && !this.colorsInvalid && !this.radiiInvalid\n },\n exportedTheme () {\n const saveEverything = (\n !this.keepFonts &&\n !this.keepShadows &&\n !this.keepOpacity &&\n !this.keepRoundness &&\n !this.keepColor\n )\n\n const theme = {}\n\n if (this.keepFonts || saveEverything) {\n theme.fonts = this.fontsLocal\n }\n if (this.keepShadows || saveEverything) {\n theme.shadows = this.shadowsLocal\n }\n if (this.keepOpacity || saveEverything) {\n theme.opacity = this.currentOpacity\n }\n if (this.keepColor || saveEverything) {\n theme.colors = this.currentColors\n }\n if (this.keepRoundness || saveEverything) {\n theme.radii = this.currentRadii\n }\n\n return {\n // To separate from other random JSON files and possible future theme formats\n _pleroma_theme_version: 2, theme\n }\n }\n },\n components: {\n ColorInput,\n OpacityInput,\n RangeInput,\n ContrastRatio,\n ShadowControl,\n FontControl,\n TabSwitcher,\n Preview,\n ExportImport\n },\n methods: {\n setCustomTheme () {\n this.$store.dispatch('setOption', {\n name: 'customTheme',\n value: {\n shadows: this.shadowsLocal,\n fonts: this.fontsLocal,\n opacity: this.currentOpacity,\n colors: this.currentColors,\n radii: this.currentRadii\n }\n })\n },\n onImport (parsed) {\n if (parsed._pleroma_theme_version === 1) {\n this.normalizeLocalState(parsed, 1)\n } else if (parsed._pleroma_theme_version === 2) {\n this.normalizeLocalState(parsed.theme, 2)\n }\n },\n importValidator (parsed) {\n const version = parsed._pleroma_theme_version\n return version >= 1 || version <= 2\n },\n clearAll () {\n const state = this.$store.state.config.customTheme\n const version = state.colors ? 2 : 'l1'\n this.normalizeLocalState(this.$store.state.config.customTheme, version)\n },\n\n // Clears all the extra stuff when loading V1 theme\n clearV1 () {\n Object.keys(this.$data)\n .filter(_ => _.endsWith('ColorLocal') || _.endsWith('OpacityLocal'))\n .filter(_ => !v1OnlyNames.includes(_))\n .forEach(key => {\n set(this.$data, key, undefined)\n })\n },\n\n clearRoundness () {\n Object.keys(this.$data)\n .filter(_ => _.endsWith('RadiusLocal'))\n .forEach(key => {\n set(this.$data, key, undefined)\n })\n },\n\n clearOpacity () {\n Object.keys(this.$data)\n .filter(_ => _.endsWith('OpacityLocal'))\n .forEach(key => {\n set(this.$data, key, undefined)\n })\n },\n\n clearShadows () {\n this.shadowsLocal = {}\n },\n\n clearFonts () {\n this.fontsLocal = {}\n },\n\n /**\n * This applies stored theme data onto form. Supports three versions of data:\n * v2 (version = 2) - newer version of themes.\n * v1 (version = 1) - older version of themes (import from file)\n * v1l (version = l1) - older version of theme (load from local storage)\n * v1 and v1l differ because of way themes were stored/exported.\n * @param {Object} input - input data\n * @param {Number} version - version of data. 0 means try to guess based on data. \"l1\" means v1, locastorage type\n */\n normalizeLocalState (input, version = 0) {\n const colors = input.colors || input\n const radii = input.radii || input\n const opacity = input.opacity\n const shadows = input.shadows || {}\n const fonts = input.fonts || {}\n\n if (version === 0) {\n if (input.version) version = input.version\n // Old v1 naming: fg is text, btn is foreground\n if (typeof colors.text === 'undefined' && typeof colors.fg !== 'undefined') {\n version = 1\n }\n // New v2 naming: text is text, fg is foreground\n if (typeof colors.text !== 'undefined' && typeof colors.fg !== 'undefined') {\n version = 2\n }\n }\n\n // Stuff that differs between V1 and V2\n if (version === 1) {\n this.fgColorLocal = rgb2hex(colors.btn)\n this.textColorLocal = rgb2hex(colors.fg)\n }\n\n if (!this.keepColor) {\n this.clearV1()\n const keys = new Set(version !== 1 ? Object.keys(colors) : [])\n if (version === 1 || version === 'l1') {\n keys\n .add('bg')\n .add('link')\n .add('cRed')\n .add('cBlue')\n .add('cGreen')\n .add('cOrange')\n }\n\n keys.forEach(key => {\n this[key + 'ColorLocal'] = rgb2hex(colors[key])\n })\n }\n\n if (!this.keepRoundness) {\n this.clearRoundness()\n Object.entries(radii).forEach(([k, v]) => {\n // 'Radius' is kept mostly for v1->v2 localstorage transition\n const key = k.endsWith('Radius') ? k.split('Radius')[0] : k\n this[key + 'RadiusLocal'] = v\n })\n }\n\n if (!this.keepShadows) {\n this.clearShadows()\n this.shadowsLocal = shadows\n this.shadowSelected = this.shadowsAvailable[0]\n }\n\n if (!this.keepFonts) {\n this.clearFonts()\n this.fontsLocal = fonts\n }\n\n if (opacity && !this.keepOpacity) {\n this.clearOpacity()\n Object.entries(opacity).forEach(([k, v]) => {\n if (typeof v === 'undefined' || v === null || Number.isNaN(v)) return\n this[k + 'OpacityLocal'] = v\n })\n }\n }\n },\n watch: {\n currentRadii () {\n try {\n this.previewRadii = generateRadii({ radii: this.currentRadii })\n this.radiiInvalid = false\n } catch (e) {\n this.radiiInvalid = true\n console.warn(e)\n }\n },\n shadowsLocal: {\n handler () {\n try {\n this.previewShadows = generateShadows({ shadows: this.shadowsLocal })\n this.shadowsInvalid = false\n } catch (e) {\n this.shadowsInvalid = true\n console.warn(e)\n }\n },\n deep: true\n },\n fontsLocal: {\n handler () {\n try {\n this.previewFonts = generateFonts({ fonts: this.fontsLocal })\n this.fontsInvalid = false\n } catch (e) {\n this.fontsInvalid = true\n console.warn(e)\n }\n },\n deep: true\n },\n currentColors () {\n try {\n this.previewColors = generateColors({\n opacity: this.currentOpacity,\n colors: this.currentColors\n })\n this.colorsInvalid = false\n } catch (e) {\n this.colorsInvalid = true\n console.warn(e)\n }\n },\n currentOpacity () {\n try {\n this.previewColors = generateColors({\n opacity: this.currentOpacity,\n colors: this.currentColors\n })\n } catch (e) {\n console.warn(e)\n }\n },\n selected () {\n if (this.selectedVersion === 1) {\n if (!this.keepRoundness) {\n this.clearRoundness()\n }\n\n if (!this.keepShadows) {\n this.clearShadows()\n }\n\n if (!this.keepOpacity) {\n this.clearOpacity()\n }\n\n if (!this.keepColor) {\n this.clearV1()\n\n this.bgColorLocal = this.selected[1]\n this.fgColorLocal = this.selected[2]\n this.textColorLocal = this.selected[3]\n this.linkColorLocal = this.selected[4]\n this.cRedColorLocal = this.selected[5]\n this.cGreenColorLocal = this.selected[6]\n this.cBlueColorLocal = this.selected[7]\n this.cOrangeColorLocal = this.selected[8]\n }\n } else if (this.selectedVersion >= 2) {\n this.normalizeLocalState(this.selected.theme, 2)\n }\n }\n }\n}\n","
\n \n \n {{ label }}\n \n \n \n \n \n