Incorrect styling inside access control dropdown (#3758)

Incorrect styling inside access control dropdown #3755
enonic · Oct 21, 2024 · 0ddcf83 · 0ddcf83
1 parent 0c3a29a
commit 0ddcf83
Show file tree

Hide file tree

Showing 8 changed files with 63 additions and 56 deletions.
diff --git a/src/main/resources/assets/admin/common/js/form/FormContext.ts b/src/main/resources/assets/admin/common/js/form/FormContext.ts
@@ -83,22 +83,22 @@ export class FormContextBuilder {
 
  validationErrors: ValidationError[];
 
- public setShowEmptyFormItemSetOccurrences(value: boolean): FormContextBuilder {
+ public setShowEmptyFormItemSetOccurrences(value: boolean): this {
  this.showEmptyFormItemSetOccurrences = value;
  return this;
  }
 
- public setFormState(value: FormState): FormContextBuilder {
+ public setFormState(value: FormState): this {
  this.formState = value;
  return this;
  }
 
- public setLanguage(lang: string): FormContextBuilder {
+ public setLanguage(lang: string): this {
  this.language = lang;
  return this;
  }
 
- public setValidationErrors(value: ValidationError[]): FormContextBuilder {
+ public setValidationErrors(value: ValidationError[]): this {
  this.validationErrors = value;
  return this;
  }

diff --git a/src/main/resources/assets/admin/common/styles/api/ui/button/menu-button.less b/src/main/resources/assets/admin/common/styles/api/ui/button/menu-button.less
@@ -15,7 +15,6 @@
  .menu {
  display: none;
  position: absolute;
- width: 100%;
  z-index: @z-index-mask;
  box-sizing: border-box;
  }

diff --git a/src/main/resources/assets/admin/common/styles/api/ui/security/acl/access-control-entry.less b/src/main/resources/assets/admin/common/styles/api/ui/security/acl/access-control-entry.less
@@ -14,48 +14,10 @@
  }
 
  .names-and-icon-view {
- float: left;
  margin: 0 10px 0 0;
- min-width: 200px;
  flex: 1 auto;
  }
 
- .access-selector {
- float: left;
- min-width: 100px;
- width: 120px;
- margin: 0 10px 0 0;
-
- .tab-menu-button {
- text-align: left;
- margin: 2px 0 0;
- padding: 4px 5px;
- color: @admin-font-gray3;
- background-color: transparent;
-
- .ellipsis();
-
- &::before {
- display: none;
- }
-
- .label {
- margin: 0;
- color: @admin-blue;
- }
- }
-
- &.expanded {
- .tab-menu-button {
- background-color: @admin-blue;
-
- .label {
- color: @admin-white;
- }
- }
- }
- }
-
  .permission-selector {
  display: none;
  clear: left;

diff --git a/src/main/resources/assets/admin/common/styles/api/ui/security/acl/access-selector.less b/src/main/resources/assets/admin/common/styles/api/ui/security/acl/access-selector.less
@@ -1,12 +1,50 @@
 .access-selector {
+ min-width: 100px;
+ width: 120px;
+
  &.disabled {
  .tab-menu-button {
  cursor: default;
  }
  }
 
+ .tab-menu-button {
+ text-align: left;
+ margin: 2px 0 0;
+ padding: 4px 5px;
+ color: @admin-font-gray3;
+ background-color: transparent;
+ width: 100%;
+
+ .ellipsis();
+
+ &::before {
+ display: none;
+ }
+
+ .label {
+ margin: 0;
+ color: @admin-blue;
+ }
+ }
+
+ &.expanded {
+ .tab-menu-button {
+ background-color: @admin-blue;
+
+ .label {
+ color: @admin-white;
+ }
+ }
+ }
+
  .menu {
- padding: 38px 4px 4px;
+ padding: 36px 4px 4px;
+
+
+ &.upward {
+ padding: 4px 4px 36px;
+ }
 
  .tab-menu-item {
  padding: 0;

diff --git a/src/main/resources/assets/admin/common/styles/api/ui/selector/combobox/selected-options.less b/src/main/resources/assets/admin/common/styles/api/ui/selector/combobox/selected-options.less
@@ -99,7 +99,7 @@
 }
 
 .option-cell() {
- .default-slick-cell-styling(1px 10px);
+ .default-slick-cell-styling(6px 8px);
 
  &:hover,
  &.active {
@@ -122,3 +122,11 @@
  }
  }
 }
+
+.filterable-listbox-wrapper-with-selected-view:not(.selection-limit-reached) {
+ .filter-and-list-container {
+ + .selected-options:not(:empty) {
+ margin-top: 10px;
+ }
+ }
+}
diff --git a/...resources/assets/admin/common/styles/api/ui/selector/list/selectable-listbox-wrapper.less b/...resources/assets/admin/common/styles/api/ui/selector/list/selectable-listbox-wrapper.less
@@ -57,8 +57,11 @@
  }
 
  &.selected {
- color: @admin-white;
  background-color: @admin-blue;
+
+ .item-view * {
+ color: @admin-white;
+ }
  }
 
  &:focus-visible {

diff --git a/src/main/resources/assets/admin/common/styles/api/ui/tab/tab-menu.less b/src/main/resources/assets/admin/common/styles/api/ui/tab/tab-menu.less
@@ -15,11 +15,7 @@
  overflow: hidden;
  z-index: 2;
  display: block;
- line-height: 20px;
- padding: 8px 5px;
- text-align: center;
  color: @admin-white;
- background-color: @admin-blue;
  cursor: pointer;
 
  * {
@@ -33,7 +29,6 @@
  }
 
  .label {
- margin: 0 25px;
  font-family: @admin-font-family;
  text-decoration: none;
  }

diff --git a/src/main/resources/assets/admin/common/styles/reset.less b/src/main/resources/assets/admin/common/styles/reset.less
@@ -108,11 +108,13 @@ input,
 textarea,
 select,
 button {
- &:focus {
- outline-width: 2px;
- outline-style: auto;
- outline-offset: -1px;
- -moz-outline-radius: 3px;
+ &:not([tabindex="-1"]) {
+ &:focus {
+ outline-width: 2px;
+ outline-style: auto;
+ outline-offset: -1px;
+ -moz-outline-radius: 3px;
+ }
  }
 }