From d49a24b507893f3eda7e0a92f6ce6853e879f0aa Mon Sep 17 00:00:00 2001 From: tblivet Date: Mon, 12 Aug 2024 17:59:34 +0200 Subject: [PATCH] feat: dev components --- css/styles.css | 2 +- css/styles.css.map | 2 +- img/check.svg | 1 + img/close.svg | 1 + img/unfold_more.svg | 1 + img/warning.svg | 1 + scss/_mixins.scss | 9 + scss/components/_alert.scss | 9 + scss/components/_badge.scss | 11 +- scss/components/_check-requirements.scss | 87 ++++++ scss/components/_index.scss | 7 +- scss/components/_radio-block.scss | 116 ------- scss/components/_radio-card.scss | 146 +++++++++ scss/components/_typography.scss | 56 ++++ scss/components/form/_form.scss | 30 ++ scss/components/form/_index.scss | 2 + scss/components/{ => form}/_radio.scss | 2 +- scss/styles.scss | 3 + storybook/.storybook/main.ts | 7 +- .../components/CheckRequirements.stories.js | 46 +++ .../components/LocalArchive.stories.js | 50 +++ ...oBlock.stories.js => RadioCard.stories.js} | 13 +- .../components/check-requirements.html.twig | 292 ++++++++++++++++++ .../components/local-archive.html.twig | 45 +++ .../components/radio-block.html.twig | 27 -- .../templates/components/radio-card.html.twig | 45 +++ 26 files changed, 847 insertions(+), 164 deletions(-) create mode 100644 img/check.svg create mode 100644 img/close.svg create mode 100644 img/unfold_more.svg create mode 100644 img/warning.svg create mode 100644 scss/_mixins.scss create mode 100644 scss/components/_alert.scss create mode 100644 scss/components/_check-requirements.scss delete mode 100644 scss/components/_radio-block.scss create mode 100644 scss/components/_radio-card.scss create mode 100644 scss/components/_typography.scss create mode 100644 scss/components/form/_form.scss create mode 100644 scss/components/form/_index.scss rename scss/components/{ => form}/_radio.scss (96%) create mode 100644 storybook/stories/components/CheckRequirements.stories.js create mode 100644 storybook/stories/components/LocalArchive.stories.js rename storybook/stories/components/{RadioBlock.stories.js => RadioCard.stories.js} (74%) create mode 100644 views/templates/components/check-requirements.html.twig create mode 100644 views/templates/components/local-archive.html.twig delete mode 100644 views/templates/components/radio-block.html.twig create mode 100644 views/templates/components/radio-card.html.twig diff --git a/css/styles.css b/css/styles.css index 4264526155..6061274600 100644 --- a/css/styles.css +++ b/css/styles.css @@ -1 +1 @@ -#update_assistant .badge{--ua-badge-color: #1D1D1B;--ua-badge-background-color: #D1DCFC;all:unset;color:var(--ua-badge-color);background-color:var(--ua-badge-background-color);font-size:.875rem;font-weight:500;line-height:1.4;border-radius:2rem;padding:.125rem .5rem}#update_assistant .radio{--ua-radio-border-color: #1D1D1B;--ua-radio-background-color-checked: #1D1D1B;--ua-radio-border-color-checked: #1D1D1B;--ua-radio-border-color-disabled: #BBBBBB;position:relative;margin:0;padding:0;width:20px;height:20px;background:rgba(0,0,0,0);background-clip:content-box;border:2px solid var(--ua-radio-border-color);border-radius:50%;outline:none !important;line-height:0;-webkit-appearance:none;cursor:pointer}#update_assistant .radio:checked{padding:3px;background-color:var(--ua-radio-background-color-checked);border:2px solid var(--ua-radio-border-color-checked)}#update_assistant .radio:disabled{border-color:var(--ua-radio-border-color-disabled)}#update_assistant .radio-block{--ua-radio-block-title-color: #1D1D1B;--ua-radio-block-title-color-disabled: #BBBBBB;--ua-radio-block-message-color: #5E5E5E;--ua-radio-block-message-color-disabled: #BBBBBB;--ua-radio-block-border-radius: 0;--ua-radio-block-border-color: #DDDDDD;--ua-radio-block-border-color-hover: #1D1D1B;--ua-radio-block-border-color-active: var(--ua-radio-block-border-color-hover);--ua-radio-block-release-color: #1D1D1B;--ua-radio-block-release-border-color: #DDDDDD;--ua-radio-block-badge-color: #1D1D1B;--ua-radio-block-badge-background-color: #D1DCFC;all:unset;display:flex;gap:.5rem;padding:1rem;border:1px solid var(--ua-radio-block-border-color);border-radius:var(--ua-radio-block-border-radius);background-color:#fff;transition:border-color .15s}#update_assistant .radio-block:not(.radio-block--disabled):hover{border-color:var(--ua-radio-block-border-color-hover);cursor:pointer}#update_assistant .radio-block:has(input[type=radio]:checked){border-color:var(--ua-radio-block-border-color-active)}#update_assistant .radio-block__radio-wrapper{flex-shrink:0}#update_assistant .radio-block__infos-wrapper{flex-grow:1}#update_assistant .radio-block__infos-top{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;justify-content:space-between}#update_assistant .radio-block__title{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-size:.875rem;font-weight:700;color:var(--ua-radio-block-title-color);line-height:1.4;margin-block:0}#update_assistant .radio-block__badge{flex-shrink:0;color:var(--ua-radio-block-badge-color);background-color:var(--ua-radio-block-badge-background-color);font-size:.875rem;font-weight:500;line-height:1.4;border-radius:2rem;padding:.125rem .5rem}#update_assistant .radio-block__message{font-size:.875rem;margin-block:.5rem 0;color:var(--ua-radio-block-message-color)}#update_assistant .radio-block__release-note{display:inline-flex;justify-content:flex-end;gap:.25rem;align-items:center;font-size:.875rem;line-height:1.4;color:var(--ua-radio-block-release-color);border-bottom:1px solid var(--ua-radio-block-release-border-color);text-decoration:none}#update_assistant .radio-block__release-note:hover{text-decoration:none}#update_assistant .radio-block__release-note i{font-size:.875rem}#update_assistant .radio-block--disabled{cursor:not-allowed}#update_assistant .radio-block--disabled .radio-block__title{color:var(--ua-radio-block-title-color-disabled)}#update_assistant .radio-block--disabled .radio-block__message{color:var(--ua-radio-block-message-color-disabled)}.upgradestep{margin-right:5px;padding-left:10px;padding-right:5px}.processing{border:2px outset gray;margin-top:1px;overflow:auto}#infoStep{height:100px}#infoError{height:100px}#quickInfo{height:200px}#errorDuringUpgrade{color:#c00}#checkPrestaShopFilesVersion,#checkPrestaShopModifiedFiles{margin-bottom:20px}.changedFileList{margin-left:20px;padding-left:5px}.changedNotice li{color:gray}.changedImportant li{color:red;font-weight:bold}.upgradeDbError{background-color:#feefb3}.upgradeDbOk{background-color:#dff2bf}.small_label{font-weight:normal;width:300px;float:none;text-align:left;padding:0}.ocu-feature-list{margin:0;padding:0;list-style:none}.ocu-feature-list li{background:url(../img/admin/enabled.gif) no-repeat;padding-left:20px;margin:0}.label-small{width:130px}.margin-form-small{padding:0 0 1em 130px}.nextStep{font-weight:bold}#diffList,#changedList{margin-top:20px}#autoupgradePhpWarningMainIcon{font-size:3em}#autoupgradePhpWarn .icon-stack-text{color:#fff}.panel-heading{text-transform:uppercase}.required{color:#c00}/*# sourceMappingURL=styles.css.map */ +#update_assistant .alert{margin-block-end:0}@keyframes rotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}#update_assistant .check-requirements{--ua-requirements-background-color: #f7f7f7;--ua-requirements-loader-color: #1d1d1b;--ua-requirements-loader-dot-color: #5C92AA;background-color:var(--ua-requirements-background-color);padding:1rem;margin-block-start:.5rem}#update_assistant .check-requirements__loader{position:relative;text-align:center;width:1.625rem;height:1.625rem;margin-inline:auto;margin-block-end:1rem;background:linear-gradient(var(--ua-requirements-background-color), var(--ua-requirements-background-color)) padding-box,conic-gradient(from 0, transparent, #78c4d8) border-box;border-radius:50em;border:.1875rem solid rgba(0,0,0,0);animation:rotate 1.5s linear infinite}#update_assistant .check-requirements__loader:before{content:"";display:block;width:.1875rem;height:.1875rem;background:#5c92aa;position:absolute;left:50%;top:0;transform:translate(-50%, -100%);border-radius:50%}#update_assistant .check-requirements__loader-title{text-align:center;font-size:.875rem;line-height:1.4;font-weight:700;color:var(--ua-requirements-loader-color)}#update_assistant .check-requirements__message{margin-block-end:1rem}#update_assistant .check-requirements__list{margin-block-end:1rem;display:flex;flex-direction:column;gap:.5rem}#update_assistant .check-requirements__requirement{font-size:.875rem;line-height:1.4;padding-inline-start:2rem;background-size:1.5rem 1.5rem;background-position:left center;background-repeat:no-repeat}#update_assistant .check-requirements__requirement--nok{background-image:url("../img/close.svg")}#update_assistant .check-requirements__requirement--warning{background-image:url("../img/warning.svg")}#update_assistant .check-requirements__requirement--ok{background-image:url("../img/check.svg")}#update_assistant .require-star{--ua-required-color: #ba151a;color:var(--ua-required-color)}#update_assistant .form-group{margin-block-end:.5rem}#update_assistant label{font-size:.875rem;font-weight:500;line-height:1.4;margin-block-end:.25rem}#update_assistant select{appearance:none;background-image:url("../img/unfold_more.svg");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.125rem 1.125rem;padding-inline-end:2rem}#update_assistant .radio{--ua-radio-border-color: #1D1D1B;--ua-radio-background-color-checked: #1D1D1B;--ua-radio-border-color-checked: #1D1D1B;--ua-radio-border-color-disabled: #BBBBBB;position:relative;margin:0;padding:0;width:20px;height:20px;background:rgba(0,0,0,0);background-clip:content-box;border:2px solid var(--ua-radio-border-color);border-radius:50%;outline:none !important;line-height:0;-webkit-appearance:none;cursor:pointer}#update_assistant .radio:checked{padding:3px;background-color:var(--ua-radio-background-color-checked);border:2px solid var(--ua-radio-border-color-checked)}#update_assistant .radio:disabled{border-color:var(--ua-radio-border-color-disabled)}#update_assistant .radio-card{--ua-radio-card-title-color: #1D1D1B;--ua-radio-card-title-color-disabled: #BBBBBB;--ua-radio-card-message-color: #5E5E5E;--ua-radio-card-message-color-disabled: #BBBBBB;--ua-radio-card-disabled-message-color: #FFFFFF;--ua-radio-card-disabled-message-background-color: #1D1D1B;--ua-radio-card-border-radius: 0;--ua-radio-card-border-color: #DDDDDD;--ua-radio-card-border-color-hover: #1D1D1B;--ua-radio-card-border-color-active: var(--ua-radio-card-border-color-hover);--ua-radio-card-release-color: #1D1D1B;--ua-radio-card-release-border-color: #DDDDDD;--ua-radio-card-badge-color: #1D1D1B;--ua-radio-card-badge-background-color: #D1DCFC;all:unset;display:flex;gap:.5rem;padding:1rem;background-color:#fff;border:1px solid var(--ua-radio-card-border-color);border-radius:var(--ua-radio-card-border-radius);transition:border-color .15s}#update_assistant .radio-card:not(.radio-card--disabled):hover{border-color:var(--ua-radio-card-border-color-hover);cursor:pointer}#update_assistant .radio-card:has(input[type=radio]:checked){border-color:var(--ua-radio-card-border-color-active)}#update_assistant .radio-card__radio-wrapper{flex-shrink:0}#update_assistant .radio-card__infos-wrapper{flex-grow:1}#update_assistant .radio-card__infos-top{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;justify-content:space-between}#update_assistant .radio-card__title{display:inline-flex;flex-wrap:wrap;gap:.5rem;align-items:center;font-size:.875rem;font-weight:700;color:var(--ua-radio-card-title-color);line-height:1.4;margin-block:0}#update_assistant .radio-card__badge{flex-shrink:0;padding:.125rem .5rem;background-color:var(--ua-radio-card-badge-background-color);border-radius:2rem;font-size:.875rem;font-weight:500;color:var(--ua-radio-card-badge-color);line-height:1.4}#update_assistant .radio-card__message{font-size:.875rem;margin-block:.5rem 0;color:var(--ua-radio-card-message-color)}#update_assistant .radio-card__release-note{display:inline-flex;gap:.25rem;align-items:center;justify-content:flex-end;font-size:.875rem;color:var(--ua-radio-card-release-color);line-height:1.4;text-decoration:none;border-bottom:1px solid var(--ua-radio-card-release-border-color)}#update_assistant .radio-card__release-note:hover{text-decoration:none}#update_assistant .radio-card__release-note i{font-size:.875rem}#update_assistant .radio-card__disabled-message{display:none;position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);padding:.5rem .75rem;font-size:.875rem;line-height:1.4em;color:var(--ua-radio-card-disabled-message-color);background-color:var(--ua-radio-card-disabled-message-background-color)}#update_assistant .radio-card__local-archive{padding-block-start:.5rem}#update_assistant .radio-card--disabled{cursor:not-allowed;position:relative}#update_assistant .radio-card--disabled .radio-card__title{color:var(--ua-radio-card-title-color-disabled)}#update_assistant .radio-card--disabled .radio-card__message{color:var(--ua-radio-card-message-color-disabled)}#update_assistant .radio-card--disabled .radio-card__badge,#update_assistant .radio-card--disabled .radio-card__release-note{opacity:.4;pointer-events:none}#update_assistant .radio-card--disabled .radio-card__disabled-message{display:block}#update_assistant{--ua-typography-color: #1d1d1b;--ua-link-color: #1d1d1b;--ua-link-hover-color: #1d1d1b}#update_assistant h1,#update_assistant h2,#update_assistant h3,#update_assistant h4,#update_assistant h5,#update_assistant h6,#update_assistant .h1,#update_assistant .h2,#update_assistant .h3,#update_assistant .h4,#update_assistant .h5,#update_assistant .h6{color:var(--ua-typography-color)}#update_assistant .h1{margin-block:0 1.5rem;font-weight:600;font-size:1.5rem}#update_assistant .h2{margin-block:0 1rem;font-weight:600;font-size:1.25rem}#update_assistant .h3{margin-block:0 .5rem;font-size:1.125rem;font-weight:600}#update_assistant p{font-size:.875rem}#update_assistant a{color:var(--ua-link-color);text-decoration:underline;text-underline-offset:.125rem;transition:text-underline-offset .15s}#update_assistant a:hover{color:var(--ua-link-hover-color);text-underline-offset:.25rem}*{box-sizing:border-box}.upgradestep{margin-right:5px;padding-left:10px;padding-right:5px}.processing{border:2px outset gray;margin-top:1px;overflow:auto}#infoStep{height:100px}#infoError{height:100px}#quickInfo{height:200px}#errorDuringUpgrade{color:#c00}#checkPrestaShopFilesVersion,#checkPrestaShopModifiedFiles{margin-bottom:20px}.changedFileList{margin-left:20px;padding-left:5px}.changedNotice li{color:gray}.changedImportant li{color:red;font-weight:bold}.upgradeDbError{background-color:#feefb3}.upgradeDbOk{background-color:#dff2bf}.small_label{font-weight:normal;width:300px;float:none;text-align:left;padding:0}.ocu-feature-list{margin:0;padding:0;list-style:none}.ocu-feature-list li{background:url(../img/admin/enabled.gif) no-repeat;padding-left:20px;margin:0}.label-small{width:130px}.margin-form-small{padding:0 0 1em 130px}.nextStep{font-weight:bold}#diffList,#changedList{margin-top:20px}#autoupgradePhpWarningMainIcon{font-size:3em}#autoupgradePhpWarn .icon-stack-text{color:#fff}.panel-heading{text-transform:uppercase}.required{color:#c00}/*# sourceMappingURL=styles.css.map */ diff --git a/css/styles.css.map b/css/styles.css.map index efb7beba8c..f5df05bd23 100644 --- a/css/styles.css.map +++ b/css/styles.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../scss/components/_badge.scss","../scss/components/_radio.scss","../scss/components/_radio-block.scss","../scss/styles.scss"],"names":[],"mappings":"AAKE,yBACE,0BACA,qCACA,UACA,4BACA,kDACA,kBACA,gBACA,gBACA,mBACA,sBCVF,yBACE,iCACA,6CACA,yCACA,0CACA,kBACA,SACA,UACA,WACA,YACA,yBACA,4BACA,8CACA,kBAEA,wBACA,cACA,wBACA,eAEA,iCACE,YACA,0DACA,sDAGF,kCACE,mDC3BJ,+BACE,sCACA,+CACA,wCACA,iDACA,kCACA,uCACA,6CACA,+EACA,wCACA,+CACA,sCACA,iDAEA,UACA,aACA,UACA,aACA,oDACA,kDACA,sBACA,6BAGE,iEACE,sDACA,eAIJ,8DACE,uDAGF,8CACE,cAGF,8CACE,YAGF,0CACE,aACA,mBACA,eACA,UACA,8BAGF,sCACE,oBACA,eACA,mBACA,UACA,kBACA,gBACA,wCACA,gBACA,eAGF,sCACE,cACA,wCACA,8DACA,kBACA,gBACA,gBACA,mBACA,sBAGF,wCACE,kBACA,qBACA,0CAGF,6CACE,oBACA,yBACA,WACA,mBACA,kBACA,gBACA,0CACA,mEACA,qBAEA,mDACE,qBAGF,+CACE,kBAIJ,yCACE,mBAEA,6DACE,iDAGF,+DACE,mDC9GR,kEACA,gEACA,uBACA,wBACA,wBACA,+BACA,8EACA,mDACA,6BACA,gDACA,yCACA,sCACA,iFACA,qDACA,mGACA,yBACA,yCACA,2BACA,uCACA,6CACA,gDACA,wCACA","file":"styles.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../scss/components/_alert.scss","../scss/_mixins.scss","../scss/components/_check-requirements.scss","../scss/components/form/_form.scss","../scss/components/form/_radio.scss","../scss/components/_radio-card.scss","../scss/components/_typography.scss","../scss/styles.scss"],"names":[],"mappings":"AAKE,yBACE,mBCLJ,kBACE,KACE,uBAEF,GACE,gECCA,4CACA,wCACA,4CACA,yDACA,aACA,yBAEA,8CACE,kBACA,kBACA,eACA,gBACA,mBACA,sBACA,WACE,sKAMF,mBACA,oCACA,sCAEA,qDACE,WACA,cACA,eACA,gBACA,mBACA,kBACA,SACA,MACA,iCACA,kBAIJ,oDACE,kBACA,kBACA,gBACA,gBACA,0CAGF,+CACE,sBAGF,4CACE,sBACA,aACA,sBACA,UAGF,mDACE,kBACA,gBACA,0BACA,8BACA,gCACA,4BAEA,wDACE,yCAGF,4DACE,2CAGF,uDACE,yCC/EN,gCACE,6BACA,+BAIA,8BACE,uBAIJ,wBACE,kBACA,gBACA,gBACA,wBAGF,yBACE,gBACA,+CACA,uCACA,4BACA,kCACA,wBCtBF,yBACE,iCACA,6CACA,yCACA,0CACA,kBACA,SACA,UACA,WACA,YACA,yBACA,4BACA,8CACA,kBAEA,wBACA,cACA,wBACA,eAEA,iCACE,YACA,0DACA,sDAGF,kCACE,mDC3BJ,8BACE,qCACA,8CACA,uCACA,gDACA,gDACA,2DACA,iCACA,sCACA,4CACA,6EACA,uCACA,8CACA,qCACA,gDACA,UACA,aACA,UACA,aACA,sBACA,mDACA,iDACA,6BAGE,+DACE,qDACA,eAIJ,6DACE,sDAGF,6CACE,cAGF,6CACE,YAGF,yCACE,aACA,eACA,UACA,mBACA,8BAGF,qCACE,oBACA,eACA,UACA,mBACA,kBACA,gBACA,uCACA,gBACA,eAGF,qCACE,cACA,sBACA,6DACA,mBACA,kBACA,gBACA,uCACA,gBAGF,uCACE,kBACA,qBACA,yCAGF,4CACE,oBACA,WACA,mBACA,yBACA,kBACA,yCACA,gBACA,qBACA,kEAEA,kDACE,qBAGF,8CACE,kBAIJ,gDACE,aACA,kBACA,SACA,QACA,gCACA,qBACA,kBACA,kBACA,kDACA,wEAGF,6CACE,0BAGF,wCACE,mBACA,kBAEA,2DACE,gDAGF,6DACE,kDAGF,6HAEE,WACA,oBAGF,sEACE,cC3IR,kBACE,+BACA,yBACA,+BAEA,kQAYE,iCAGF,sBACE,sBACA,gBACA,iBAGF,sBACE,oBACA,gBACA,kBAGF,sBACE,qBACA,mBACA,gBAGF,oBACE,kBAGF,oBACE,2BACA,0BACA,8BACA,sCAEA,0BACE,iCACA,6BClDN,EACE,sBAEF,kEACA,gEACA,uBACA,wBACA,wBACA,+BACA,8EACA,mDACA,6BACA,gDACA,yCACA,sCACA,iFACA,qDACA,mGACA,yBACA,yCACA,2BACA,uCACA,6CACA,gDACA,wCACA","file":"styles.css"} \ No newline at end of file diff --git a/img/check.svg b/img/check.svg new file mode 100644 index 0000000000..979b91f553 --- /dev/null +++ b/img/check.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/img/close.svg b/img/close.svg new file mode 100644 index 0000000000..5b821afb8e --- /dev/null +++ b/img/close.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/img/unfold_more.svg b/img/unfold_more.svg new file mode 100644 index 0000000000..23a5fc9692 --- /dev/null +++ b/img/unfold_more.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/img/warning.svg b/img/warning.svg new file mode 100644 index 0000000000..ac6dffafe7 --- /dev/null +++ b/img/warning.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/scss/_mixins.scss b/scss/_mixins.scss new file mode 100644 index 0000000000..9b51f330ba --- /dev/null +++ b/scss/_mixins.scss @@ -0,0 +1,9 @@ +/* Animations */ +@keyframes rotate { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} \ No newline at end of file diff --git a/scss/components/_alert.scss b/scss/components/_alert.scss new file mode 100644 index 0000000000..9e2cc576af --- /dev/null +++ b/scss/components/_alert.scss @@ -0,0 +1,9 @@ +@use "../variables" as *; + +$e: ".alert"; + +#{$ua-prefix} { + #{$e} { + margin-block-end: 0; + } +} \ No newline at end of file diff --git a/scss/components/_badge.scss b/scss/components/_badge.scss index d5f094d5ca..6e2b8ea9c8 100644 --- a/scss/components/_badge.scss +++ b/scss/components/_badge.scss @@ -4,15 +4,6 @@ $e: ".badge"; #{$ua-prefix} { #{$e} { - --ua-badge-color: #1D1D1B; - --ua-badge-background-color: #D1DCFC; - all: unset; - padding: 0.125rem 0.5rem; - background-color: var(--ua-badge-background-color); - border-radius: 2rem; - font-size: 0.875rem; - font-weight: 500; - color: var(--ua-badge-color); - line-height: 1.4; + } } \ No newline at end of file diff --git a/scss/components/_check-requirements.scss b/scss/components/_check-requirements.scss new file mode 100644 index 0000000000..929b9dae5e --- /dev/null +++ b/scss/components/_check-requirements.scss @@ -0,0 +1,87 @@ +@use "../mixins" as *; +@use "../variables" as *; + +$e: ".check-requirements"; + +#{$ua-prefix} { + #{$e} { + --ua-requirements-background-color: #f7f7f7; + --ua-requirements-loader-color: #1d1d1b; + --ua-requirements-loader-dot-color: #5C92AA; + background-color: var(--ua-requirements-background-color); + padding: 1rem; + margin-block-start: 0.5rem; + + &__loader { + position: relative; + text-align: center; + width: 1.625rem; + height: 1.625rem; + margin-inline: auto; + margin-block-end: 1rem; + background: + linear-gradient( + var(--ua-requirements-background-color), + var(--ua-requirements-background-color) + ) + padding-box, + conic-gradient(from 0, transparent, #78c4d8) border-box; + border-radius: 50em; + border: 0.1875rem solid transparent; + animation: rotate 1.5s linear infinite; + + &:before { + content: ""; + display: block; + width: 0.1875rem; + height: 0.1875rem; + background: #5C92AA; + position: absolute; + left: 50%; + top: 0; + transform: translate(-50%, -100%); + border-radius: 50%; + } + } + + &__loader-title { + text-align: center; + font-size: 0.875rem; + line-height: 1.4; + font-weight: 700; + color: var(--ua-requirements-loader-color); + } + + &__message { + margin-block-end: 1rem; + } + + &__list { + margin-block-end: 1rem; + display: flex; + flex-direction: column; + gap: 0.5rem; + } + + &__requirement { + font-size: 0.875rem; + line-height: 1.4; + padding-inline-start: 2rem; + background-size: 1.5rem 1.5rem; + background-position: left center; + background-repeat: no-repeat; + + &--nok { + background-image: url("../img/close.svg"); + } + + &--warning { + background-image: url("../img/warning.svg"); + } + + &--ok { + background-image: url("../img/check.svg"); + } + } + } +} diff --git a/scss/components/_index.scss b/scss/components/_index.scss index 5489a10b31..fb157f7523 100644 --- a/scss/components/_index.scss +++ b/scss/components/_index.scss @@ -1,3 +1,6 @@ +@use "alert"; @use "badge"; -@use "radio"; -@use "radio-block"; \ No newline at end of file +@use "check-requirements"; +@use "form"; +@use "radio-card"; +@use "typography"; \ No newline at end of file diff --git a/scss/components/_radio-block.scss b/scss/components/_radio-block.scss deleted file mode 100644 index f623d993bb..0000000000 --- a/scss/components/_radio-block.scss +++ /dev/null @@ -1,116 +0,0 @@ -@use "../variables" as *; - -$e: ".radio-block"; - -#{$ua-prefix} { - .radio-block { - --ua-radio-block-title-color: #1D1D1B; - --ua-radio-block-title-color-disabled: #BBBBBB; - --ua-radio-block-message-color: #5E5E5E; - --ua-radio-block-message-color-disabled: #BBBBBB; - --ua-radio-block-border-radius: 0; - --ua-radio-block-border-color: #DDDDDD; - --ua-radio-block-border-color-hover: #1D1D1B; - --ua-radio-block-border-color-active: var(--ua-radio-block-border-color-hover); - --ua-radio-block-release-color: #1D1D1B; - --ua-radio-block-release-border-color: #DDDDDD; - --ua-radio-block-badge-color: #1D1D1B; - --ua-radio-block-badge-background-color: #D1DCFC; - all: unset; - display: flex; - gap: 0.5rem; - padding: 1rem; - background-color: #FFFFFF; - border: 1px solid var(--ua-radio-block-border-color); - border-radius: var(--ua-radio-block-border-radius); - transition: border-color 0.15s; - - &:not(#{$e}--disabled) { - &:hover { - border-color: var(--ua-radio-block-border-color-hover); - cursor: pointer; - } - } - - &:has(input[type="radio"]:checked) { - border-color: var(--ua-radio-block-border-color-active); - } - - &__radio-wrapper { - flex-shrink: 0; - } - - &__infos-wrapper { - flex-grow: 1; - } - - &__infos-top { - display: flex; - flex-wrap: wrap; - gap: 0.5rem; - align-items: center; - justify-content: space-between; - } - - &__title { - display: inline-flex; - flex-wrap: wrap; - gap: 0.5rem; - align-items: center; - font-size: 0.875rem; - font-weight: 700; - color: var(--ua-radio-block-title-color); - line-height: 1.4; - margin-block: 0; - } - - &__badge { - flex-shrink: 0; - padding: 0.125rem 0.5rem; - background-color: var(--ua-radio-block-badge-background-color); - border-radius: 2rem; - font-size: 0.875rem; - font-weight: 500; - color: var(--ua-radio-block-badge-color); - line-height: 1.4; - } - - &__message { - font-size: 0.875rem; - margin-block: 0.5rem 0; - color: var(--ua-radio-block-message-color); - } - - &__release-note { - display: inline-flex; - gap: 0.25rem; - align-items: center; - justify-content: flex-end; - font-size: 0.875rem; - color: var(--ua-radio-block-release-color); - line-height: 1.4; - text-decoration: none; - border-bottom: 1px solid var(--ua-radio-block-release-border-color); - - &:hover { - text-decoration: none; - } - - i { - font-size: 0.875rem; - } - } - - &--disabled { - cursor: not-allowed; - - #{$e}__title { - color: var(--ua-radio-block-title-color-disabled); - } - - #{$e}__message { - color: var(--ua-radio-block-message-color-disabled); - } - } - } -} diff --git a/scss/components/_radio-card.scss b/scss/components/_radio-card.scss new file mode 100644 index 0000000000..c2a6d10a92 --- /dev/null +++ b/scss/components/_radio-card.scss @@ -0,0 +1,146 @@ +@use "../variables" as *; + +$e: ".radio-card"; + +#{$ua-prefix} { + #{$e} { + --ua-radio-card-title-color: #1D1D1B; + --ua-radio-card-title-color-disabled: #BBBBBB; + --ua-radio-card-message-color: #5E5E5E; + --ua-radio-card-message-color-disabled: #BBBBBB; + --ua-radio-card-disabled-message-color: #FFFFFF; + --ua-radio-card-disabled-message-background-color: #1D1D1B; + --ua-radio-card-border-radius: 0; + --ua-radio-card-border-color: #DDDDDD; + --ua-radio-card-border-color-hover: #1D1D1B; + --ua-radio-card-border-color-active: var(--ua-radio-card-border-color-hover); + --ua-radio-card-release-color: #1D1D1B; + --ua-radio-card-release-border-color: #DDDDDD; + --ua-radio-card-badge-color: #1D1D1B; + --ua-radio-card-badge-background-color: #D1DCFC; + all: unset; + display: flex; + gap: 0.5rem; + padding: 1rem; + background-color: #FFFFFF; + border: 1px solid var(--ua-radio-card-border-color); + border-radius: var(--ua-radio-card-border-radius); + transition: border-color 0.15s; + + &:not(#{$e}--disabled) { + &:hover { + border-color: var(--ua-radio-card-border-color-hover); + cursor: pointer; + } + } + + &:has(input[type="radio"]:checked) { + border-color: var(--ua-radio-card-border-color-active); + } + + &__radio-wrapper { + flex-shrink: 0; + } + + &__infos-wrapper { + flex-grow: 1; + } + + &__infos-top { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + align-items: center; + justify-content: space-between; + } + + &__title { + display: inline-flex; + flex-wrap: wrap; + gap: 0.5rem; + align-items: center; + font-size: 0.875rem; + font-weight: 700; + color: var(--ua-radio-card-title-color); + line-height: 1.4; + margin-block: 0; + } + + &__badge { + flex-shrink: 0; + padding: 0.125rem 0.5rem; + background-color: var(--ua-radio-card-badge-background-color); + border-radius: 2rem; + font-size: 0.875rem; + font-weight: 500; + color: var(--ua-radio-card-badge-color); + line-height: 1.4; + } + + &__message { + font-size: 0.875rem; + margin-block: 0.5rem 0; + color: var(--ua-radio-card-message-color); + } + + &__release-note { + display: inline-flex; + gap: 0.25rem; + align-items: center; + justify-content: flex-end; + font-size: 0.875rem; + color: var(--ua-radio-card-release-color); + line-height: 1.4; + text-decoration: none; + border-bottom: 1px solid var(--ua-radio-card-release-border-color); + + &:hover { + text-decoration: none; + } + + i { + font-size: 0.875rem; + } + } + + &__disabled-message { + display: none; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + padding: 0.5rem 0.75rem; + font-size: 0.875rem; + line-height: 1.4em; + color: var(--ua-radio-card-disabled-message-color); + background-color: var(--ua-radio-card-disabled-message-background-color); + } + + &__local-archive { + padding-block-start: 0.5rem; + } + + &--disabled { + cursor: not-allowed; + position: relative; + + #{$e}__title { + color: var(--ua-radio-card-title-color-disabled); + } + + #{$e}__message { + color: var(--ua-radio-card-message-color-disabled); + } + + #{$e}__badge, + #{$e}__release-note { + opacity: 0.4; + pointer-events: none; + } + + #{$e}__disabled-message { + display: block; + } + } + } +} diff --git a/scss/components/_typography.scss b/scss/components/_typography.scss new file mode 100644 index 0000000000..8104ed8fa9 --- /dev/null +++ b/scss/components/_typography.scss @@ -0,0 +1,56 @@ +@use "../variables" as *; + +#{$ua-prefix} { + --ua-typography-color: #1d1d1b; + --ua-link-color: #1d1d1b; + --ua-link-hover-color: #1d1d1b; + + h1, + h2, + h3, + h4, + h5, + h6, + .h1, + .h2, + .h3, + .h4, + .h5, + .h6 { + color: var(--ua-typography-color); + } + + .h1 { + margin-block: 0 1.5rem; + font-weight: 600; + font-size: 1.5rem; + } + + .h2 { + margin-block: 0 1rem; + font-weight: 600; + font-size: 1.25rem; + } + + .h3 { + margin-block: 0 0.5rem; + font-size: 1.125rem; + font-weight: 600; + } + + p { + font-size: 0.875rem; + } + + a { + color: var(--ua-link-color); + text-decoration: underline; + text-underline-offset: 0.125rem; + transition: text-underline-offset 0.15s; + + &:hover { + color: var(--ua-link-hover-color); + text-underline-offset: 0.25rem; + } + } +} diff --git a/scss/components/form/_form.scss b/scss/components/form/_form.scss new file mode 100644 index 0000000000..fc628284a9 --- /dev/null +++ b/scss/components/form/_form.scss @@ -0,0 +1,30 @@ +@use "../../variables" as *; + +#{$ua-prefix} { + .require-star { + --ua-required-color: #ba151a; + color: var(--ua-required-color); + } + + .form { + &-group { + margin-block-end: 0.5rem; + } + } + + label { + font-size: 0.875rem; + font-weight: 500; + line-height: 1.4; + margin-block-end: 0.25rem; + } + + select { + appearance: none; + background-image: url("../img/unfold_more.svg"); + background-position: right 0.5rem center; + background-repeat: no-repeat; + background-size: 1.125rem 1.125rem; + padding-inline-end: 2rem; + } +} diff --git a/scss/components/form/_index.scss b/scss/components/form/_index.scss new file mode 100644 index 0000000000..d1103c0ddb --- /dev/null +++ b/scss/components/form/_index.scss @@ -0,0 +1,2 @@ +@use "form"; +@use "radio"; \ No newline at end of file diff --git a/scss/components/_radio.scss b/scss/components/form/_radio.scss similarity index 96% rename from scss/components/_radio.scss rename to scss/components/form/_radio.scss index b2898f025b..c3dce51a5a 100644 --- a/scss/components/_radio.scss +++ b/scss/components/form/_radio.scss @@ -1,4 +1,4 @@ -@use "../variables" as *; +@use "../../variables" as *; $e: ".radio"; diff --git a/scss/styles.scss b/scss/styles.scss index 7985573c04..e7ef7f0af7 100644 --- a/scss/styles.scss +++ b/scss/styles.scss @@ -1,5 +1,8 @@ @use "components"; +* { + box-sizing: border-box; +} .upgradestep { margin-right: 5px;padding-left: 10px; padding-right: 5px;} .processing {border:2px outset gray;margin-top:1px;overflow: auto;} #infoStep {height:100px;} diff --git a/storybook/.storybook/main.ts b/storybook/.storybook/main.ts index a21c79f925..1e73962a7c 100644 --- a/storybook/.storybook/main.ts +++ b/storybook/.storybook/main.ts @@ -74,15 +74,16 @@ const config: StorybookConfig = { `, previewBody: (body) => ` - + ${body} `, staticDirs: [ "../public", - "../../css", - "../../js", "../node_modules/prestashop-bo-themes", + { from: "../../css", to: "css" }, + { from: "../../js", to: "js" }, + { from: "../../img", to: "img" }, ], }; export default config; diff --git a/storybook/stories/components/CheckRequirements.stories.js b/storybook/stories/components/CheckRequirements.stories.js new file mode 100644 index 0000000000..7f94895d0e --- /dev/null +++ b/storybook/stories/components/CheckRequirements.stories.js @@ -0,0 +1,46 @@ +/** + * Copyright since 2007 PrestaShop SA and Contributors + * PrestaShop is an International Registered Trademark & Property of PrestaShop SA + * + * NOTICE OF LICENSE + * + * This source file is subject to the Academic Free License 3.0 (AFL-3.0) + * that is bundled with this package in the file LICENSE.md. + * It is also available through the world-wide-web at this URL: + * https://opensource.org/licenses/AFL-3.0 + * If you did not receive a copy of the license and are unable to + * obtain it through the world-wide-web, please send an email + * to license@prestashop.com so we can send you a copy immediately. + * + * DISCLAIMER + * + * Do not edit or add to this file if you wish to upgrade PrestaShop to newer + * versions in the future. If you wish to customize PrestaShop for your + * needs please refer to https://devdocs.prestashop.com/ for more information. + * + * @author PrestaShop SA and Contributors + * @copyright Since 2007 PrestaShop SA and Contributors + * @license https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0) + */ + +import CheckRequirements from "../../../views/templates/components/check-requirements.html.twig"; + +export default { + component: CheckRequirements, + args: { + requirementsOk: true, + checkingForRequirements: true, + phpRequirementsState: 1, + phpCompatibilityRange: { + php_min_version: "7.2.5", + php_max_version: "8.1", + php_current_version: "7.4.33", + }, + rootDirectoryIsWritable: true, + rootDirectory: "/var/www/html", + adminDirectoryIsWritable: true, + adminDirectoryWritableReport: "a", + }, +}; + +export const Default = {}; diff --git a/storybook/stories/components/LocalArchive.stories.js b/storybook/stories/components/LocalArchive.stories.js new file mode 100644 index 0000000000..3be5182b2c --- /dev/null +++ b/storybook/stories/components/LocalArchive.stories.js @@ -0,0 +1,50 @@ +/** + * Copyright since 2007 PrestaShop SA and Contributors + * PrestaShop is an International Registered Trademark & Property of PrestaShop SA + * + * NOTICE OF LICENSE + * + * This source file is subject to the Academic Free License 3.0 (AFL-3.0) + * that is bundled with this package in the file LICENSE.md. + * It is also available through the world-wide-web at this URL: + * https://opensource.org/licenses/AFL-3.0 + * If you did not receive a copy of the license and are unable to + * obtain it through the world-wide-web, please send an email + * to license@prestashop.com so we can send you a copy immediately. + * + * DISCLAIMER + * + * Do not edit or add to this file if you wish to upgrade PrestaShop to newer + * versions in the future. If you wish to customize PrestaShop for your + * needs please refer to https://devdocs.prestashop.com/ for more information. + * + * @author PrestaShop SA and Contributors + * @copyright Since 2007 PrestaShop SA and Contributors + * @license https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0) + */ + +import LocalArchive from "../../../views/templates/components/local-archive.html.twig"; + +export default { + component: LocalArchive, + args: { + archiveFiles: [ + "backup1.zip", + "backup2.zip", + "backup3.zip" + ], + archiveFileName: "backup1.zip", + xmlFiles: [ + "xml1.xml", + "xml2.xml", + "xml2.xml" + ], + xmlFileName: "xml1.xml", + downloadPath: + "/var/www/html/admin128ejliho1ih29s5ahu/autoupgrade/download/", + unableToFindVersion: false, + xmlMismatch: false, + }, +}; + +export const Default = {}; diff --git a/storybook/stories/components/RadioBlock.stories.js b/storybook/stories/components/RadioCard.stories.js similarity index 74% rename from storybook/stories/components/RadioBlock.stories.js rename to storybook/stories/components/RadioCard.stories.js index d5821de596..777a10786f 100644 --- a/storybook/stories/components/RadioBlock.stories.js +++ b/storybook/stories/components/RadioCard.stories.js @@ -23,16 +23,23 @@ * @license https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0) */ -import RadioBlock from "../../../views/templates/components/radio-block.html.twig"; +import RadioCard from "../../../views/templates/components/radio-card.html.twig"; +import LocalArchive from "./LocalArchive.stories"; +import CheckRequirements from "./CheckRequirements.stories"; export default { - component: RadioBlock, + component: RadioCard, args: { title: "Update your store", message: "Update your store to benefit from the latest improvements, bug fixes and security patches.", disabled: false, + disabledMessage: "No backup file found on your store.", badge: "Major version", - releaseNote: "https://github.com/PrestaShop/autoupgrade" + releaseNote: "https://github.com/PrestaShop/autoupgrade", + archiveCard: false, + checkRequirements: false, + ...LocalArchive.args, + ...CheckRequirements.args, }, }; diff --git a/views/templates/components/check-requirements.html.twig b/views/templates/components/check-requirements.html.twig new file mode 100644 index 0000000000..410f18d427 --- /dev/null +++ b/views/templates/components/check-requirements.html.twig @@ -0,0 +1,292 @@ +{% if not requirementsOk %} +
+ {% if checkingForRequirements %} +
+
+
+ +
+ {{ "Checking requirements..."|trans({}) }} +
+
+ {% else %} +

+ {{ "Update requirements"|trans({}) }} +

+ +

+ {{ "Once all the following conditions are met, you can continue with the update."|trans({}) }} + {{ "Read more in the developer documentation."|trans({}) }} +

+ +
+ {% if phpRequirementsState != constant('PrestaShop\\Module\\AutoUpgrade\\UpgradeSelfCheck::PHP_REQUIREMENTS_VALID') %} +
+ {% if phpRequirementsState == constant('PrestaShop\\Module\\AutoUpgrade\\UpgradeSelfCheck::PHP_REQUIREMENTS_INVALID') %} + {{ 'Your current PHP version isn\'t compatible with your PrestaShop version. (Expected: %s - %s | Current: %s)'|trans([ + phpCompatibilityRange['php_min_version'], + phpCompatibilityRange['php_max_version'], + phpCompatibilityRange['php_current_version'], + ]) }} + {% else %} + {{ 'We were unable to check your PHP compatibility with the destination PrestaShop version.'|trans({}) }} + {% endif %} +
+ {% endif %} + + {% if not rootDirectoryIsWritable %} +
+ {{ 'Your store\'s root directory (%s) is writable (with appropriate CHMOD permissions).'|trans([rootDirectory]) }} +
+ {% endif %} + + {% if not adminDirectoryIsWritable %} +
+ {{ "The \"/admin/autoupgrade\" directory isn't writable. Provide write access to the user running PHP with appropriate permission & ownership."|trans({}) }} +
+ {% endif %} +
+ {% endif %} +
+{% endif %} + + +{#
+
+
+ {{ 'The pre-Upgrade checklist'|trans({}) }} +
+ {% if not moduleIsUpToDate %} +

+ {{ 'Your current version of the module is out of date. Update now'|trans({}) }} + {{ 'Modules > Module Manager > Updates'|trans({}) }} +

+ {% endif %} + {% if showErrorMessage %} +

{{ 'The checklist is not OK. You can only upgrade your shop once all indicators are green.'|trans({}) }}

+ {% endif %} +
+

{{ 'Before starting the upgrade process, please make sure this checklist is all green.'|trans({}) }}

+ + {% if phpRequirementsState != constant('PrestaShop\\Module\\AutoUpgrade\\UpgradeSelfCheck::PHP_REQUIREMENTS_VALID') %} + + + + + {% endif %} + + + + + {% if adminDirectoryWritableReport %} + + + + + {% endif %} + + + + + + + + + + + + + {% if not isLocalEnvironment %} + + + + + {% endif %} + + + + + + + + + {% if not checkApacheModRewrite %} + + + + + {% endif %} + {% if notLoadedPhpExtensions|length > 0 %} + + + + + {% endif %} + {% if not checkMemoryLimit %} + + + + + {% endif %} + {% if not checkFileUploads %} + + + + + {% endif %} + {% if notExistsPhpFunctions|length > 0 %} + + + + + {% endif %} + {% if not checkPhpSessions %} + + + + + {% endif %} + {% if not checkKeyGeneration %} + + + + + {% endif %} + {% if missingFiles|length > 0 %} + + + + + {% endif %} + {% if notWritingDirectories|length > 0 %} + + + + + {% endif %} + {% if not isShopVersionMatchingVersionInDatabase %} + + + + + {% endif %} +
+ {% if phpRequirementsState == constant('PrestaShop\\Module\\AutoUpgrade\\UpgradeSelfCheck::PHP_REQUIREMENTS_INVALID') %} + {{ 'Your current PHP version isn\'t compatible with your PrestaShop version. (Expected: %s - %s | Current: %s)'|trans([ + phpCompatibilityRange['php_min_version'], + phpCompatibilityRange['php_max_version'], + phpCompatibilityRange['php_current_version'], + ]) }} + {% else %} + {{ 'We were unable to check your PHP compatibility with the destination PrestaShop version.'|trans({}) }} + {% endif %} + + {% if phpRequirementsState == constant('PrestaShop\\Module\\AutoUpgrade\\UpgradeSelfCheck::PHP_REQUIREMENTS_INVALID') %} + {{ icons.nok(psBaseUri) }} + {% else %} + {{ icons.warning(psBaseUri) }} + {% endif %} +
{{ 'Your store\'s root directory (%s) is writable (with appropriate CHMOD permissions).'|trans([rootDirectory]) }} + {% if rootDirectoryIsWritable %} + {{ icons.ok(psBaseUri) }} + {% else %} + {{ icons.nok(psBaseUri) }} + {% endif %} +
{{ 'The "/admin/autoupgrade" directory is writable (appropriate CHMOD permissions)'|trans({}) }} + {% if adminDirectoryIsWritable %} + {{ icons.ok(psBaseUri) }} + {% else %} + {{ icons.nok(psBaseUri) }} {{ adminDirectoryWritableReport }} + {% endif %} +
{{ 'PHP\'s "Safe mode" option is turned off'|trans({})|raw }} + {% if safeModeIsDisabled %} + {{ icons.ok(psBaseUri) }} + {% else %} + {{ icons.warning(psBaseUri) }} + {% endif %} +
{{ 'PHP\'s "allow_url_fopen" option is turned on, or cURL is installed'|trans({})|raw }} + {% if allowUrlFopenOrCurlIsEnabled %} + {{ icons.ok(psBaseUri) }} + {% else %} + {{ icons.nok(psBaseUri) }} + {% endif %} +
{{ 'PHP\'s "zip" extension is enabled'|trans({})|raw }} + {% if zipIsEnabled %} + {{ icons.ok(psBaseUri) }} + {% else %} + {{ icons.nok(psBaseUri) }} + {% endif %} +
+ {% if storeIsInMaintenance %} + {{ 'Your store is in maintenance mode'|trans({}) }} + {% else %} + {{ 'Enable maintenance mode and add your maintenance IP in [1]Shop parameters > General > Maintenance[/1]'|trans({ + '[1]' : '', + '[/1]' : '', + })|raw }} + {% endif %} + + {% if storeIsInMaintenance %} + {{ icons.ok(psBaseUri) }} + {% else %} + {{ icons.nok(psBaseUri) }} + {% endif %} +
{{ 'PrestaShop\'s caching features are disabled'|trans({}) }} + {% if cachingIsDisabled %} + {{ icons.ok(psBaseUri) }} + {% else %} + {{ icons.nok(psBaseUri) }} + {% endif %} +
+ {% if maxExecutionTime == 0 %} + {{ 'PHP\'s max_execution_time setting has a high value or is disabled entirely (current value: unlimited)'|trans({}) }} + {% else %} + {{ 'PHP\'s max_execution_time setting has a high value or is disabled entirely (current value: %s seconds)'|trans([maxExecutionTime]) }} + {% endif %} + + {% if maxExecutionTime == 0 %} + {{ icons.ok(psBaseUri) }} + {% else %} + {{ icons.warning(psBaseUri) }} + {% endif %} +
{{ 'Apache mod_rewrite is disabled.'|trans({}) }}{{ icons.nok(psBaseUri) }}
+ {% if notLoadedPhpExtensions|length > 1 %} + {{ 'The following PHP extensions are not installed: %s.'|trans([notLoadedPhpExtensions|join(', ')]) }} + {% else %} + {{ 'The following PHP extension is not installed: %s.'|trans([notLoadedPhpExtensions|first]) }} + {% endif %} + {{ icons.nok(psBaseUri) }}
{{ 'PHP memory_limit is inferior to 256 MB.'|trans({}) }}{{ icons.nok(psBaseUri) }}
{{ 'PHP file_uploads configuration is disabled.'|trans({}) }}{{ icons.nok(psBaseUri) }}
+ {% if notExistsPhpFunctions|length > 1 %} + {{ 'The following PHP functions are not installed: %s.'|trans([notExistsPhpFunctions|join(', ')]) }} + {% else %} + {{ 'The following PHP function is not installed: %s.'|trans([notExistsPhpFunctions|first]) }} + {% endif %} + {{ icons.nok(psBaseUri) }}
{{ 'It\'s not possible to create a PHP session.'|trans({}) }}{{ icons.nok(psBaseUri) }}
{{ 'Unable to generate private keys using openssl_pkey_new. Check your OpenSSL configuration, especially the path to openssl.cafile.'|trans({}) }}{{ icons.nok(psBaseUri) }}
+ {{ 'The following files are missing:'|trans({}) }} +
    + {% for file in missingFiles %} +
  • {{ file }}
    • + {% endfor %} +
+ 		{{ icons.nok(psBaseUri) }}
+ {{ 'It\'s not possible to write in the following folders:'|trans({}) }} +
    + {% for missingFile in notWritingDirectories %} +
  • {{ missingFile }}
    • + {% endfor %} +
+ 		{{ icons.nok(psBaseUri) }}
+ {{ 'The version of PrestaShop does not match the one stored in database. Your database structure may not be up-to-date and/or the value of PS_VERSION_DB needs to be updated in the configuration table. [1]Learn more[/1].'|trans({ + '[1]': '', + '[/1]': '', + })|raw }} + {{ icons.nok(psBaseUri) }}
+
+

{{ 'Please also make sure you make a full manual backup of your files and database.'|trans({}) }}

+ {% if showErrorMessage %} +

{{ 'PrestaShop requirements are not satisfied.'|trans({}) }}

+ {% endif %} +
+
+
+ #} \ No newline at end of file diff --git a/views/templates/components/local-archive.html.twig b/views/templates/components/local-archive.html.twig new file mode 100644 index 0000000000..246c96ed01 --- /dev/null +++ b/views/templates/components/local-archive.html.twig @@ -0,0 +1,45 @@ +{% if (archiveFiles is defined and archiveFiles is not empty) and (xmlFiles is defined and xmlFiles is not empty) %} +
+
+ + + +
+ +
+ + + +
+ + {% if unableToFindVersion %} +
+ {{ "We couldn't find a PrestaShop version in the .zip file you uploaded. Please try again."|trans({}) }} +
+ {% elseif xmlMismatch %} +
+ {{ "The PrestaShop version in your archive doesn’t match the one in XML file. Please fix this issue and try again."|trans({}) }} +
+ {% endif %} +
+{% else %} +
+ {{ 'No archive found in your admin/autoupgrade/download directory'|trans({}) }} +
+{% endif %} diff --git a/views/templates/components/radio-block.html.twig b/views/templates/components/radio-block.html.twig deleted file mode 100644 index 72b5aab0e6..0000000000 --- a/views/templates/components/radio-block.html.twig +++ /dev/null @@ -1,27 +0,0 @@ - diff --git a/views/templates/components/radio-card.html.twig b/views/templates/components/radio-card.html.twig new file mode 100644 index 0000000000..8b0afab031 --- /dev/null +++ b/views/templates/components/radio-card.html.twig @@ -0,0 +1,45 @@ +