fix(theming): better background and UI color change description

Signed-off-by: Jérôme Herbinet <33763786+Jerome-Herbinet@users.noreply.github.com>
Signed-off-by: skjnldsv <skjnldsv@protonmail.com>

3 files changed, 5 insertions, 5 deletions

diff --git a/apps/theming/src/UserThemes.vue b/apps/theming/src/UserThemes.vue
index d941bf9c1db..676b8eca767 100644
--- a/apps/theming/src/UserThemes.vue
+++ b/apps/theming/src/UserThemes.vue
@@ -53,14 +53,14 @@
 			</div>
 		</NcSettingsSection>
 
-		<NcSettingsSection :name="t('theming', 'Background')"
+		<NcSettingsSection :name="t('theming', 'Background and color')"
 			class="background"
 			data-user-theming-background-disabled>
 			<template v-if="isUserThemingDisabled">
 				<p>{{ t('theming', 'Customization has been disabled by your administrator') }}</p>
 			</template>
 			<template v-else>
-				<p>{{ t('theming', 'Set a custom background') }}</p>
+				<p>{{ t('theming', 'The background can be set to an image from the default set, a custom uploaded image, or a plain color. The primary color will automatically be adapted based on this and used for elements like folder icons, primary buttons and highlights.') }}</p>
 				<BackgroundSettings class="background__grid" @update:background="refreshGlobalStyles" />
 			</template>
 		</NcSettingsSection>
diff --git a/dist/theming-personal-theming.js b/dist/theming-personal-theming.js
index 3c3c34ce6b8..92eb2475790 100644
--- a/dist/theming-personal-theming.js
+++ b/dist/theming-personal-theming.js
@@ -1,3 +1,3 @@
 /*! For license information please see theming-personal-theming.js.LICENSE.txt */
-(()=>{var e,n,r,o={46112:(e,n,r)=>{"use strict";var o=r(92457),a=r(85471),i=r(63814),l=r(38613),s=r(26287),c=r(32073),u=r(88837),d=r(85168),p=(r(93525),r(17334)),h=r.n(p),f=r(23503),g=r(9518),m=r(64866),v=r.n(m),b=r(85338),y=r(24325);const A={name:"ImageEditIcon",emits:["click"],props:{title:{type:String},fillColor:{type:String,default:"currentColor"},size:{type:Number,default:24}}};var _=r(14486);const w=(0,_.A)(A,(function(){var t=this,e=t._self._c;return e("span",t._b({staticClass:"material-design-icon image-edit-icon",attrs:{"aria-hidden":!t.title||null,"aria-label":t.title,role:"img"},on:{click:function(e){return t.$emit("click",e)}}},"span",t.$attrs,!1),[e("svg",{staticClass:"material-design-icon__svg",attrs:{fill:t.fillColor,width:t.size,height:t.size,viewBox:"0 0 24 24"}},[e("path",{attrs:{d:"M22.7 14.3L21.7 15.3L19.7 13.3L20.7 12.3C20.8 12.2 20.9 12.1 21.1 12.1C21.2 12.1 21.4 12.2 21.5 12.3L22.8 13.6C22.9 13.8 22.9 14.1 22.7 14.3M13 19.9V22H15.1L21.2 15.9L19.2 13.9L13 19.9M21 5C21 3.9 20.1 3 19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H11V19.1L12.1 18H5L8.5 13.5L11 16.5L14.5 12L16.1 14.1L21 9.1V5Z"}},[t.title?e("title",[t._v(t._s(t.title))]):t._e()])])])}),[],!1,null,null,null).exports;var C=r(96763);const k=(0,l.C)("theming","backgroundImage"),x=(0,l.C)("theming","shippedBackgrounds"),S=(0,l.C)("theming","themingDefaultBackground"),D=(0,l.C)("theming","defaultShippedBackground"),T=t=>(0,i.fg)("theming","","img/background/")+t,O={name:"BackgroundSettings",components:{Check:b.A,Close:y.A,ImageEdit:w,NcButton:g.A,NcColorPicker:f.N},data:()=>({loading:!1,Theming:(0,l.C)("theming","data",{}),backgroundImage:k}),computed:{shippedBackgrounds(){return Object.keys(x).map((t=>({name:t,url:T(t),preview:T("preview/"+t),details:x[t]}))).filter((t=>!(!this.isGlobalBackgroundDeleted&&!this.isGlobalBackgroundDefault)||t.name!==D))},isGlobalBackgroundDefault:()=>!!S,isGlobalBackgroundDeleted:()=>"backgroundColor"===S,isBackgroundDisabled(){return"disabled"===this.backgroundImage||!this.backgroundImage}},methods:{invertTextColor(t){return this.calculateLuma(t)>.6},calculateLuma(t){const[e,n,r]=this.hexToRGB(t);return(.2126*e+.7152*n+.0722*r)/255},hexToRGB(t){const e=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);return e?[parseInt(e[1],16),parseInt(e[2],16),parseInt(e[3],16)]:null},async update(t){this.backgroundImage=t.backgroundImage,this.Theming.color=t.backgroundColor,this.$emit("update:background"),this.loading=!1},async setDefault(){this.loading="default";const t=await s.A.post((0,i.Jv)("/apps/theming/background/default"));this.update(t.data)},async setShipped(t){this.loading=t;const e=await s.A.post((0,i.Jv)("/apps/theming/background/shipped"),{value:t});this.update(e.data)},async setFile(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null;this.loading="custom";const n=await s.A.post((0,i.Jv)("/apps/theming/background/custom"),{value:t,color:e});this.update(n.data)},async removeBackground(){this.loading="remove";const t=await s.A.delete((0,i.Jv)("/apps/theming/background/custom"));this.update(t.data)},async pickColor(t){var e,n;this.loading="color";const r=(null==t||null===(e=t.target)||void 0===e||null===(e=e.dataset)||void 0===e?void 0:e.color)||(null===(n=this.Theming)||void 0===n?void 0:n.color)||"#0082c9",o=await s.A.post((0,i.Jv)("/apps/theming/background/color"),{color:r});this.update(o.data)},debouncePickColor:h()((function(){this.pickColor(...arguments)}),200),pickFile(){(0,d.a1)(t("theming","Select a background from your files")).allowDirectories(!1).setMimeTypeFilter(["image/png","image/gif","image/jpeg","image/svg+xml","image/svg"]).setMultiSelect(!1).addButton({id:"select",label:t("theming","Select background"),callback:t=>{var e;this.applyFile(null===(e=t[0])||void 0===e?void 0:e.path)},type:"primary"}).build().pick()},async applyFile(e){if(!e||"string"!=typeof e||0===e.trim().length||"/"===e)return C.error("No valid background have been selected",{path:e}),void(0,d.Qg)(t("theming","No background has been selected"));this.loading="custom";let n=null,r=null;try{var a;const t=(0,i.dC)("dav/files/"+(0,o.HW)().uid+e);n=await s.A.get(t,{responseType:"blob"});const l=URL.createObjectURL(n.data),c=await this.getColorPaletteFromBlob(l);r=null==c||null===(a=c.DarkVibrant)||void 0===a?void 0:a.hex,this.setFile(e,r),C.debug("Extracted colour",r,"from custom image",e,c)}catch(t){this.setFile(e),C.error("Unable to extract colour from custom image",{error:t,path:e,response:n,color:r})}},getColorPaletteFromBlob:t=>new Promise(((e,n)=>{new(v())(t).getPalette(((t,r)=>{t&&n(t),e(r)}))}))}};var E=r(85072),I=r.n(E),j=r(97825),M=r.n(j),P=r(77659),L=r.n(P),N=r(55056),B=r.n(N),R=r(10540),F=r.n(R),q=r(41113),H=r.n(q),U=r(49370),z={};z.styleTagTransform=H(),z.setAttributes=B(),z.insert=L().bind(null,"head"),z.domAPI=M(),z.insertStyleElement=F(),I()(U.A,z),U.A&&U.A.locals&&U.A.locals;const V=(0,_.A)(O,(function(){var t=this,e=t._self._c;return e("div",{staticClass:"background-selector",attrs:{"data-user-theming-background-settings":""}},[e("button",{class:{"icon-loading":"custom"===t.loading,"background background__filepicker":!0,"background--active":"custom"===t.backgroundImage},attrs:{"aria-pressed":"custom"===t.backgroundImage,"data-color-bright":t.invertTextColor(t.Theming.color),"data-user-theming-background-custom":"",tabindex:"0"},on:{click:t.pickFile}},[t._v("\n\t\t"+t._s(t.t("theming","Custom background"))+"\n\t\t"),"custom"!==t.backgroundImage?e("ImageEdit",{attrs:{size:26}}):t._e(),t._v(" "),e("Check",{attrs:{size:44}})],1),t._v(" "),e("button",{class:{"icon-loading":"default"===t.loading,"background background__default":!0,"background--active":"default"===t.backgroundImage},style:{"--border-color":t.Theming.defaultColor},attrs:{"aria-pressed":"default"===t.backgroundImage,"data-color-bright":t.invertTextColor(t.Theming.defaultColor),"data-user-theming-background-default":"",tabindex:"0"},on:{click:t.setDefault}},[t._v("\n\t\t"+t._s(t.t("theming","Default background"))+"\n\t\t"),e("Check",{attrs:{size:44}})],1),t._v(" "),e("div",{staticClass:"background-color",attrs:{"data-user-theming-background-color":""}},[e("NcColorPicker",{on:{input:t.debouncePickColor},model:{value:t.Theming.color,callback:function(e){t.$set(t.Theming,"color",e)},expression:"Theming.color"}},[e("NcButton",{attrs:{type:"ternary"}},[t._v("\n\t\t\t\t"+t._s(t.t("theming","Change color"))+"\n\t\t\t")])],1)],1),t._v(" "),e("button",{class:{"background background__delete":!0,"background--active":t.isBackgroundDisabled},attrs:{"aria-pressed":t.isBackgroundDisabled,"data-user-theming-background-clear":"",tabindex:"0"},on:{click:t.removeBackground}},[t._v("\n\t\t"+t._s(t.t("theming","No background"))+"\n\t\t"),t.isBackgroundDisabled?t._e():e("Close",{attrs:{size:32}}),t._v(" "),e("Check",{attrs:{size:44}})],1),t._v(" "),t._l(t.shippedBackgrounds,(function(n){return e("button",{key:n.name,class:{"background background__shipped":!0,"icon-loading":t.loading===n.name,"background--active":t.backgroundImage===n.name},style:{backgroundImage:"url("+n.preview+")","--border-color":n.details.primary_color},attrs:{title:n.details.attribution,"aria-label":n.details.description,"aria-pressed":t.backgroundImage===n.name,"data-color-bright":"dark"===n.details.theming,"data-user-theming-background-shipped":n.name,tabindex:"0"},on:{click:function(e){return t.setShipped(n.name)}}},[e("Check",{attrs:{size:44}})],1)}))],2)}),[],!1,null,"1175e65a",null).exports;var W=r(96763);const Y={name:"ItemPreview",components:{NcCheckboxRadioSwitch:c.A},props:{enforced:{type:Boolean,default:!1},selected:{type:Boolean,default:!1},theme:{type:Object,required:!0},type:{type:String,default:""},unique:{type:Boolean,default:!1}},computed:{switchType(){return this.unique?"switch":"radio"},name(){return this.unique?null:this.type},img(){return(0,i.fg)("theming","img",this.theme.id+".jpg")},checked:{get(){return this.selected},set(t){W.debug("Changed theme",this.theme.id,t),this.unique?this.$emit("change",{enabled:!0===t,id:this.theme.id}):this.$emit("change",{enabled:!0,id:this.theme.id})}}},methods:{onToggle(){"radio"!==this.switchType?this.checked=!this.checked:this.checked=!0}}};var G=r(86619),X={};X.styleTagTransform=H(),X.setAttributes=B(),X.insert=L().bind(null,"head"),X.domAPI=M(),X.insertStyleElement=F(),I()(G.A,X),G.A&&G.A.locals&&G.A.locals;const $=(0,_.A)(Y,(function(){var t=this,e=t._self._c;return e("div",{staticClass:"theming__preview",class:"theming__preview--"+t.theme.id},[e("div",{staticClass:"theming__preview-image",style:{backgroundImage:"url("+t.img+")"},on:{click:t.onToggle}}),t._v(" "),e("div",{staticClass:"theming__preview-description"},[e("h3",[t._v(t._s(t.theme.title))]),t._v(" "),e("p",{staticClass:"theming__preview-explanation"},[t._v(t._s(t.theme.description))]),t._v(" "),t.enforced?e("span",{staticClass:"theming__preview-warning",attrs:{role:"note"}},[t._v("\n\t\t\t"+t._s(t.t("theming","Theme selection is enforced"))+"\n\t\t")]):t._e(),t._v(" "),e("NcCheckboxRadioSwitch",{staticClass:"theming__preview-toggle",attrs:{checked:t.checked,disabled:t.enforced,name:t.name,type:t.switchType},on:{"update:checked":function(e){t.checked=e}}},[t._v("\n\t\t\t"+t._s(t.theme.enableLabel)+"\n\t\t")])],1)])}),[],!1,null,"1a08e35a",null).exports;var K=r(53334),Q=r(13073),J=r(59271);function Z(t){return Z="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},Z(t)}function tt(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function et(){return et=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(t[r]=n[r])}return t},et.apply(this,arguments)}function nt(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter((function(t){return Object.getOwnPropertyDescriptor(n,t).enumerable})))),r.forEach((function(e){tt(t,e,n[e])}))}return t}function rt(t){if("undefined"!=typeof window&&window.navigator)return!!navigator.userAgent.match(t)}var ot=rt(/(?:Trident.*rv[ :]?11\.|msie|iemobile|Windows Phone)/i),at=rt(/Edge/i),it=rt(/firefox/i),lt=rt(/safari/i)&&!rt(/chrome/i)&&!rt(/android/i),st=rt(/iP(ad|od|hone)/i),ct=rt(/chrome/i)&&rt(/android/i),ut={capture:!1,passive:!1};function dt(t,e,n){t.addEventListener(e,n,!ot&&ut)}function pt(t,e,n){t.removeEventListener(e,n,!ot&&ut)}function ht(t,e){if(e){if(">"===e[0]&&(e=e.substring(1)),t)try{if(t.matches)return t.matches(e);if(t.msMatchesSelector)return t.msMatchesSelector(e);if(t.webkitMatchesSelector)return t.webkitMatchesSelector(e)}catch(t){return!1}return!1}}function ft(t){return t.host&&t!==document&&t.host.nodeType?t.host:t.parentNode}function gt(t,e,n,r){if(t){n=n||document;do{if(null!=e&&(">"===e[0]?t.parentNode===n&&ht(t,e):ht(t,e))||r&&t===n)return t;if(t===n)break}while(t=ft(t))}return null}var mt,vt=/\s+/g;function bt(t,e,n){if(t&&e)if(t.classList)t.classList[n?"add":"remove"](e);else{var r=(" "+t.className+" ").replace(vt," ").replace(" "+e+" "," ");t.className=(r+(n?" "+e:"")).replace(vt," ")}}function yt(t,e,n){var r=t&&t.style;if(r){if(void 0===n)return document.defaultView&&document.defaultView.getComputedStyle