D7net
Home
Console
Upload
information
Create File
Create Folder
About
Tools
:
/
opt
/
psa
/
admin
/
cp
/
public
/
javascript
/
components
/
pages
/
Filename :
BrandingPage.js
back
Copy
(self.webpackChunkPlesk=self.webpackChunkPlesk||[]).push([["components/pages/BrandingPage"],{2352:(e,n,i)=>{"use strict";i.r(n),i.d(n,{default:()=>N});var t=i(285),a=i(586),l=i(628),o=i(286),s=i(89),d=i(625),c=i(603),r=i(1289),u=i(646),m=i(536),g=(i(2353),i(1238)),v=i.n(g),b=i(2354),k=i.n(b);const F=s.Locale.getTranslate("admin.components.forms.settings-ui.branding"),f=s.Locale.getSection("admin.components.forms.settings-ui.branding.background.fit"),x="#4B4B4B",h="fill",p="center",j="tile",S=[h,"fit",p,j],N=(0,c.withSimplePageLayout)((()=>{const e=(0,d.default)(),{data:{viewer:{type:n,branding:{customTitle:i,logo:s,customFavicon:c,background:g}}}}=(0,a.useQuery)(v()),{file:b,color:N,fit:E}=g||{},[I,B]=(0,t.useState)({customTitleEnabled:!!i,customTitle:i??"",customLogoEnabled:!!s,logoFile:null,logoUrlEnabled:s?.url?"enabled":"disabled",logoUrl:s?.url,customFaviconEnabled:c,faviconFileSvg:null,faviconFileIco:null,enabledBackground:!!b,backgroundFile:null,backgroundColor:N||x,backgroundFit:E}),[w,C]=(0,t.useState)(),T="ADMIN"===n?"/admin/server/tools":"/admin/reseller/tools",[y,D]=(0,t.useState)(),[L,U]=(0,t.useState)(),[z]=(0,l.useMutation)(k()),A=(0,t.useMemo)((()=>!(I.enabledBackground&&(I.backgroundFile||b))),[I,b]);(0,t.useEffect)((()=>{const e=L||(b?`/images/${b}`:null);if(!e)return void C(null);const n=new Image;n.onload=function(){C(n)},n.src=e}),[L,b]);const V=(0,t.useMemo)((()=>{let e="cover";switch(I.backgroundFit){case h:e="cover";break;case"fit":e="contain";break;case p:case j:e=w?.height<1080?w?.height/1080*100+"%":"100%"}return{display:!I.enabledBackground&&"none",backgroundColor:I.backgroundColor,inlineSize:300,maxInlineSize:"100%",aspectRatio:"16 / 9",marginBlock:16,backgroundImage:w&&`url(${w.src})`,backgroundSize:e,backgroundRepeat:I.backgroundFit===j?"repeat":"no-repeat",backgroundPosition:"center"}}),[I,w]);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("p",{children:(0,t.jsx)(F,{content:"description"})}),(0,t.jsxs)(r.default,{mutation:z,values:I,onFieldChange:(e,n)=>{B((i=>(0,o.setIn)(i,e,n)))},submitButton:{id:"buttonid-ok"},applyButton:{id:"buttonid-apply"},cancelButton:{component:u.default,id:"buttonid-cancel",to:T},onSubmit:({customTitleEnabled:e,customTitle:n,customLogoEnabled:i,logoUrlEnabled:t,logoUrl:a,logoFile:l,customFaviconEnabled:o,faviconFileSvg:s,faviconFileIco:d,enabledBackground:c,backgroundFile:r,...u})=>({customTitle:e?n:"",customLogoEnabled:i,logoUrlEnabled:i&&"enabled"===t,logoUrl:i&&"enabled"===t?a:"",logoFile:i?l:null,customFaviconEnabled:o,faviconFileSvg:o?s:null,faviconFileIco:o?d:null,enabledBackground:c,backgroundFile:c?r:null,...u}),onSuccess:({editBranding:{warnings:n}},i)=>{(0,m.addToast)({intent:"success",message:(0,t.jsx)(F,{content:"updateSuccess"})}),n.forEach((e=>{(0,m.addToast)({intent:"warning",message:e})}));var a;((0,o.getIn)(I,"customFaviconEnabled")?Boolean((0,o.getIn)(I,"faviconFileSvg")||(0,o.getIn)(I,"faviconFileIco")):c)&&(a=Date.now(),document.querySelectorAll('[rel="icon"]').forEach((e=>{e.href=e.href.replace(/\?\d+/,`?${a}`)})),D(a)),e(i?window.location.pathname:T),B((e=>(0,o.setIn)(e,"backgroundFile",null)))},children:[(0,t.jsxs)(o.Section,{title:(0,t.jsx)(F,{content:"sectionTitle"}),children:[(0,t.jsx)(o.FormFieldCheckbox,{name:"customTitleEnabled",label:(0,t.jsx)(F,{content:"enableCustomTitle"})}),(0,t.jsx)(o.FormFieldText,{name:"customTitle",label:(0,t.jsx)(F,{content:"customTitle"}),size:"lg",maxLength:"255",disabled:!(0,o.getIn)(I,"customTitleEnabled")})]}),(0,t.jsxs)(o.Section,{title:(0,t.jsx)(F,{content:"sectionLogo"}),children:[(0,t.jsx)(o.FormFieldCheckbox,{name:"customLogoEnabled",label:(0,t.jsx)(F,{content:"enableCustomLogo"})}),(0,t.jsx)(o.FormField,{name:"logoFile",label:(0,t.jsx)(F,{content:"logo"}),disabled:!(0,o.getIn)(I,"customLogoEnabled"),children:({getId:e,getName:n,setValue:i,isDisabled:a})=>(0,t.jsxs)(t.Fragment,{children:[s?.fake&&(0,t.jsx)("p",{children:(0,t.jsx)("img",{style:{"max-width":"224px"},src:`/images/logos/${s.fake}`,alt:""})}),(0,t.jsx)(o.InputFile,{id:e(),name:n(),disabled:a(),onChange:e=>i(e)})]})}),(0,t.jsx)(o.FormFieldRadioButtons,{name:"logoUrlEnabled",label:(0,t.jsx)(F,{content:"logoUrl"}),disabled:!(0,o.getIn)(I,"customLogoEnabled"),options:[{value:"disabled",label:(0,t.jsx)(F,{content:"logoUrlDisabled"})},{value:"enabled",label:(0,t.jsx)(F,{content:"logoUrlEnabled"}),indentFields:[(0,t.jsx)(o.FormFieldText,{name:"logoUrl",label:null,size:"lg",maxLength:"245"},"logoUrl")]}]})]}),"ADMIN"===n?(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(o.Section,{title:(0,t.jsx)(F,{content:"sectionFavicon"}),children:[(0,t.jsx)(o.FormFieldCheckbox,{name:"customFaviconEnabled",label:(0,t.jsx)(F,{content:"enableCustomFavicon"}),description:(0,t.jsx)(F,{content:"sectionFaviconDesc"})}),(0,t.jsx)(o.FormField,{name:"faviconFileSvg",label:(0,t.jsx)(F,{content:"faviconSvg"}),description:(0,t.jsx)(F,{content:"faviconSvgHint"}),disabled:!(0,o.getIn)(I,"customFaviconEnabled"),required:!0,children:({getId:e,getName:n,setValue:i,isDisabled:a})=>(0,t.jsxs)(t.Fragment,{children:[c&&(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(o.Icon,{src:"/images/favicon.svg"+(y?`?${y}`:""),size:"16"})," "]}),(0,t.jsx)(o.InputFile,{id:e(),name:n(),disabled:a(),onChange:e=>i(e)})]})}),(0,t.jsx)(o.FormField,{name:"faviconFileIco",label:(0,t.jsx)(F,{content:"faviconIco"}),description:(0,t.jsx)(F,{content:"faviconIcoHint"}),disabled:!(0,o.getIn)(I,"customFaviconEnabled"),required:!0,children:({getId:e,getName:n,setValue:i,isDisabled:a})=>(0,t.jsxs)(t.Fragment,{children:[c&&(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(o.Icon,{src:"/favicon.ico"+(y?`?${y}`:""),size:"16"})," "]}),(0,t.jsx)(o.InputFile,{id:e(),name:n(),disabled:a(),onChange:e=>i(e)})]})})]}),(0,t.jsxs)(o.Section,{title:(0,t.jsxs)("div",{children:[(0,t.jsx)(F,{content:"sectionBackground"})," ",(0,t.jsx)("a",{href:"https://support.plesk.com/hc/en-us/articles/20821281229335",target:"_blank",rel:"noreferrer",children:(0,t.jsx)(o.Icon,{name:"info-circle-filled",intent:"info",size:"16",style:{verticalAlign:0}})})]}),children:[(0,t.jsx)(o.FormField,{name:"backgroundColor",label:(0,t.jsx)(F,{content:"backgroundColor"}),children:({getValue:e,setValue:n})=>(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(o.Input,{type:"color",size:"sm",style:{padding:0},className:"background-preview",value:e(),onChange:e=>n(e.target.value)})," ",e()!==x&&(0,t.jsx)(o.Button,{ghost:!0,icon:"reload",onClick:()=>n(x),children:(0,t.jsx)(F,{content:"backgroundResetColor"})})]})}),(0,t.jsx)(o.FormFieldCheckbox,{name:"enabledBackground",label:(0,t.jsx)(F,{content:"enableCustomBackground"})}),(0,t.jsx)("div",{style:V,className:"background-preview"}),(0,t.jsx)(o.FormField,{name:"backgroundFile",label:(0,t.jsx)(F,{content:"backgroundFile"}),disabled:!(0,o.getIn)(I,"enabledBackground"),children:({getId:e,getName:n,setValue:i,isDisabled:a})=>(0,t.jsx)(o.InputFile,{id:e(),name:n(),disabled:a(),onChange:e=>{i(e),(e=>{if(e){const n=new FileReader;n.onload=function(e){const{result:n}=e.target;U(n)},n.readAsDataURL(e)}else U(null)})(e)}})}),(0,t.jsx)(o.FormFieldSelect,{name:"backgroundFit",label:(0,t.jsx)(F,{content:"backgroundFit"}),disabled:A,children:S.map((e=>(0,t.jsx)(o.SelectOption,{value:e,children:f.lmsg(e)},e)))})]})]}):null]})]})}),(({viewer:{type:e}})=>({breadcrumbs:["ADMIN"===e?{title:s.Locale.getSection("admin.controllers.server.tools").lmsg("title"),href:"/admin/server/tools"}:{title:s.Locale.getSection("admin.controllers.navigation.index").lmsg("reseller-tools"),href:"/admin/home/reseller"},{title:s.Locale.getSection("admin.controllers.settings-ui.branding").lmsg("title"),href:"/cp/settings-ui/branding"}],helpContext:"ADMIN"===e?"logo":"reseller.logo"})))},2354:e=>{var n={kind:"Document",definitions:[{kind:"OperationDefinition",operation:"mutation",name:{kind:"Name",value:"EditBranding"},variableDefinitions:[{kind:"VariableDefinition",variable:{kind:"Variable",name:{kind:"Name",value:"input"}},type:{kind:"NonNullType",type:{kind:"NamedType",name:{kind:"Name",value:"EditBrandingInput"}}},directives:[]}],directives:[],selectionSet:{kind:"SelectionSet",selections:[{kind:"Field",name:{kind:"Name",value:"editBranding"},arguments:[{kind:"Argument",name:{kind:"Name",value:"input"},value:{kind:"Variable",name:{kind:"Name",value:"input"}}}],directives:[],selectionSet:{kind:"SelectionSet",selections:[{kind:"Field",name:{kind:"Name",value:"query"},arguments:[],directives:[],selectionSet:{kind:"SelectionSet",selections:[{kind:"Field",name:{kind:"Name",value:"viewer"},arguments:[],directives:[],selectionSet:{kind:"SelectionSet",selections:[{kind:"Field",name:{kind:"Name",value:"login"},arguments:[],directives:[]},{kind:"Field",name:{kind:"Name",value:"customTitle"},arguments:[],directives:[]},{kind:"Field",name:{kind:"Name",value:"logo"},arguments:[],directives:[],selectionSet:{kind:"SelectionSet",selections:[{kind:"Field",name:{kind:"Name",value:"isCustom"},arguments:[],directives:[]},{kind:"Field",name:{kind:"Name",value:"image"},arguments:[],directives:[]},{kind:"Field",name:{kind:"Name",value:"imageAlt"},arguments:[],directives:[]},{kind:"Field",name:{kind:"Name",value:"url"},arguments:[],directives:[]},{kind:"Field",name:{kind:"Name",value:"edition"},arguments:[],directives:[]}]}},{kind:"Field",name:{kind:"Name",value:"branding"},arguments:[],directives:[],selectionSet:{kind:"SelectionSet",selections:[{kind:"Field",name:{kind:"Name",value:"customTitle"},arguments:[],directives:[]},{kind:"Field",name:{kind:"Name",value:"logo"},arguments:[],directives:[],selectionSet:{kind:"SelectionSet",selections:[{kind:"Field",name:{kind:"Name",value:"url"},arguments:[],directives:[]},{kind:"Field",name:{kind:"Name",value:"fake"},arguments:[],directives:[]}]}},{kind:"Field",name:{kind:"Name",value:"customFavicon"},arguments:[],directives:[]},{kind:"Field",name:{kind:"Name",value:"background"},arguments:[],directives:[],selectionSet:{kind:"SelectionSet",selections:[{kind:"Field",name:{kind:"Name",value:"file"},arguments:[],directives:[]},{kind:"Field",name:{kind:"Name",value:"color"},arguments:[],directives:[]},{kind:"Field",name:{kind:"Name",value:"fit"},arguments:[],directives:[]}]}}]}}]}}]}},{kind:"Field",name:{kind:"Name",value:"warnings"},arguments:[],directives:[]}]}}]}}],loc:{start:0,end:758}};n.loc.source={body:"mutation EditBranding($input: EditBrandingInput!) {\n editBranding(input: $input) {\n query {\n viewer {\n login\n customTitle\n logo {\n isCustom\n image\n imageAlt\n url\n edition\n }\n branding {\n customTitle\n logo {\n url\n fake\n }\n customFavicon\n background {\n file\n color\n fit\n }\n }\n }\n }\n warnings\n }\n}\n",name:"GraphQL request",locationOffset:{line:1,column:1}};function i(e,n){if("FragmentSpread"===e.kind)n.add(e.name.value);else if("VariableDefinition"===e.kind){var t=e.type;"NamedType"===t.kind&&n.add(t.name.value)}e.selectionSet&&e.selectionSet.selections.forEach((function(e){i(e,n)})),e.variableDefinitions&&e.variableDefinitions.forEach((function(e){i(e,n)})),e.definitions&&e.definitions.forEach((function(e){i(e,n)}))}var t={};function a(e,n){for(var i=0;i<e.definitions.length;i++){var t=e.definitions[i];if(t.name&&t.name.value==n)return t}}n.definitions.forEach((function(e){if(e.name){var n=new Set;i(e,n),t[e.name.value]=n}})),e.exports=n,e.exports.EditBranding=function(e,n){var i={kind:e.kind,definitions:[a(e,n)]};e.hasOwnProperty("loc")&&(i.loc=e.loc);var l=t[n]||new Set,o=new Set,s=new Set;for(l.forEach((function(e){s.add(e)}));s.size>0;){var d=s;s=new Set,d.forEach((function(e){o.has(e)||(o.add(e),(t[e]||new Set).forEach((function(e){s.add(e)})))}))}return o.forEach((function(n){var t=a(e,n);t&&i.definitions.push(t)})),i}(n,"EditBranding")},2353:(e,n,i)=>{"use strict";i.r(n)}}]); //# sourceMappingURL=BrandingPage.js.map?05ddd5d2270fb229d53d