mirror of
https://github.com/ToolJet/ToolJet
synced 2026-05-24 09:28:31 +00:00
Adding scroll for container widget (#5877)
* adding scroll for container * added container for scroll * feat:: added container widget scroll * updated container doc --------- Co-authored-by: Shubhendra <withshubh@gmail.com>
This commit is contained in:
Kiran Ashok
GitHub
parent
636c4a62c5
commit
a438bf35ee
6 changed files with 72 additions and 51 deletions
|
|
@ -8,7 +8,17 @@ Containers are used to group widgets together. You can move the desired number o
|
|||
|
||||
<div style={{textAlign: 'center'}}>
|
||||
|
||||
<img className="screenshot-full" src="/img/widgets/container/container.gif" alt="ToolJet - Widget Reference - Container" />
|
||||
<img className="screenshot-full" src="/img/widgets/container/container.png" alt="ToolJet - Widget Reference - Container" />
|
||||
|
||||
</div>
|
||||
|
||||
## Enabling vertical scroll on container
|
||||
|
||||
To enable the vertical scroll on the container, drag and place any component to the bottom grid of the container and the container will automatically enable the scrolling.
|
||||
|
||||
<div style={{textAlign: 'center'}}>
|
||||
|
||||
<img className="screenshot-full" src="/img/widgets/container/scrollcontainer.png" alt="ToolJet - Widget Reference - Container" />
|
||||
|
||||
</div>
|
||||
|
||||
|
|
|
|||
BIN
docs/static/img/widgets/container/container.png
vendored
Normal file
BIN
docs/static/img/widgets/container/container.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 124 KiB |
BIN
docs/static/img/widgets/container/scrollcontainer.png
vendored
Normal file
BIN
docs/static/img/widgets/container/scrollcontainer.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 108 KiB |
|
|
@ -22,6 +22,8 @@ export const Container = function Container({
|
|||
border: `1px solid ${borderColor}`,
|
||||
height,
|
||||
display: visibility ? 'flex' : 'none',
|
||||
overflow: 'hidden auto',
|
||||
position: 'relative',
|
||||
};
|
||||
|
||||
const parentRef = useRef(null);
|
||||
|
|
|
|||
|
|
@ -71,7 +71,8 @@ export const SubContainer = ({
|
|||
const allComponents = appDefinition ? appDefinition.pages[currentPageId].components : {};
|
||||
const isParentModal =
|
||||
(allComponents[parent]?.component?.component === 'Modal' ||
|
||||
allComponents[parent]?.component?.component === 'Form') ??
|
||||
allComponents[parent]?.component?.component === 'Form' ||
|
||||
allComponents[parent]?.component?.component === 'Container') ??
|
||||
false;
|
||||
|
||||
const getChildWidgets = (components) => {
|
||||
|
|
@ -462,7 +463,7 @@ export const SubContainer = ({
|
|||
ref={drop}
|
||||
style={styles}
|
||||
id={`canvas-${parent}`}
|
||||
className={`real-canvas ${(isDragging || isResizing) && !readOnly ? ' show-grid' : ''}`}
|
||||
className={`real-canvas ${(isDragging || isResizing) && !readOnly ? 'show-grid' : ''}`}
|
||||
>
|
||||
{checkParentVisibility() &&
|
||||
Object.keys(childWidgets).map((key) => {
|
||||
|
|
|
|||
|
|
@ -148,7 +148,7 @@ button {
|
|||
|
||||
.resizer-select,
|
||||
.resizer-active {
|
||||
border: solid 1px $primary !important;
|
||||
border: solid 1px $primary !important;
|
||||
|
||||
.top-right,
|
||||
.top-left,
|
||||
|
|
@ -628,7 +628,7 @@ button {
|
|||
|
||||
.list-group.list-group-transparent.dark .all-apps-link,
|
||||
.list-group-item-action.dark.active {
|
||||
background-color: $dark-background !important;
|
||||
background-color: $dark-background !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1221,7 +1221,7 @@ button {
|
|||
.select-search-dark input {
|
||||
width: 224px !important;
|
||||
height: 32px !important;
|
||||
border-radius: $border-radius !important;
|
||||
border-radius: $border-radius !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1232,7 +1232,7 @@ button {
|
|||
.select-search__value input,
|
||||
.select-search-dark input {
|
||||
height: 32px !important;
|
||||
border-radius: $border-radius !important;
|
||||
border-radius: $border-radius !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1294,7 +1294,7 @@ button {
|
|||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
// border-radius: 0;
|
||||
border-radius: $border-radius !important;
|
||||
border-radius: $border-radius !important;
|
||||
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
|
|
@ -1536,7 +1536,7 @@ button {
|
|||
height: 36px;
|
||||
width: 100%;
|
||||
padding: 0 16px;
|
||||
background-color: $dark-background !important;
|
||||
background-color: $dark-background !important;
|
||||
color: #fff !important;
|
||||
border: none;
|
||||
outline: none;
|
||||
|
|
@ -3607,7 +3607,7 @@ input[type="text"] {
|
|||
|
||||
.nav-tabs .nav-link.active {
|
||||
font-weight: 400 !important;
|
||||
color: $primary !important;
|
||||
color: $primary !important;
|
||||
}
|
||||
|
||||
.empty {
|
||||
|
|
@ -3911,6 +3911,7 @@ input[type="text"] {
|
|||
// .list-item {
|
||||
// }
|
||||
}
|
||||
|
||||
.jet-listview::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
|
||||
|
|
@ -4128,7 +4129,7 @@ input[type="text"] {
|
|||
|
||||
.tabs-inspector.dark {
|
||||
.nav-link.active {
|
||||
border-bottom: 1px solid $primary !important;
|
||||
border-bottom: 1px solid $primary !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -4344,7 +4345,7 @@ input[type="text"] {
|
|||
}
|
||||
|
||||
input {
|
||||
border-radius: $border-radius !important;
|
||||
border-radius: $border-radius !important;
|
||||
padding-left: 1.75rem !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -4424,9 +4425,10 @@ input[type="text"] {
|
|||
/**
|
||||
* Home page modal
|
||||
*/
|
||||
.home-modal-backdrop {
|
||||
.home-modal-backdrop {
|
||||
z-index: 9991;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-content.home-modal-component {
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
|
|
@ -4474,11 +4476,11 @@ input[type="text"] {
|
|||
}
|
||||
|
||||
.modal-content.home-modal-component.dark {
|
||||
background-color: $bg-dark-light !important;
|
||||
color: $white !important;
|
||||
background-color: $bg-dark-light !important;
|
||||
color: $white !important;
|
||||
|
||||
.modal-header {
|
||||
background-color: $bg-dark-light !important;
|
||||
background-color: $bg-dark-light !important;
|
||||
}
|
||||
|
||||
.btn-close {
|
||||
|
|
@ -4486,22 +4488,22 @@ input[type="text"] {
|
|||
}
|
||||
|
||||
.form-control {
|
||||
border-color: $border-grey-dark !important;
|
||||
border-color: $border-grey-dark !important;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
input {
|
||||
background-color: $bg-dark-light !important;
|
||||
background-color: $bg-dark-light !important;
|
||||
}
|
||||
|
||||
.form-select {
|
||||
background-color: $bg-dark !important;
|
||||
color: $white !important;
|
||||
border-color: $border-grey-dark !important;
|
||||
background-color: $bg-dark !important;
|
||||
color: $white !important;
|
||||
border-color: $border-grey-dark !important;
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
color: $white !important;
|
||||
color: $white !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -4794,7 +4796,7 @@ div#driver-page-overlay {
|
|||
}
|
||||
|
||||
.dark-theme-walkthrough#driver-popover-item {
|
||||
background-color: $bg-dark-light !important;
|
||||
background-color: $bg-dark-light !important;
|
||||
border-color: rgba(101, 109, 119, 0.16) !important;
|
||||
|
||||
.driver-popover-title {
|
||||
|
|
@ -4802,7 +4804,7 @@ div#driver-page-overlay {
|
|||
}
|
||||
|
||||
.driver-popover-tip {
|
||||
border-color: transparent transparent transparent $bg-dark-light !important;
|
||||
border-color: transparent transparent transparent $bg-dark-light !important;
|
||||
}
|
||||
|
||||
.driver-popover-description {
|
||||
|
|
@ -4834,7 +4836,7 @@ div#driver-page-overlay {
|
|||
|
||||
.driver-next-btn,
|
||||
.driver-prev-btn {
|
||||
color: $primary !important;
|
||||
color: $primary !important;
|
||||
}
|
||||
|
||||
.driver-disabled {
|
||||
|
|
@ -5179,7 +5181,7 @@ div#driver-page-overlay {
|
|||
}
|
||||
|
||||
.selected-node {
|
||||
border-color: $primary-light !important;
|
||||
border-color: $primary-light !important;
|
||||
}
|
||||
|
||||
.json-tree-icon-container .selected-node>svg:first-child {
|
||||
|
|
@ -5269,7 +5271,7 @@ div#driver-page-overlay {
|
|||
}
|
||||
|
||||
.selected-node {
|
||||
border-color: $primary-light !important;
|
||||
border-color: $primary-light !important;
|
||||
}
|
||||
|
||||
.selected-node .group-object-container .badge {
|
||||
|
|
@ -5536,7 +5538,7 @@ div#driver-page-overlay {
|
|||
|
||||
//Kanban board
|
||||
.kanban-container.dark-themed {
|
||||
background-color: $bg-dark-light !important;
|
||||
background-color: $bg-dark-light !important;
|
||||
|
||||
.kanban-column {
|
||||
.card-header {
|
||||
|
|
@ -5582,7 +5584,7 @@ div#driver-page-overlay {
|
|||
}
|
||||
|
||||
.dnd-card.card.card-dark {
|
||||
background-color: $bg-dark !important;
|
||||
background-color: $bg-dark !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -6873,7 +6875,9 @@ tbody {
|
|||
.select-search-dark__value::after {
|
||||
content: none;
|
||||
}
|
||||
.select-search-dark__select,.select-search__select{
|
||||
|
||||
.select-search-dark__select,
|
||||
.select-search__select {
|
||||
min-width: fit-content;
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
|
@ -7643,6 +7647,7 @@ tbody {
|
|||
.react-tooltip {
|
||||
font-size: .765625rem !important;
|
||||
}
|
||||
|
||||
.tj-db-table {
|
||||
overflow-y: auto;
|
||||
height: 110px;
|
||||
|
|
@ -7706,36 +7711,39 @@ tbody {
|
|||
.tj-onboarding-phone-input-wrapper {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.theme-dark {
|
||||
.tj-onboarding-phone-input-wrapper {
|
||||
.flag-dropdown {
|
||||
background-color: #1f2936 !important;
|
||||
.tj-onboarding-phone-input-wrapper {
|
||||
.flag-dropdown {
|
||||
background-color: #1f2936 !important;
|
||||
|
||||
.country-list {
|
||||
background-color: #1f2936 !important;
|
||||
background: #1f2936;
|
||||
.country-list {
|
||||
background-color: #1f2936 !important;
|
||||
background: #1f2936;
|
||||
|
||||
li {
|
||||
.country .highlight{
|
||||
background-color: #3a3f42;
|
||||
color: #000 !important;
|
||||
div{
|
||||
li {
|
||||
.country .highlight {
|
||||
background-color: #3a3f42;
|
||||
color: #000 !important;
|
||||
|
||||
div {
|
||||
.country-name {
|
||||
color: #6b6b6b !important;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #2b2f31;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background-color: #2b2f31;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
.react-tel-input .country-list .country.highlight {
|
||||
color: #6b6b6b;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue