IntenseWebs/pgadmin4
3
0
Fork 0
mirror of https://github.com/pgadmin-org/pgadmin4.git synced 2025-02-25 18:55:31 -06:00
Code Issues Packages Projects Releases Wiki Activity

- Move pgadmin4-treeview to pgAdmin main repo.

Browse Source 
- Use react based context menu for browser tree. #5615.
- Fix feature tests failure.
This commit is contained in:
Aditya Toshniwal
2023-01-02 10:51:13 +05:30
committed by GitHub
parent 64af035ce9
commit 5c34c10d4e
23 changed files with 1588 additions and 406 deletions
Download Patch File Download Diff File Expand all files Collapse all files

186
web/pgadmin/static/scss/_pgadmin4-tree.overrides.scss
View File

@@ -1,186 +0,0 @@
.file-tree {
font-family: $font-family-primary !important;
font-size: $tree-font-size !important;
background-color: $color-bg !important;
display: inline-block;
color: $tree-text-fg !important;
&, & * {
box-sizing: border-box;
}
width: 100%;
}
.browser-tree {
height: 100%;
}
.file-tree > {
div {
position: absolute !important;
height: 100% !important;
top: 0px !important;
> div {
scrollbar-gutter: stable;
overflow: overlay !important;
}
}
}
.file-entry
{
font: inherit;
text-align: left;
display: flex;
align-items: center;
white-space: nowrap;
padding: 2px 0;
cursor: pointer !important;
color: $tree-text-fg !important;
&:before {
content: '';
background: $color-gray-light;
position: absolute;
width: 1px;
height: 100%;
// set box-shadow to show tree indent guide.
box-shadow: -16px 0 0 0 $color-gray-light,
-32px 0 0 0 $color-gray-light,
-48px 0 0 0 $color-gray-light,
-64px 0 0 0 $color-gray-light,
-80px 0 0 0 $color-gray-light,
-96px 0 0 0 $color-gray-light,
-112px 0 0 0 $color-gray-light,
-128px 0 0 0 $color-gray-light,
-144px 0 0 0 $color-gray-light,
-160px 0 0 0 $color-gray-light,
-176px 0 0 0 $color-gray-light,
-192px 0 0 0 $color-gray-light,
-208px 0 0 0 $color-gray-light,
-224px 0 0 0 $color-gray-light,
-240px 0 0 0 $color-gray-light,
-256px 0 0 0 $color-gray-light,
-272px 0 0 0 $color-gray-light,
-288px 0 0 0 $color-gray-light,
-304px 0 0 0 $color-gray-light,
-320px 0 0 0 $color-gray-light,
-336px 0 0 0 $color-gray-light,
-352px 0 0 0 $color-gray-light,
-368px 0 0 0 $color-gray-light,
-384px 0 0 0 $color-gray-light,
-400px 0 0 0 $color-gray-light,
-416px 0 0 0 $color-gray-light,
-432px 0 0 0 $color-gray-light,
-448px 0 0 0 $color-gray-light,
-464px 0 0 0 $color-gray-light,
-480px 0 0 0 $color-gray-light,
-496px 0 0 0 $color-gray-light,
-512px 0 0 0 $color-gray-light,
-528px 0 0 0 $color-gray-light,
-544px 0 0 0 $color-gray-light,
-544px 0 0 0 $color-gray-light,
-560px 0 0 0 $color-gray-light;
}
&:hover, &.pseudo-active {
background-color: $tree-bg-hover !important;
color: $tree-fg-hover !important;
span.file-label {
span.file-name {
color: $tree-text-hover-fg !important;
}
}
}
&.active, &.prompt {
background-color: $tree-bg-selected !important;
border-color: $color-primary-light;
border-right: $active-border !important;
color: $tree-text-hover-fg !important;
span.file-label {
span.file-name {
color: $tree-text-hover-fg !important;
}
}
}
i {
display: inline-block;
font-size: 18px;
text-align: center;
height: 21px !important;
width: 20px !important;
flex-shrink: 0;
&:before {
height: inherit;
width: inherit;
display: inline-block;
}
&.directory-toggle {
&:before {
background-position: 6px center !important;
font-family: $font-family-icon;
content: "\f054" !important;
border-style: none;
margin-left: 5px;
font-weight: 900;
right: 15px;
top: 3px;
font-size: 0.6rem;
line-height: 2;
}
&.open:before {
background-position: -14px center !important;
font-family: $font-family-icon;
content: "\f078" !important;
border-style: none;
margin-left: 5px;
font-weight: 900;
transform: none !important;
}
&.loading:before {
content: '' !important;
font-family: $font-family-icon;
border-style: none;
background: $loader-icon-small 0 0 no-repeat;
background-position: center !important;
}
}
}
span.file-label {
display: flex;
align-items: center;
padding:0 2px 0 2px;
border:1px solid transparent;
height:auto;
white-space:normal;
cursor:pointer !important;
margin-left: 2px;
&:hover, &.pseudo-active {
color: $tree-fg-hover !important;
}
}
&.prompt.new .file-label, &.file .file-label {
margin-left: 18px;
}
span.file-name {
font: inherit;
flex-grow: 1;
user-select: none;
color: $tree-text-fg !important;
margin-left: 3px;
cursor: pointer !important;
white-space: nowrap;
&:hover, &.pseudo-active {
color: $tree-fg-hover !important;
}
}
}
// Set the tree depth CSS from depth level 21 to 50 as in default CSS depth is set from 0 to 20.
@for $i from 21 through 50 {
.file-entry.depth-#{$i} {
padding-left: 16px * ($i - 1);
}
}
.children-count {
margin-left: 3px;
}

2
web/pgadmin/static/scss/pgadmin.scss
View File

@@ -28,7 +28,5 @@ $theme-colors: (
@import 'pgadmin.style';
@import 'bootstrap4-toggle.overrides';
@import 'jsoneditor.overrides';
@import 'pgadmin4-tree.overrides';
@import 'pgadmin4-tree/src/css/styles';
@import 'rc-dock/dist/rc-dock.css';
@import '@szhsin/react-menu/dist/index.css';