Skip to content

Commit

Permalink
fix(editors): show all editors as 100% height in their cell container (…
Browse files Browse the repository at this point in the history 
…#277)

* fix(editors): show all editors as 100% height in their cell container
  • Loading branch information
@ghiscoding
ghiscoding authored Mar 5, 2021
1 parent 960884d commit 3f49aea
Show file tree
Hide file tree
Showing 6 changed files with 24 additions and 16 deletions.
2 changes: 1 addition & 1 deletion packages/common/src/editors/selectEditor.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -743,7 +743,7 @@ export class SelectEditor implements Editor {
options += `<option value="${optionValue}" label="${optionLabel}">${optionText}</option>`;
});
}
return `<select id="${this.elementName}" class="ms-filter search-filter editor-${columnId}" ${this.isMultipleSelect ? 'multiple="multiple"' : ''}>${options}</select>`;
return `<select id="${this.elementName}" class="ms-filter search-filter select-editor editor-${columnId}" ${this.isMultipleSelect ? 'multiple="multiple"' : ''}>${options}</select>`;
}

/** Create a blank entry that can be added to the collection. It will also reuse the same collection structure provided by the user */
Expand Down
2 changes: 1 addition & 1 deletion packages/common/src/styles/_variables-theme-material.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -126,6 +126,7 @@ $preheader-border-right: 1px solid #e2e2e2 !default
$row-move-plugin-cursor: grab !default;
$row-move-plugin-icon-color: $icon-color !default;
$row-move-plugin-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($row-move-plugin-icon-color)}" viewBox="0 0 24 24"><path d="M10,13H22V11H10M10,19H22V17H10M10,7H22V5H10M6,7H8.5L5,3.5L1.5,7H4V17H1.5L5,20.5L8.5,17H6V7Z"></path></svg>') !default;
$editor-input-height: 100% !default;
$editor-input-group-clear-btn-icon-color: $icon-color !default;
$editor-input-group-clear-btn-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($editor-input-group-clear-btn-icon-color)}" viewBox="0 0 24 24"><path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"></path></svg>') !default;
$editor-input-group-clear-btn-icon-margin-top: inherit !default;
Expand All @@ -134,7 +135,6 @@ $editor-input-group-clear-btn-icon-size: calc(#{$icon-font-size} +
$editor-input-group-clear-btn-icon-vertical-align: initial !default;
$editor-input-group-clear-btn-icon-height: 14px !default;
$editor-input-group-clear-btn-icon-width: 14px !default;
$slider-editor-height: 26px !default;
$row-mouse-hover-color: #ebfaef !default;
$row-selected-color: #d4f6d7 !default;
$detail-view-icon-collapse-color: $primary-color !default;
Expand Down
2 changes: 1 addition & 1 deletion packages/common/src/styles/_variables-theme-salesforce.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -155,6 +155,7 @@ $row-move-plugin-icon-color: $cell-text-color !defaul
$row-move-plugin-cursor: grab !default;
$row-move-plugin-icon-width: 18px !default;
$row-move-plugin-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($row-move-plugin-icon-color)}" viewBox="0 0 24 24"><path d="M10,13H22V11H10M10,19H22V17H10M10,7H22V5H10M6,7H8.5L5,3.5L1.5,7H4V17H1.5L5,20.5L8.5,17H6V7Z"></path></svg>') !default;
$editor-input-height: 100% !default;
$editor-input-group-clear-btn-icon-color: $icon-color !default;
$editor-input-group-clear-btn-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($editor-input-group-clear-btn-icon-color)}" viewBox="0 0 24 24"><path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"></path></svg>') !default;
$editor-input-group-clear-btn-icon-margin-top: inherit !default;
Expand All @@ -178,7 +179,6 @@ $editor-modal-title-font-weight: var(--lwc-fontWeightLigh
$editor-modal-title-line-height: var(--lwc-lineHeightHeading, 1.25) !default;
$editor-modal-title-text-align: center !default;
$large-editor-button-border-radius: 3px !default;
$slider-editor-height: 24px !default;
$slider-filter-thumb-color: #3C97DD !default;
$slider-filter-runnable-track-bgcolor: #ECEBEA !default;
$row-selected-color: #ECEBEA !default;
Expand Down
4 changes: 3 additions & 1 deletion packages/common/src/styles/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -511,7 +511,7 @@ $editor-input-group-clear-btn-icon-size: inherit !default;
$editor-input-group-clear-btn-icon-height: initial !default;
$editor-input-group-clear-btn-icon-width: initial !default;
$editor-input-group-clear-btn-icon-vertical-align: middle !default;
$date-editor-input-padding: 6px 2px !default;
$date-editor-input-padding: 0 0 0 2px !default;
$date-editor-focus-border-color: $editor-focus-border-color !default;
$date-editor-focus-box-shadow: $editor-focus-box-shadow !default;
$date-editor-height: $editor-input-height !default;
Expand Down Expand Up @@ -546,6 +546,7 @@ $slider-editor-runnable-track-padding: 0 6px !default;
$slider-editor-number-padding: 4px 6px !default;
$slider-editor-focus-border-color: $editor-focus-border-color !default;
$slider-editor-focus-box-shadow: $editor-focus-box-shadow !default;
$multiselect-editor-height: $editor-input-height !default;
$multiselect-editor-transform: translate(0, -2px) !default;

/* Slick Composite Editor Modal */
Expand Down Expand Up @@ -648,6 +649,7 @@ $editor-modal-large-editor-footer-line-height: 12px !default;
$editor-modal-large-editor-count-color: $large-editor-count-color !default;
$editor-modal-large-editor-count-font-size: 10px !default;
$editor-modal-large-editor-count-margin: 0 !default;
$editor-modal-multiselect-editor-height: $editor-modal-input-editor-height !default;
$editor-modal-slider-editor-value-height: $editor-modal-input-editor-height !default;
$editor-modal-slider-editor-value-min-height: 100% !default;
$editor-modal-title-font-color: #333333 !default;
Expand Down
26 changes: 18 additions & 8 deletions packages/common/src/styles/slick-editors.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,28 +37,36 @@
}
}

.slider-editor-input {
&:focus {
outline: 0;
border-color: $slider-editor-focus-border-color;
box-shadow: $slider-editor-focus-box-shadow;
.slider-editor {
height: $slider-editor-height;
.slider-editor-input {
height: $slider-editor-height;
&:focus {
outline: 0;
border-color: $slider-editor-focus-border-color;
box-shadow: $slider-editor-focus-box-shadow;
}
}
}

.input-group {
input.editor-text {
height: 24px;
margin-left: 0;
transform: none;
}
}

.ms-filter.search-filter {
.ms-filter.select-editor {
transform: $multiselect-editor-transform;
height: $multiselect-editor-height;
button.ms-choice {
height: $multiselect-editor-height;
}
}

.autocomplete-container.input-group,
.flatpickr.input-group {
height: $date-editor-height;
.input-group-btn {
.btn {
background-color: #eeeeee;
Expand Down Expand Up @@ -406,7 +414,8 @@
background-color: $editor-input-disabled-color;
}
}
.ms-choice {
button.ms-choice {
height: $editor-modal-multiselect-editor-height;
&:disabled {
background-color: $editor-input-disabled-color;
}
Expand All @@ -426,6 +435,7 @@

.autocomplete-container.input-group,
.flatpickr.input-group {
height: $date-editor-height;
.input-group-btn {
min-width: 28px;
.btn {
Expand Down
4 changes: 0 additions & 4 deletions packages/common/src/styles/ui-autocomplete.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,6 @@
// jQuery UI AutoComplete for Bootstrap
// ---------------------------------------------------------

.autocomplete-container {
display: flex;
height: 100%;
}
.ui-widget-content {
background: none;
}
Expand Down

0 comments on commit 3f49aea

Please sign in to comment.