tomas/pocketbase
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[#976] added optional RelationOptions.DisplayFields and refactored the relation picker UI

Browse Source
This commit is contained in:
Gani Georgiev
2023-01-23 21:57:35 +02:00
parent 4c73e16f54
commit 4c010847e3
106 changed files with 1845 additions and 981 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/src/scss/_alert.scss
+5 -2
View File
@@ -105,6 +105,7 @@
display: block;
text-align: center;
pointer-events: none;
transition: left var(--activeAnimationSpeed);
.alert {
text-align: left;
pointer-events: auto;
@@ -112,10 +113,12 @@
margin: var(--baseSpacing) auto;
@include shadowize();
}
.app-sidebar ~ .app-body & {
}
body:not(.overlay-active) {
.app-sidebar ~ .app-body .toasts-wrapper {
left: var(--appSidebarWidth);
}
.app-sidebar ~ .app-body .page-sidebar ~ & {
.app-sidebar ~ .app-body .page-sidebar ~ .toasts-wrapper {
left: calc(var(--appSidebarWidth) + var(--pageSidebarWidth));
}
}
ui/src/scss/_base.scss
+91 -9
View File
@@ -192,7 +192,7 @@ a {
.txt-ellipsis {
display: inline-block;
vertical-align: top;
flex-shrink: 0;
flex-shrink: 1;
max-width: 100%;
overflow: hidden;
white-space: nowrap;
@@ -329,6 +329,7 @@ a,
.content {
@extend %block;
min-width: 0;
& > :first-child {
margin-top: 0;
}
@@ -369,6 +370,7 @@ a,
display: flex;
align-items: center;
width: 100%;
min-width: 0;
gap: var(--smSpacing);
}
.flex-fill {
@@ -447,22 +449,33 @@ a,
}
.label {
--labelVPadding: 3px;
--labelHPadding: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
line-height: 1;
padding: 3px 8px;
padding: var(--labelVPadding) var(--labelHPadding);
min-height: 23px;
max-width: 100%;
text-align: center;
font-size: var(--smFontSize);
line-height: var(--smLineHeight);
border-radius: 30px;
background: var(--baseAlt2Color);
color: var(--txtPrimaryColor);
white-space: nowrap;
.btn:last-child {
margin-right: calc(-0.5 * var(--labelHPadding));
}
.btn:first-child {
margin-left: calc(-0.5 * var(--labelHPadding));
}
// styles
&.label-sm {
--labelHPadding: 5px;
font-size: var(--xsFontSize);
padding: 3px 5px;
min-height: 18px;
line-height: 1;
}
@@ -609,6 +622,7 @@ a.thumb:not(.thumb-active) {
position: relative;
display: inline-flex;
vertical-align: top;
flex-direction: column;
align-items: center;
justify-content: center;
@@ -695,6 +709,8 @@ a.thumb:not(.thumb-active) {
.list {
@extend %block;
position: relative;
overflow: auto; /* fallback */
overflow: overlay;
border: 1px solid var(--baseAlt2Color);
border-radius: var(--baseRadius);
.list-item {
@@ -703,11 +719,77 @@ a.thumb:not(.thumb-active) {
display: flex;
align-items: center;
width: 100%;
gap: 10px;
padding: 10px;
border-bottom: 1px solid var(--baseAlt2Color);
gap: var(--xsSpacing);
outline: 0;
padding: 10px var(--xsSpacing);
min-height: 50px;
border-top: 1px solid var(--baseAlt2Color);
transition: background var(--baseAnimationSpeed);
&:first-child {
border-top: 0;
}
&:last-child {
border-bottom: 0;
border-radius: inherit;
}
.content {
display: flex;
align-items: center;
gap: 5px;
min-width: 0;
max-width: 100%;
user-select: text;
}
.actions {
margin-left: auto;
gap: 10px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
margin: -1px -5px -1px 0;
&.nonintrusive {
@include hide();
transform: translateX(5px);
transition: transform var(--baseAnimationSpeed),
opacity var(--baseAnimationSpeed),
visibility var(--baseAnimationSpeed);
}
}
&:hover,
&:active {
.actions.nonintrusive {
@include show();
transform: translateX(0);
}
}
// styles
&.selected {
background: var(--bodyColor);
}
&.handle:not(.disabled) {
cursor: pointer;
user-select: none;
&:hover,
&:focus-visible {
background: var(--baseAlt1Color);
}
&:active {
background: var(--baseAlt2Color);
}
}
&.disabled:not(.selected) {
cursor: default;
opacity: 0.6;
}
}
.list-item-btn {
padding: 5px;
min-height: auto;
}
&.list-compact {
.list-item {
min-height: 40px;
}
}
}
ui/src/scss/_dropdown.scss
+1 -1
View File
@@ -55,7 +55,7 @@
}
// states
&:focus,
&:focus-visible,
&:hover {
background: var(--baseAlt1Color);
}
ui/src/scss/_form.scss
+55 -49
View File
@@ -112,31 +112,38 @@ button {
border: 2px solid currentColor;
background: #fff;
}
&.btn-secondary,
&.btn-outline {
box-shadow: none;
color: var(--txtPrimaryColor);
@mixin btnOpacity($base: 1, $hover: 1, $active: 1) {
&:before {
opacity: 0;
background: var(--baseAlt4Color);
opacity: $base;
}
&:focus-visible,
&:hover,
&:active,
&.active {
&:hover {
&:before {
opacity: 0.11;
opacity: $hover;
}
}
&.active,
&:active {
&:before {
opacity: 0.22;
opacity: $active;
}
}
}
&.btn-secondary,
&.btn-transparent,
&.btn-outline {
box-shadow: none;
color: var(--txtPrimaryColor);
@include btnOpacity(0, 0.25, 0.35);
&:before {
background: var(--baseAlt3Color);
}
@each $name, $color in $variationsMap {
&.btn-#{$name} {
color: $color;
@include btnOpacity(0, 0.15, 0.25);
&:before {
background: $color;
}
@@ -144,6 +151,20 @@ button {
}
&.btn-hint {
color: var(--txtHintColor);
&:focus-visible,
&:hover,
&:active,
&.active {
color: var(--txtPrimaryColor);
}
}
}
&.btn-secondary {
@include btnOpacity(0.3, 0.5, 0.7);
@each $name, $color in $variationsMap {
&.btn-#{$name} {
@include btnOpacity(0.15, 0.25, 0.3);
}
}
}
@@ -157,7 +178,7 @@ button {
&:before {
display: none;
}
&.btn-secondary {
&.btn-transparent {
background: none;
}
&.btn-outline {
@@ -167,7 +188,7 @@ button {
// sizes
&.btn-expanded {
min-width: 140px;
min-width: 150px;
}
&.btn-expanded-sm {
min-width: 90px;
@@ -231,7 +252,7 @@ button {
padding: 0;
gap: 0;
i {
$iconSize: 24px;
$iconSize: 19px;
font-size: 1.2857rem;
text-align: center;
width: $iconSize;
@@ -242,10 +263,12 @@ button {
display: block;
}
}
&.btn-sm i,
&.btn-xs i {
&.btn-sm i {
font-size: 1.1rem;
}
&.btn-xs i {
font-size: 1.05rem;
}
}
// loading
@@ -1025,51 +1048,34 @@ select {
}
}
.form-field-file {
.form-field-list {
label {
border-bottom: 0;
padding-bottom: 10px;
}
.filename {
align-items: center;
max-width: 100%;
min-width: 0;
margin-right: auto;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
i {
text-decoration: none;
}
}
.files-list {
@extend %block;
padding-top: 5px;
.list {
background: var(--baseAlt1Color);
border: 0;
border-radius: 0;
border-bottom-left-radius: var(--baseRadius);
border-bottom-right-radius: var(--baseRadius);
transition: background var(--baseAnimationSpeed);
.list-item {
display: flex;
width: 100%;
align-items: center;
row-gap: 10px;
column-gap: var(--xsSpacing);
padding: 10px 15px;
min-height: 44px;
border-top: 1px solid var(--baseAlt2Color);
&:last-child {
border-radius: inherit;
border-bottom: 0;
&.selected {
background: var(--baseAlt2Color);
}
&.handle:not(.disabled) {
&:hover,
&:focus-visible {
background: var(--baseAlt2Color);
}
&:active {
background: var(--baseAlt3Color);
}
}
}
.btn-list-item {
padding: 5px;
}
}
&:focus-within {
.files-list, label {
.list, label {
background: var(--baseAlt1Color);
}
}
ui/src/scss/_searchbar.scss
+1 -15
View File
@@ -8,7 +8,7 @@
width: 100%;
flex-grow: 1;
padding: 5px 7px;
margin: 0 0 var(--smSpacing);
margin: 0;
white-space: nowrap;
color: var(--txtHintColor);
background: var(--baseAlt1Color);
@@ -58,17 +58,3 @@
background: var(--baseAlt2Color);
}
}
.searchbar-wrapper {
position: relative;
display: flex;
align-items: center;
width: 100%;;
min-width: var(--btnHeight);
min-height: var(--btnHeight);
.search-toggle {
position: absolute;
right: 0;
top: 0;
}
}
ui/src/scss/_table.scss
+3
View File
@@ -9,6 +9,9 @@ table {
line-height: 1;
text-align: left;
}
.txt-ellipsis {
flex-shrink: 0;
}
td, th {
outline: 0;
vertical-align: middle;
ui/src/scss/_tooltip.scss
+1
View File
@@ -21,6 +21,7 @@
transform var(--baseAnimationSpeed);
transform: scale(0.98);
white-space: pre-line;
word-break: break-all;
@include hide();
// styles
ui/src/scss/_vars.scss
+5 -5
View File
@@ -14,19 +14,19 @@
--baseColor: #ffffff;
--baseAlt1Color: #ebeff2;
--baseAlt2Color: #dee3e8;
--baseAlt3Color: #a9b4bc;
--baseAlt4Color: #7c868d;
--baseAlt3Color: #d1d7db;
--baseAlt4Color: #848d94;
--infoColor: #3da9fc;
--infoAltColor: #d8eefe;
--successColor: #2cb67d;
--successAltColor: #d6f5e8;
--dangerColor: #ef4565;
--dangerColor: #e13756;
--dangerAltColor: #fcdee4;
--warningColor: #ff8e3c;
--warningAltColor: #ffe7d6;
--overlayColor: rgba(65, 80, 105, 0.25);
--overlayColor: rgba(60, 70, 105, 0.25);
--tooltipColor: rgba(0, 0, 0, 0.85);
--shadowColor: rgba(0, 0, 0, 0.06);
@@ -43,7 +43,7 @@
--inputHeight: 34px;
--btnHeight: 40px;
--xsBtnHeight: 24px;
--xsBtnHeight: 22px;
--smBtnHeight: 30px;
--lgBtnHeight: 54px;