mirror of
https://github.com/fleetdm/fleet
synced 2026-05-23 08:58:41 +00:00
Website: update configuration builder (#29778)
Changes: - Updated the configuration builder styles to match the wireframes and fix style issues.
This commit is contained in:
Eric
GitHub
parent
69d51b5e5c
commit
cd8da1eec4
3 changed files with 63 additions and 25 deletions
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
20
website/views/pages/configuration-builder.ejs
vendored
20
website/views/pages/configuration-builder.ejs
vendored
|
|
@ -7,7 +7,7 @@
|
|||
<a purpose="header-logo" href="/">
|
||||
<img alt="Fleet logo" src="/images/logo-blue-118x41@2x.png"/>
|
||||
</a>
|
||||
<div purpose="search-bar" v-if="step === 'configuration-builder'">
|
||||
<!-- <div purpose="search-bar" v-if="step === 'configuration-builder'">
|
||||
<div purpose="disabled-search" class="d-flex w-100">
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
|
|
@ -25,7 +25,7 @@
|
|||
<div purpose="search-results">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -96,8 +96,8 @@
|
|||
<div v-if="selectedPayloadCategory === 'macos-device-lock'">
|
||||
<div purpose="subcategory-header">
|
||||
<h2>Device lock</h2>
|
||||
<p>
|
||||
Settings related to screen lock and passwords. <a target="_blank" href="/tables/screenlock#apple">Learn more</a>
|
||||
<p class="mb-0">
|
||||
Settings related to screen lock and passwords. <a target="_blank" href="https://developer.apple.com/documentation/devicemanagement/passcode">Learn more</a>
|
||||
</p>
|
||||
</div>
|
||||
<div purpose="subcategory-options">
|
||||
|
|
@ -138,8 +138,8 @@
|
|||
<div v-if="selectedPayloadCategory === 'windows-device-lock'">
|
||||
<div purpose="subcategory-header">
|
||||
<h2>Device lock</h2>
|
||||
<p>
|
||||
Settings related to screen lock and passwords. <a target="_blank" href="/tables/screenlock#apple">Learn more</a>
|
||||
<p class="mb-0">
|
||||
Settings related to screen lock and passwords. <a target="_blank" href="https://learn.microsoft.com/en-us/windows/client-management/mdm/policy-csp-devicelock">Learn more</a>
|
||||
</p>
|
||||
</div>
|
||||
<div purpose="subcategory-options">
|
||||
|
|
@ -189,7 +189,7 @@
|
|||
<div purpose="options-container" :class="[selectedPayloads.length > 0 ? 'slide-in' : '' ]">
|
||||
<div purpose="payload-category" v-for="category in _.keysIn(selectedPayloadsGroupedByCategory)">
|
||||
<div purpose="category-header">
|
||||
<h2>{{category}}</h2>
|
||||
<h2 class="mb-0">{{category}}</h2>
|
||||
<div purpose="download-and-remove-buttons">
|
||||
<a purpose="form-button" @click="clickRemoveOneCategoryPayloadOptions(category)">Remove all</a>
|
||||
<ajax-button purpose="download-button" :syncing="syncing"><img alt="download" src="/images/icon-download.png" style="height: 12px;"></ajax-button>
|
||||
|
|
@ -238,13 +238,13 @@
|
|||
{{ configurationBuilderFormData[option.uniqueSlug+'-value'] ? 'Yes' : 'No' }}
|
||||
</label>
|
||||
</div>
|
||||
<a @click="clickRemovePayloadOption(option)" purpose="form-button">Remove</a>
|
||||
<a @click="clickRemovePayloadOption(option)" purpose="remove-button">Remove</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div purpose="bottom-download-bar" :class="[selectedPayloads.length > 0 ? 'slide-in' : '' ]">
|
||||
<div purpose="bottom-download-bar" :class="[ selectedPayloadCategory ? 'slide-in' : '' ]">
|
||||
<a purpose="new-button" @click="clickOpenResetFormModal()">Create new</a>
|
||||
<ajax-button purpose="download-button" :syncing="syncing">Download <img class="d-inline-flex" alt="download" src="/images/icon-download.png" style="height: 12px;"></ajax-button>
|
||||
<ajax-button purpose="download-button" :syncing="syncing" v-if="selectedPayloads.length > 0">Download <img class="d-inline-flex" alt="download" src="/images/icon-download.png" style="height: 12px;"></ajax-button>
|
||||
</div>
|
||||
</ajax-form>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue