- Sponsor
-
Notifications
You must be signed in to change notification settings - Fork 191
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Fix rendering of inline code blocks for docs
Styling of codeblocks:
- Uniform margins as other documentation elements.
- Add small margin for inline code-blocks.
- Use different background color for inline code-blocks.
- Introduce `inline-code` and `code-block` mixins for clarity in
styling.
Overflowing of codeblocks:
- Improve flex layout of the tree component to be handle overflowing
content and providing maximum available width. To be able to correctly
provide maximum available width in card content, card expansion layout
is changed so both close button and the content gets their full width.
- Other refactorings to support this:
- Introduce separate Vue component for checkboxes of nodes for better
separation of concerns and improved maintainability.
- Refactor `LeafTreeNode` to make it simpler, separating layout concerns
from other styling.
- `ScriptsTree.vue`: Prefer `<div>`s instead of `<span>`s as they
represent large content.
- Remove unnecessary `<div>`s and use `<template>`s to reduce HTML
complexity.
- Update script documentation to not include unnecessary left padding
on script code blocks.
1 parent
7c632f7
commit cfccefd
Showing
12 changed files
with
280 additions
and
166 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
107 changes: 107 additions & 0 deletions
107
src/presentation/components/Scripts/View/Tree/TreeView/Node/NodeCheckbox.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,107 @@ | ||
| <template> | ||
| <div | ||
| class="checkbox" | ||
| :class="{ | ||
| checked: checked, | ||
| indeterminate: indeterminate, | ||
| }" | ||
| /> | ||
| </template> | ||
|
|
||
| <script lang="ts"> | ||
| import { defineComponent, computed, toRef } from 'vue'; | ||
| import { TreeRoot } from '../TreeRoot/TreeRoot'; | ||
| import { useCurrentTreeNodes } from '../UseCurrentTreeNodes'; | ||
| import { useNodeState } from './UseNodeState'; | ||
| import { TreeNode } from './TreeNode'; | ||
| import { TreeNodeCheckState } from './State/CheckState'; | ||
| import type { PropType } from 'vue'; | ||
| export default defineComponent({ | ||
| props: { | ||
| nodeId: { | ||
| type: String, | ||
| required: true, | ||
| }, | ||
| treeRoot: { | ||
| type: Object as PropType<TreeRoot>, | ||
| required: true, | ||
| }, | ||
| }, | ||
| setup(props) { | ||
| const { nodes } = useCurrentTreeNodes(toRef(props, 'treeRoot')); | ||
| const currentNode = computed<TreeNode>( | ||
| () => nodes.value.getNodeById(props.nodeId), | ||
| ); | ||
| const { state } = useNodeState(currentNode); | ||
| const checked = computed<boolean>(() => state.value.checkState === TreeNodeCheckState.Checked); | ||
| const indeterminate = computed<boolean>( | ||
| () => state.value.checkState === TreeNodeCheckState.Indeterminate, | ||
| ); | ||
| return { | ||
| indeterminate, | ||
| checked, | ||
| currentNode, | ||
| }; | ||
| }, | ||
| }); | ||
| </script> | ||
|
|
||
| <style scoped lang="scss"> | ||
| @use "@/presentation/assets/styles/main" as *; | ||
| @use "./../tree-colors" as *; | ||
| $sideSizeInPx: 30px; | ||
| .checkbox { | ||
| position: relative; | ||
| width: $sideSizeInPx; | ||
| height: $sideSizeInPx; | ||
| box-sizing: border-box; | ||
| border: 1px solid $color-node-checkbox-border-unchecked; | ||
| border-radius: 2px; | ||
| transition: border-color .25s, background-color .25s; | ||
| background: $color-node-checkbox-bg-unchecked; | ||
| &:after { | ||
| position: absolute; | ||
| display: block; | ||
| content: ""; | ||
| } | ||
| &.indeterminate { | ||
| border-color: $color-node-checkbox-border-unchecked; | ||
| &:after { | ||
| background-color: $color-node-checkbox-border-indeterminate; | ||
| top: 50%; | ||
| left: 20%; | ||
| right: 20%; | ||
| height: 2px; | ||
| } | ||
| } | ||
| &.checked { | ||
| background: $color-node-checkbox-bg-checked; | ||
| border-color: $color-node-checkbox-border-checked; | ||
| &:after { | ||
| box-sizing: content-box; | ||
| border: 1.5px solid $color-node-checkbox-tick-checked; | ||
| border-left: 0; | ||
| border-top: 0; | ||
| left: 9px; | ||
| top: 3px; | ||
| height: 15px; | ||
| width: 8px; | ||
| transform: rotate(45deg) scaleY(1); | ||
| transition: transform .25s; | ||
| transform-origin: center; | ||
| } | ||
| } | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters