added records file picker support for the editor field
This commit is contained in:
Gani Georgiev
+154
-5
@@ -127,7 +127,7 @@ code {
|
||||
line-height: 1.379rem;
|
||||
padding: 0px 4px;
|
||||
white-space: nowrap;
|
||||
color: var(--txtPrimaryColor);
|
||||
color: inherit;
|
||||
background: var(--baseAlt2Color);
|
||||
border-radius: var(--baseRadius);
|
||||
}
|
||||
@@ -527,6 +527,8 @@ a,
|
||||
background: var(--baseAlt2Color);
|
||||
border-radius: var(--baseRadius);
|
||||
color: var(--txtPrimaryColor);
|
||||
outline-offset: -2px;
|
||||
outline: 2px solid transparent;
|
||||
@include shadowize();
|
||||
i {
|
||||
font-size: inherit;
|
||||
@@ -556,16 +558,31 @@ a,
|
||||
&.thumb-circle {
|
||||
border-radius: 50%;
|
||||
}
|
||||
&.thumb-active {
|
||||
box-shadow: 0px 0px 0px 2px var(--primaryColor);
|
||||
|
||||
// styles
|
||||
@each $name, $color in $colorsMap {
|
||||
&.thumb-#{$name} {
|
||||
outline-color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
.handle.thumb:not(.thumb-active),
|
||||
a.thumb:not(.thumb-active) {
|
||||
transition: box-shadow var(--baseAnimationSpeed);
|
||||
cursor: pointer;
|
||||
transition: opacity var(--baseAnimationSpeed),
|
||||
outline-color var(--baseAnimationSpeed),
|
||||
transform var(--baseAnimationSpeed),
|
||||
box-shadow var(--baseAnimationSpeed);
|
||||
&:hover,
|
||||
&:focus {
|
||||
&:focus-visible,
|
||||
&:active {
|
||||
opacity: 0.8;
|
||||
@include shadowize(0px 2px 4px 1px var(--shadowColor));
|
||||
}
|
||||
&:active {
|
||||
transition-duration: 0s;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
}
|
||||
|
||||
.section-title {
|
||||
@@ -889,3 +906,135 @@ a.thumb:not(.thumb-active) {
|
||||
border-radius: var(--baseRadius);
|
||||
border: 1px solid var(--baseAlt1Color);
|
||||
}
|
||||
|
||||
// sidebar menu
|
||||
.sidebar-menu {
|
||||
--sidebarListItemMargin: 10px;
|
||||
|
||||
z-index: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 200px;
|
||||
flex-shrink: 0;
|
||||
flex-grow: 0;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
background: var(--baseColor);
|
||||
padding: calc(var(--baseSpacing) - 5px) 0 var(--smSpacing);
|
||||
& > * {
|
||||
padding: 0 var(--smSpacing);
|
||||
}
|
||||
.sidebar-content {
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto; /* fallback */
|
||||
overflow-y: overlay;
|
||||
& > :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
& > :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.sidebar-footer {
|
||||
margin-top: var(--smSpacing);
|
||||
}
|
||||
.search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: auto;
|
||||
column-gap: 5px;
|
||||
margin: 0 0 var(--xsSpacing);
|
||||
color: var(--txtHintColor);
|
||||
opacity: 0.7;
|
||||
transition: opacity var(--baseAnimationSpeed),
|
||||
color var(--baseAnimationSpeed);
|
||||
input {
|
||||
border: 0;
|
||||
background: var(--baseColor);
|
||||
transition: box-shadow var(--baseAnimationSpeed),
|
||||
background var(--baseAnimationSpeed);
|
||||
}
|
||||
.btn-clear {
|
||||
margin-right: -8px;
|
||||
}
|
||||
&:hover,
|
||||
&:focus-within,
|
||||
&.active {
|
||||
opacity: 1;
|
||||
color: var(--txtPrimaryColor);
|
||||
input {
|
||||
background: var(--baseAlt2Color);
|
||||
}
|
||||
}
|
||||
}
|
||||
.sidebar-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
width: 100%;
|
||||
margin: var(--baseSpacing) 0 var(--xsSpacing);
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
line-height: var(--smLineHeight);
|
||||
color: var(--txtHintColor);
|
||||
.label {
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
.sidebar-list-item {
|
||||
cursor: pointer;
|
||||
outline: 0;
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
column-gap: 10px;
|
||||
margin: var(--sidebarListItemMargin) 0;
|
||||
padding: 3px 10px;
|
||||
font-size: var(--xlFontSize);
|
||||
min-height: var(--btnHeight);
|
||||
min-width: 0;
|
||||
color: var(--txtHintColor);
|
||||
border-radius: var(--baseRadius);
|
||||
user-select: none;
|
||||
transition: background var(--baseAnimationSpeed),
|
||||
color var(--baseAnimationSpeed);
|
||||
i {
|
||||
font-size: 18px;
|
||||
}
|
||||
.txt {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
// states
|
||||
&:focus-visible,
|
||||
&:hover,
|
||||
&:active,
|
||||
&.active {
|
||||
color: var(--txtPrimaryColor);
|
||||
background: var(--baseAlt1Color);
|
||||
}
|
||||
&:active {
|
||||
background: var(--baseAlt2Color);
|
||||
transition-duration: var(--activeAnimationSpeed);
|
||||
}
|
||||
}
|
||||
.sidebar-content-compact .sidebar-list-item {
|
||||
--sidebarListItemMargin: 5px;
|
||||
}
|
||||
|
||||
// responsive
|
||||
@media screen and (max-height: 600px) {
|
||||
--sidebarListItemMargin: 5px;
|
||||
}
|
||||
@media screen and (max-width: 1100px) {
|
||||
min-width: 190px;
|
||||
& > * {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,88 @@
|
||||
.file-picker-sidebar {
|
||||
flex-shrink: 0;
|
||||
width: 180px;
|
||||
text-align: right;
|
||||
max-height: 100%;
|
||||
overflow: auto;
|
||||
.sidebar-item {
|
||||
outline: 0;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
text-align: left;
|
||||
gap: 10px;
|
||||
font-weight: 600;
|
||||
padding: 5px 10px;
|
||||
margin: 0 0 10px;
|
||||
color: var(--txtHintColor);
|
||||
min-height: var(--btnHeight);
|
||||
border-radius: var(--baseRadius);
|
||||
word-break: break-word;
|
||||
transition: background var(--baseAnimationSpeed),
|
||||
color var(--baseAnimationSpeed);
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
&:hover,
|
||||
&:focus-visible,
|
||||
&:active,
|
||||
&.active {
|
||||
color: var(--txtPrimaryColor);
|
||||
background: var(--baseAlt1Color);
|
||||
}
|
||||
&:active {
|
||||
background: var(--baseAlt2Color);
|
||||
transition-duration: var(--activeAnimationSpeed);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.files-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
gap: var(--xsSpacing);
|
||||
flex-grow: 1;
|
||||
min-height: 0;
|
||||
overflow: auto;
|
||||
.list-item {
|
||||
cursor: pointer;
|
||||
outline: 0;
|
||||
transition: box-shadow var(--baseAnimationSpeed);
|
||||
&:hover {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.file-picker-size-select {
|
||||
width: 170px;
|
||||
margin: 0;
|
||||
.selected-container {
|
||||
min-height: var(--btnHeight);
|
||||
}
|
||||
}
|
||||
|
||||
.file-picker-content {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
flex-grow: 1;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.file-picker {
|
||||
display: flex;
|
||||
height: 440px;
|
||||
max-height: 100%;
|
||||
align-items: stretch;
|
||||
gap: var(--baseSpacing);
|
||||
}
|
||||
|
||||
.overlay-panel.file-picker-popup {
|
||||
width: 930px;
|
||||
}
|
||||
@@ -190,6 +190,16 @@ button {
|
||||
}
|
||||
}
|
||||
|
||||
// alignments
|
||||
&.txt-left {
|
||||
text-align: left;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
&.txt-right {
|
||||
text-align: right;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
// sizes
|
||||
&.btn-expanded {
|
||||
min-width: 150px;
|
||||
@@ -342,6 +352,13 @@ button {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// scrolling helpers
|
||||
&.btn-horizontal-sticky {
|
||||
position: sticky;
|
||||
left: var(--xsSpacing);
|
||||
right: var(--xsSpacing);
|
||||
}
|
||||
}
|
||||
|
||||
.btns-group {
|
||||
@@ -1070,6 +1087,16 @@ select {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.upside {
|
||||
.selected-container.active {
|
||||
border-radius: 0 0 var(--baseRadius) var(--baseRadius);
|
||||
}
|
||||
.options-dropdown {
|
||||
border-radius: var(--baseRadius) var(--baseRadius) 0 0;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.field-type-select {
|
||||
@@ -1252,12 +1279,25 @@ select {
|
||||
}
|
||||
}
|
||||
body {
|
||||
.tox .tox-dialog {
|
||||
border: 0;
|
||||
border-radius: var(--baseRadius);
|
||||
}
|
||||
.tox .tox-dialog-wrap__backdrop {
|
||||
background: var(--overlayColor);
|
||||
}
|
||||
.tox .tox-tbtn {
|
||||
height: 30px;
|
||||
svg {
|
||||
transform: scale(0.85);
|
||||
}
|
||||
}
|
||||
.tox .tox-collection__item-checkmark,
|
||||
.tox .tox-collection__item-icon {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
transform: scale(0.85);
|
||||
}
|
||||
.tox .tox-tbtn:not(.tox-tbtn--select) {
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
@@ -145,7 +145,7 @@ table {
|
||||
max-width: 300px;
|
||||
}
|
||||
.col-type-editor {
|
||||
min-width: 250px;
|
||||
min-width: 300px;
|
||||
}
|
||||
.col-type-select {
|
||||
min-width: 150px;
|
||||
@@ -168,6 +168,9 @@ table {
|
||||
.col-field-updated {
|
||||
@extend %minColWidth;
|
||||
}
|
||||
.col-field-id {
|
||||
min-width: 175px;
|
||||
}
|
||||
|
||||
tr {
|
||||
outline: 0;
|
||||
|
||||
@@ -41,3 +41,5 @@
|
||||
@import 'docs_panel';
|
||||
|
||||
@import 'schema_field';
|
||||
|
||||
@import 'file_picker';
|
||||
|
||||
Reference in New Issue
Block a user