From cd8da1eec43b354c4052f64ad582211d3ed28d0f Mon Sep 17 00:00:00 2001 From: Eric Date: Thu, 5 Jun 2025 14:53:58 -0500 Subject: [PATCH] Website: update configuration builder (#29778) Changes: - Updated the configuration builder styles to match the wireframes and fix style issues. --- .../js/pages/configuration-builder.page.js | 2 +- .../styles/pages/configuration-builder.less | 66 +++++++++++++++---- website/views/pages/configuration-builder.ejs | 20 +++--- 3 files changed, 63 insertions(+), 25 deletions(-) diff --git a/website/assets/js/pages/configuration-builder.page.js b/website/assets/js/pages/configuration-builder.page.js index 2e971400d3..72a2b4865c 100644 --- a/website/assets/js/pages/configuration-builder.page.js +++ b/website/assets/js/pages/configuration-builder.page.js @@ -629,7 +629,6 @@ parasails.registerPage('configuration-builder', { } else { // Remove the payload option and all dependencies let payloadToRemove = _.find(this.selectedPayloads, {uniqueSlug: payloadSlug}); - console.log(payloadSlug, payloadToRemove); // check the alsoAutoSetWhenSelected value of the payload we're removing. let newSelectedPayloads = _.without(this.selectedPayloads, payloadToRemove); delete this.configurationBuilderFormRules[payloadSlug+'-value']; @@ -648,6 +647,7 @@ parasails.registerPage('configuration-builder', { clickResetForm: async function() { this.step = 'platform-select'; this.platform = undefined; + this.platformSelectFormData.platform = undefined; // The current selected payload category, controls which options are shown in the middle section this.selectedPayloadCategory = undefined; diff --git a/website/assets/styles/pages/configuration-builder.less b/website/assets/styles/pages/configuration-builder.less index 0dcaff90a2..5a0ffcc39a 100644 --- a/website/assets/styles/pages/configuration-builder.less +++ b/website/assets/styles/pages/configuration-builder.less @@ -32,6 +32,16 @@ font-weight: 400; line-height: 150%; /* 142.857% */ } + [purpose='page-header'] {// Note: this overrides the header styles in layout.less. + max-width: 100%; + height: 64px; + [purpose='header-logo'] { + img { + height: 36px; + width: 104px; + } + } + } [purpose='header-container'] { position: relative; @@ -241,7 +251,7 @@ cursor: pointer; } [purpose='platform-selector-step'] { - height: calc(~'100vh - 81px'); + height: calc(~'100vh - 65px'); display: flex; flex-direction: row; } @@ -314,7 +324,7 @@ height: 100%; position: relative; flex-grow: 1; - overflow: scroll; + overflow: auto; transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 500ms; @@ -361,9 +371,9 @@ align-items: flex-start; flex: 1 0 0; align-self: stretch; - overflow: scroll; - width: 400px; - min-width: 400px; + overflow: auto; + width: 384px; + min-width: 384px; background: #FFF; height: 100%; border-right: 1px solid var(--border-border-primary, #E2E4EA); @@ -427,6 +437,7 @@ flex-direction: row; align-items: center; justify-content: center; + font-size: 14px; } input { display: none; @@ -481,32 +492,37 @@ align-items: flex-start; flex: 1 0 0; align-self: stretch; - overflow: scroll; + overflow: auto; // width: 100%; // min-width: 400px; background: #FFF; // height: 100%; border: 1px solid var(--border-border-primary, #E2E4EA); - border-top: none; scrollbar-width: 16px; position: absolute; left: 100%; top: 0px; z-index: 0; - transition-property: left; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 500ms; - padding-bottom: 80px; + // transition-property: left; + // transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + // transition-duration: 500ms; + margin-bottom: 58px; + border-radius: 8px; &.slide-in { position: relative; left: 0px; - margin-left: 16px; + margin-left: 8px; + margin-top: 8px; + margin-right: 8px; } } [purpose='payload-category'] { width: 100%; border-top: 1px solid var(--border-border-primary, #E2E4EA); + margin-top: 8px; + border-radius: 8px; &:first-of-type { + margin-top: 0px; border-top: none; } } @@ -518,6 +534,8 @@ align-items: center; align-self: stretch; width: 100%; + border-top-left-radius: 8px; + border-top-right-radius: 8px; } [purpose='download-and-remove-buttons'] { display: flex; @@ -531,6 +549,7 @@ border-radius: 8px; background: var(--Core-Fleet-Black, #192147); margin-left: 16px; + height: 32px; } } [purpose='payload-option'] { @@ -541,7 +560,7 @@ align-self: stretch; border-radius: var(--spacing-spacing-none, 0px); border-top: 1px solid var(--border-border-primary, #E2E4EA); - + // margin-bottom: 24px; [purpose='access-type-select'] { height: 36px; padding: 0px 6px 0px var(--spacing-spacing-xs, 8px); @@ -561,9 +580,15 @@ height: 36px; padding: 0px 6px 0px var(--spacing-spacing-xs, 8px); align-items: center; + font-size: 14px; + color: #515774; + &:focus { + border-color: #192147; + } } [purpose='unit-label'] { margin-left: 8px; + font-size: 14px; } [purpose='form-option'] { user-select: none; @@ -640,6 +665,7 @@ } .form-control { height: 40px; + } } } @@ -647,6 +673,18 @@ margin-bottom: 32px; } } + [purpose='remove-button'] { + font-size: 12px; + color: @core-fleet-black-75; + text-decoration: underline; + text-underline-offset: 4px; + text-decoration-color: #C5C7D1; + cursor: pointer; + &:hover { + color: @core-fleet-black; + text-decoration-color: @core-fleet-black;; + } + } .is-invalid { .invalid-feedback { display: block; @@ -657,7 +695,7 @@ display: flex; position: fixed; bottom: 0px; - width: calc(~'100% - 600px'); + width: calc(~'100% - 584px'); height: 53px; padding: var(--spacing-spacing-xs, 8px); justify-content: flex-end; diff --git a/website/views/pages/configuration-builder.ejs b/website/views/pages/configuration-builder.ejs index e4154d3168..2a7c79f650 100644 --- a/website/views/pages/configuration-builder.ejs +++ b/website/views/pages/configuration-builder.ejs @@ -7,7 +7,7 @@ Fleet logo -
+
@@ -96,8 +96,8 @@

Device lock

-

- Settings related to screen lock and passwords. Learn more +

+ Settings related to screen lock and passwords. Learn more

@@ -138,8 +138,8 @@

Device lock

-

- Settings related to screen lock and passwords. Learn more +

+ Settings related to screen lock and passwords. Learn more

@@ -189,7 +189,7 @@
-

{{category}}

+

{{category}}

Remove all download @@ -238,13 +238,13 @@ {{ configurationBuilderFormData[option.uniqueSlug+'-value'] ? 'Yes' : 'No' }}
- Remove + Remove
-
+
Create new - Download download + Download download