theming-admin-theming.mjs 19 KB

12
  1. /*! third party licenses: dist/vendor.LICENSE.txt */
  2. import{bZ as r,bR as d,G as x,a7 as m,F as w,I as U,a4 as V,bG as M,b_ as h,al as I,a_ as L,af as P,ai as F,aX as b,bS as k,aV as g}from"./core-common.mjs";import{w as B,A as R,r as q}from"./chunks/index-CG7xFxrZ.mjs";import{n as u,b0 as T,b1 as $,a3 as D,b2 as j}from"./chunks/icons-TElqpmA8.mjs";import{a as z}from"./chunks/index-DCgLaXhm.mjs";import"./chunks/index-PaKKd09k.mjs";import{z as E}from"./chunks/_plugin-vue2_normalizer-VrK6B12S-BQkexw0P.mjs";import"./chunks/sortable.esm-D5slCXxa.mjs";const O=["color","logo","background","logoheader","favicon","disable-user-theming"],A={emits:["update:theming"],data(){return{showSuccess:!1,errorMessage:""}},computed:{id(){return"admin-theming-".concat(this.name)}},methods:{reset(){this.showSuccess=!1,this.errorMessage=""},handleSuccess(){this.showSuccess=!0,setTimeout(()=>{this.showSuccess=!1},2e3),O.includes(this.name)&&this.$emit("update:theming")}}},f={mixins:[A],watch:{value(e){this.localValue=e}},data(){return{localValue:this.value}},methods:{async save(){var i;this.reset();const e=r("/apps/theming/ajax/updateStylesheet"),a=this.localValue===!0?"yes":this.localValue===!1?"no":this.localValue;try{await d.post(e,{setting:this.name,value:a}),this.$emit("update:value",this.localValue),this.handleSuccess()}catch(n){this.errorMessage=(i=n.response.data.data)==null?void 0:i.message}},async undo(){var a;this.reset();const e=r("/apps/theming/ajax/undoChanges");try{const{data:i}=await d.post(e,{setting:this.name});i.data.value&&this.$emit("update:defaultValue",i.data.value),this.$emit("update:value",i.data.value||this.defaultValue),this.handleSuccess()}catch(i){this.errorMessage=(a=i.response.data.data)==null?void 0:a.message}}}},G={name:"CheckboxField",components:{NcCheckboxRadioSwitch:x,NcNoteCard:m},mixins:[f],props:{name:{type:String,required:!0},value:{type:Boolean,required:!0},defaultValue:{type:Boolean,required:!0},displayName:{type:String,required:!0},label:{type:String,required:!0},description:{type:String,required:!0}}};var H=function(){var e=this,a=e._self._c;return a("div",{staticClass:"field"},[a("label",{attrs:{for:e.id}},[e._v(e._s(e.displayName))]),a("div",{staticClass:"field__row"},[a("NcCheckboxRadioSwitch",{attrs:{type:"switch",id:e.id,checked:e.localValue},on:{"update:checked":[function(i){e.localValue=i},e.save]}},[e._v(" "+e._s(e.label)+" ")])],1),a("p",{staticClass:"field__description"},[e._v(e._s(e.description))]),e.errorMessage?a("NcNoteCard",{attrs:{type:"error","show-alert":!0}},[a("p",[e._v(e._s(e.errorMessage))])]):e._e()],1)},W=[],X=u(G,H,W,!1,null,"d03af6a8");const Z=X.exports,y={name:"ColorPickerField",components:{NcButton:w,NcColorPicker:U,NcLoadingIcon:V,NcNoteCard:m,Undo:T,Palette:$},mixins:[f],props:{name:{type:String,required:!0},description:{type:String,default:""},value:{type:String,required:!0},textColor:{type:String,default:null},defaultValue:{type:String,required:!0},displayName:{type:String,required:!0}},emits:["update:theming"],data(){return{loading:!1}},computed:{calculatedTextColor(){return B(this.value).isLight()?"#000000":"#ffffff"},usedTextColor(){return this.textColor?this.textColor:this.calculatedTextColor}},methods:{debounceSave:z.debounce(async function(){this.loading=!0,await this.save(),this.$emit("update:theming"),this.loading=!1},200)}},_=()=>{M((e,a)=>({"1811af35":e.value,"09f73e86":e.usedTextColor}))},C=y.setup;y.setup=C?(e,a)=>(_(),C(e,a)):_;const J=y;var K=function(){var e=this,a=e._self._c;return a("div",{staticClass:"field"},[a("label",{attrs:{for:e.id}},[e._v(e._s(e.displayName))]),a("div",{staticClass:"field__row"},[a("NcColorPicker",{attrs:{value:e.localValue,"advanced-fields":!0},on:{"update:value":[function(i){e.localValue=i},e.debounceSave]}},[a("NcButton",{staticClass:"field__button",attrs:{id:e.id,type:"primary","aria-label":e.t("theming","Select a custom color"),"data-admin-theming-setting-color-picker":""},scopedSlots:e._u([{key:"icon",fn:function(){return[e.loading?a("NcLoadingIcon",{attrs:{appearance:e.calculatedTextColor==="#ffffff"?"light":"dark",size:20}}):a("Palette",{attrs:{size:20}})]},proxy:!0}])},[e._v(" "+e._s(e.value)+" ")])],1),a("div",{staticClass:"field__color-preview",attrs:{"data-admin-theming-setting-color":""}}),e.value!==e.defaultValue?a("NcButton",{attrs:{type:"tertiary","aria-label":e.t("theming","Reset to default"),"data-admin-theming-setting-color-reset":""},on:{click:e.undo},scopedSlots:e._u([{key:"icon",fn:function(){return[a("Undo",{attrs:{size:20}})]},proxy:!0}],null,!1,33666776)}):e._e()],1),e.description?a("div",{staticClass:"description"},[e._v(" "+e._s(e.description)+" ")]):e._e(),e.errorMessage?a("NcNoteCard",{attrs:{type:"error","show-alert":!0}},[a("p",[e._v(e._s(e.errorMessage))])]):e._e()],1)},Q=[],Y=u(J,K,Q,!1,null,"35bd1ff3");const ee=Y.exports,{allowedMimeTypes:ae}=h("theming","adminThemingParameters",{}),te={name:"FileInputField",components:{Delete:D,NcButton:w,NcLoadingIcon:V,NcNoteCard:m,Undo:T,Upload:j},mixins:[A],props:{name:{type:String,required:!0},mimeName:{type:String,required:!0},mimeValue:{type:String,required:!0},defaultMimeValue:{type:String,default:""},displayName:{type:String,required:!0},ariaLabel:{type:String,required:!0}},data(){return{showLoading:!1,acceptMime:(ae[this.name]||["image/jpeg","image/png","image/gif","image/webp"]).join(",")}},computed:{showReset(){return this.mimeValue!==this.defaultMimeValue},showRemove(){return!!(this.name==="background"&&(this.mimeValue.startsWith("image/")||this.mimeValue===this.defaultMimeValue))}},methods:{activateLocalFilePicker(){this.reset(),this.$refs.input.value=null,this.$refs.input.click()},async onChange(e){var s;const a=e.target.files[0],i=new FormData;i.append("key",this.name),i.append("image",a);const n=r("/apps/theming/ajax/uploadImage");try{this.showLoading=!0;const{data:c}=await d.post(n,i);this.showLoading=!1,this.$emit("update:mime-value",a.type),this.$emit("uploaded",c.data.url),this.handleSuccess()}catch(c){this.showLoading=!1,this.errorMessage=(s=c.response.data.data)==null?void 0:s.message}},async undo(){var a;this.reset();const e=r("/apps/theming/ajax/undoChanges");try{await d.post(e,{setting:this.mimeName}),this.$emit("update:mime-value",this.defaultMimeValue),this.handleSuccess()}catch(i){this.errorMessage=(a=i.response.data.data)==null?void 0:a.message}},async removeBackground(){var a;this.reset();const e=r("/apps/theming/ajax/updateStylesheet");try{await d.post(e,{setting:this.mimeName,value:"backgroundColor"}),this.$emit("update:mime-value","backgroundColor"),this.handleSuccess()}catch(i){this.errorMessage=(a=i.response.data.data)==null?void 0:a.message}}}};var ie=function(){var e=this,a=e._self._c;return a("div",{staticClass:"field"},[a("label",{attrs:{for:e.id}},[e._v(e._s(e.displayName))]),a("div",{staticClass:"field__row"},[a("NcButton",{attrs:{type:"secondary",id:e.id,"aria-label":e.ariaLabel,"data-admin-theming-setting-file-picker":""},on:{click:e.activateLocalFilePicker},scopedSlots:e._u([{key:"icon",fn:function(){return[a("Upload",{attrs:{size:20}})]},proxy:!0}])},[e._v(" "+e._s(e.t("theming","Upload"))+" ")]),e.showReset?a("NcButton",{attrs:{type:"tertiary","aria-label":e.t("theming","Reset to default"),"data-admin-theming-setting-file-reset":""},on:{click:e.undo},scopedSlots:e._u([{key:"icon",fn:function(){return[a("Undo",{attrs:{size:20}})]},proxy:!0}],null,!1,33666776)}):e._e(),e.showRemove?a("NcButton",{attrs:{type:"tertiary","aria-label":e.t("theming","Remove background image"),"data-admin-theming-setting-file-remove":""},on:{click:e.removeBackground},scopedSlots:e._u([{key:"icon",fn:function(){return[a("Delete",{attrs:{size:20}})]},proxy:!0}],null,!1,2705356561)}):e._e(),e.showLoading?a("NcLoadingIcon",{staticClass:"field__loading-icon",attrs:{size:20}}):e._e()],1),(e.name==="logoheader"||e.name==="favicon")&&e.mimeValue!==e.defaultMimeValue?a("div",{staticClass:"field__preview",class:{"field__preview--logoheader":e.name==="logoheader","field__preview--favicon":e.name==="favicon"}}):e._e(),e.errorMessage?a("NcNoteCard",{attrs:{type:"error","show-alert":!0}},[a("p",[e._v(e._s(e.errorMessage))])]):e._e(),a("input",{ref:"input",attrs:{accept:e.acceptMime,type:"file"},on:{change:e.onChange}})],1)},ne=[],le=u(te,ie,ne,!1,null,"d8309706");const se=le.exports,oe={name:"TextField",components:{NcTextField:I},mixins:[f],props:{name:{type:String,required:!0},value:{type:String,required:!0},defaultValue:{type:String,required:!0},type:{type:String,required:!0},displayName:{type:String,required:!0},placeholder:{type:String,required:!0},maxlength:{type:Number,required:!0}}};var re=function(){var e=this,a=e._self._c;return a("div",{staticClass:"field"},[a("NcTextField",{attrs:{value:e.localValue,label:e.displayName,placeholder:e.placeholder,type:e.type,maxlength:e.maxlength,spellcheck:!1,success:e.showSuccess,error:!!e.errorMessage,"helper-text":e.errorMessage,"show-trailing-button":e.value!==e.defaultValue,"trailing-button-icon":"undo"},on:{"update:value":function(i){e.localValue=i},"trailing-button-click":e.undo,keydown:function(i){return!i.type.indexOf("key")&&e._k(i.keyCode,"enter",13,i.key,"Enter")?null:e.save.apply(null,arguments)},blur:e.save}})],1)},de=[],ue=u(oe,re,de,!1,null,"8fab1b6c");const ce=ue.exports,me=L({name:"AppMenuSection",components:{AppOrderSelector:R,NcCheckboxRadioSwitch:x,NcSelect:P,NcSettingsSection:F},props:{defaultApps:{type:Array,required:!0}},emits:{"update:defaultApps":e=>Array.isArray(e)&&e.every(a=>typeof a=="string")},setup(e,{emit:a}){const i=b({get:()=>e.defaultApps.length>0,set:l=>{l?a("update:defaultApps",["dashboard","files"]):s.value=[]}}),n=Object.values(h("core","apps")).map(({id:l,name:o,icon:p})=>({label:o,id:l,icon:p})),s=b({get:()=>e.defaultApps.map(l=>n.filter(o=>o.id===l)[0]),set(l){c("defaultApps",l.map(o=>o.id)).then(()=>a("update:defaultApps",l.map(o=>o.id))).catch(()=>E(k("theming","Could not set global default apps")))}}),c=async(l,o)=>{const p=r("/apps/theming/ajax/updateAppMenu");return await d.put(p,{setting:l,value:o})};return{allApps:n,selectedApps:s,hasCustomDefaultApp:i,t:k}}});var pe=function(){var e=this,a=e._self._c;return e._self._setupProxy,a("NcSettingsSection",{attrs:{name:e.t("theming","Navigation bar settings")}},[a("h3",[e._v(e._s(e.t("theming","Default app")))]),a("p",{staticClass:"info-note"},[e._v(" "+e._s(e.t("theming","The default app is the app that is e.g. opened after login or when the logo in the menu is clicked."))+" ")]),a("NcCheckboxRadioSwitch",{attrs:{checked:e.hasCustomDefaultApp,type:"switch","data-cy-switch-default-app":""},on:{"update:checked":function(i){e.hasCustomDefaultApp=i}}},[e._v(" "+e._s(e.t("theming","Use custom default app"))+" ")]),e.hasCustomDefaultApp?[a("h4",[e._v(e._s(e.t("theming","Global default app")))]),a("NcSelect",{attrs:{"close-on-select":!1,placeholder:e.t("theming","Global default apps"),options:e.allApps,multiple:!0},model:{value:e.selectedApps,callback:function(i){e.selectedApps=i},expression:"selectedApps"}}),a("h5",[e._v(e._s(e.t("theming","Default app priority")))]),a("p",{staticClass:"info-note"},[e._v(" "+e._s(e.t("theming","If an app is not enabled for a user, the next app with lower priority is used."))+" ")]),a("AppOrderSelector",{attrs:{value:e.selectedApps},on:{"update:value":function(i){e.selectedApps=i}}})]:e._e()],2)},ge=[],he=u(me,pe,ge,!1,null,"3c914f64");const fe=he.exports,{defaultBackgroundURL:ye,backgroundMime:ve,backgroundURL:be,backgroundColor:ke,canThemeIcons:_e,docUrl:Ce,docUrlIcons:Se,faviconMime:Ne,isThemable:xe,legalNoticeUrl:we,logoheaderMime:Ve,logoMime:Me,name:Fe,notThemableErrorMessage:Te,primaryColor:Ae,privacyPolicyUrl:Ue,slogan:Ie,url:Le,userThemingDisabled:Pe,defaultApps:Be}=h("theming","adminThemingParameters"),Re=[{name:"name",value:Fe,defaultValue:"Nextcloud",type:"text",displayName:t("theming","Name"),placeholder:t("theming","Name"),maxlength:250},{name:"url",value:Le,defaultValue:"https://nextcloud.com",type:"url",displayName:t("theming","Web link"),placeholder:"https://…",maxlength:500},{name:"slogan",value:Ie,defaultValue:t("theming","a safe home for all your data"),type:"text",displayName:t("theming","Slogan"),placeholder:t("theming","Slogan"),maxlength:500}],qe={name:"primary_color",value:Ae,defaultValue:"#0082c9",displayName:t("theming","Primary color"),description:t("theming","The primary color is used for highlighting elements like important buttons. It might get slightly adjusted depending on the current color schema.")},$e=[{name:"imprintUrl",value:we,defaultValue:"",type:"url",displayName:t("theming","Legal notice link"),placeholder:"https://…",maxlength:500},{name:"privacyUrl",value:Ue,defaultValue:"",type:"url",displayName:t("theming","Privacy policy link"),placeholder:"https://…",maxlength:500}],De=[{name:"logoheader",mimeName:"logoheaderMime",mimeValue:Ve,defaultMimeValue:"",displayName:t("theming","Header logo"),ariaLabel:t("theming","Upload new header logo")},{name:"favicon",mimeName:"faviconMime",mimeValue:Ne,defaultMimeValue:"",displayName:t("theming","Favicon"),ariaLabel:t("theming","Upload new favicon")}],je={name:"disable-user-theming",value:Pe,defaultValue:!1,displayName:t("theming","User settings"),label:t("theming","Disable user theming"),description:t("theming","Although you can select and customize your instance, users can change their background and colors. If you want to enforce your customization, you can toggle this on.")},v={name:"AdminTheming",components:{AppMenuSection:fe,CheckboxField:Z,ColorPickerField:ee,FileInputField:se,NcNoteCard:m,NcSettingsSection:F,TextField:ce},data(){return{backgroundMime:ve,backgroundURL:be,backgroundColor:ke,defaultBackgroundColor:"#0069c3",logoMime:Me,textFields:Re,primaryColorPickerField:qe,advancedTextFields:$e,advancedFileInputFields:De,userThemingField:je,defaultApps:Be,canThemeIcons:_e,docUrl:Ce,docUrlIcons:Se,isThemable:xe,notThemableErrorMessage:Te}},computed:{cssBackgroundImage(){return this.backgroundURL?"url('".concat(this.backgroundURL,"')"):"unset"}},watch:{backgroundMime(){this.backgroundMime===""?this.backgroundURL=ye:this.backgroundMime==="backgroundColor"&&(this.backgroundURL="")},async backgroundURL(){if(this.backgroundURL!==""){const e=await this.calculateDefaultBackground();this.defaultBackgroundColor=e,this.backgroundColor=e}}},async mounted(){this.backgroundURL&&(this.defaultBackgroundColor=await this.calculateDefaultBackground())},methods:{refreshStyles:q,calculateDefaultBackground(){const e=a=>"00".concat(a.toString(16)).slice(-2);return new Promise((a,i)=>{const n=new Image;n.src=this.backgroundURL,n.onload=()=>{const s=document.createElement("canvas").getContext("2d");s.imageSmoothingEnabled=!0,s.drawImage(n,0,0,1,1),a("#"+[...s.getImageData(0,0,1,1).data.slice(0,3)].map(e).join(""))},n.onerror=i})}}},S=()=>{M((e,a)=>({"7332d2c6":e.backgroundColor,"21dc28fc":e.cssBackgroundImage}))},N=v.setup;v.setup=N?(e,a)=>(S(),N(e,a)):S;const ze=v;var Ee=function(){var e=this,a=e._self._c;return a("section",[a("NcSettingsSection",{attrs:{name:e.t("theming","Theming"),description:e.t("theming","Theming makes it possible to easily customize the look and feel of your instance and supported clients. This will be visible for all users."),"doc-url":e.docUrl,"data-admin-theming-settings":""}},[a("div",{staticClass:"admin-theming"},[e.isThemable?e._e():a("NcNoteCard",{attrs:{type:"error","show-alert":!0}},[a("p",[e._v(e._s(e.notThemableErrorMessage))])]),e._l(e.textFields,function(i){return a("TextField",{key:i.name,attrs:{"data-admin-theming-setting-field":i.name,"default-value":i.defaultValue,"display-name":i.displayName,maxlength:i.maxlength,name:i.name,placeholder:i.placeholder,type:i.type,value:i.value},on:{"update:value":function(n){return e.$set(i,"value",n)},"update:theming":e.refreshStyles}})}),a("ColorPickerField",{attrs:{name:e.primaryColorPickerField.name,description:e.primaryColorPickerField.description,"default-value":e.primaryColorPickerField.defaultValue,"display-name":e.primaryColorPickerField.displayName,value:e.primaryColorPickerField.value,"data-admin-theming-setting-primary-color":""},on:{"update:value":function(i){return e.$set(e.primaryColorPickerField,"value",i)},"update:theming":e.refreshStyles}}),a("ColorPickerField",{attrs:{name:"background_color",description:e.t("theming","Instead of a background image you can also configure a plain background color. If you use a background image changing this color will influence the color of the app menu icons."),"default-value":e.defaultBackgroundColor,"display-name":e.t("theming","Background color"),value:e.backgroundColor,"data-admin-theming-setting-background-color":""},on:{"update:defaultValue":function(i){e.defaultBackgroundColor=i},"update:default-value":function(i){e.defaultBackgroundColor=i},"update:value":function(i){e.backgroundColor=i},"update:theming":e.refreshStyles}}),a("FileInputField",{attrs:{"aria-label":e.t("theming","Upload new logo"),"data-admin-theming-setting-file":"logo","display-name":e.t("theming","Logo"),"mime-name":"logoMime","mime-value":e.logoMime,name:"logo"},on:{"update:mimeValue":function(i){e.logoMime=i},"update:mime-value":function(i){e.logoMime=i},"update:theming":e.refreshStyles}}),a("FileInputField",{attrs:{"aria-label":e.t("theming","Upload new background and login image"),"data-admin-theming-setting-file":"background","display-name":e.t("theming","Background and login image"),"mime-name":"backgroundMime","mime-value":e.backgroundMime,name:"background"},on:{"update:mimeValue":function(i){e.backgroundMime=i},"update:mime-value":function(i){e.backgroundMime=i},uploaded:function(i){e.backgroundURL=i},"update:theming":e.refreshStyles}}),a("div",{staticClass:"admin-theming__preview",attrs:{"data-admin-theming-preview":""}},[a("div",{staticClass:"admin-theming__preview-logo",attrs:{"data-admin-theming-preview-logo":""}})])],2)]),a("NcSettingsSection",{attrs:{name:e.t("theming","Advanced options")}},[a("div",{staticClass:"admin-theming-advanced"},[e._l(e.advancedTextFields,function(i){return a("TextField",{key:i.name,attrs:{name:i.name,value:i.value,"default-value":i.defaultValue,type:i.type,"display-name":i.displayName,placeholder:i.placeholder,maxlength:i.maxlength},on:{"update:value":function(n){return e.$set(i,"value",n)},"update:theming":e.refreshStyles}})}),e._l(e.advancedFileInputFields,function(i){return a("FileInputField",{key:i.name,attrs:{name:i.name,"mime-name":i.mimeName,"mime-value":i.mimeValue,"default-mime-value":i.defaultMimeValue,"display-name":i.displayName,"aria-label":i.ariaLabel},on:{"update:mimeValue":function(n){return e.$set(i,"mimeValue",n)},"update:mime-value":function(n){return e.$set(i,"mimeValue",n)},"update:theming":e.refreshStyles}})}),a("CheckboxField",{attrs:{name:e.userThemingField.name,value:e.userThemingField.value,"default-value":e.userThemingField.defaultValue,"display-name":e.userThemingField.displayName,label:e.userThemingField.label,description:e.userThemingField.description,"data-admin-theming-setting-disable-user-theming":""},on:{"update:theming":e.refreshStyles}}),e.canThemeIcons?e._e():a("a",{attrs:{href:e.docUrlIcons,rel:"noreferrer noopener"}},[a("em",[e._v(e._s(e.t("theming","Install the ImageMagick PHP extension with support for SVG images to automatically generate favicons based on the uploaded logo and color.")))])])],2)]),a("AppMenuSection",{attrs:{"default-apps":e.defaultApps},on:{"update:defaultApps":function(i){e.defaultApps=i},"update:default-apps":function(i){e.defaultApps=i}}})],1)},Oe=[],Ge=u(ze,Ee,Oe,!1,null,"a47611b2");const He=Ge.exports;g.prototype.OC=OC,g.prototype.t=t;const We=g.extend(He),Xe=new We;Xe.$mount("#admin-theming");