Enhance form drilldown #18074
Enhance form drilldown #18074
Conversation
…(2) replaced *square* plus/minus icons with caret right/down icons for clearer visual distinction from *square* checkbox, and (3) added descendant-lines for improved visual group of child-parent nodes after 1st nested child group of nodes.
client/src/style/scss/ui.scss
Outdated
| @extend .far; | ||
| margin-right: 5px; | ||
| content: fa-content($fa-var-square); | ||
| .ui-form-field { |
There was a problem hiding this comment.
Are these used anywhere else? This would be a good time to move the styling to the drilldown component.
There was a problem hiding this comment.
Had already done a code search - didn't find anything so thusly named that commit: Removed long-deprecated, unused css. (But let me know if I missed anything!)
Same-page css Vue scoping restriction plus the two recursive Vue components (FormDrilldownOption.vue and FormDrilldownList.vue) means I need access to the higher-level component (if we go with suggested design to select "all except first nested drilldown") so that would put the drill-down scss in FormElement.vue, right? Otherwise, maybe I should try v-deep to break out of the Vue scoping restriction to get it into the drill-down Vue component itself... but that may lack browser compatibility.
There was a problem hiding this comment.
v-deep does not require browser support. It is a compile time directive for Vue to control scoping.
There was a problem hiding this comment.
@ElectronicBlueberry that is super-helpful, I probably had read some older information, so your reply is reassuring.
hujambo-dunia
requested review from
dannon,
bernt-matthias and
ElectronicBlueberry
| <style lang="scss"> | ||
| @import "theme/blue.scss"; | ||
| @import "~@fortawesome/fontawesome-free/scss/_variables"; | ||
| .ui-form-field { | ||
| div > .ui-drilldown { | ||
| $ui-drilldown-padding: 1rem; | ||
| $ui-drilldown-border: 0.5px solid $gray-500; | ||
|
|
||
| .indent { | ||
| padding-left: calc($ui-drilldown-padding + $ui-drilldown-padding/2); | ||
| } | ||
| .align-indent { | ||
| display: inline-block; | ||
| width: $ui-drilldown-padding; | ||
| border-bottom: $ui-drilldown-border; | ||
| } | ||
| .align-checkbox { | ||
| width: $ui-drilldown-padding; | ||
| } | ||
| /* selector: all except first nested drilldown */ | ||
| & > * .descendant-lines { | ||
| border-left: $ui-drilldown-border; | ||
| } | ||
| } | ||
| } | ||
| </style> |
There was a problem hiding this comment.
Please move these styles to the component which uses the ui-drilldown class. That way you can also use scoping, and the selectors can be much simpler.
There was a problem hiding this comment.
@ElectronicBlueberry Once again, I appreciate you explaining the "purpose" behind the change which allows me to address the issue on a deeper level. Let me know if this commit is more along the lines of what you had in mind.
|
This PR was merged without a "kind/" label, please correct. |
Addresses #16044
Changes to recursively structured drill-down components: (1) implemented select-all feature for all infinite descendants (2) adjusted styling to improve visual alignment, grouping.
How to test the changes?
(Select all options that apply)
License