MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

More drawer style updates

This commit is contained in:
Andrew Kingston 2024-02-23 12:43:14 +00:00
parent 41b397c2f7
commit c410160e60
3 changed files with 80 additions and 204 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

157
packages/builder/src/components/common/bindings/BindingPanel.svelte
View File

@ -260,11 +260,12 @@
align-items: stretch;
}
.side {
flex: 0 0 0;
transition: flex 130ms ease-out;
flex: 0 0 360px;
margin-right: -360px;
transition: margin-right 130ms ease-out;
}
.side.visible {
flex: 0 0 420px;
margin-right: 0;
}
/* Tabs */
@ -299,154 +300,4 @@
border: none;
border-radius: 0;
}
/*.binding-drawer :global(.container > .main) {*/
/* overflow: hidden;*/
/* height: 100%;*/
/* padding: 0px;*/
/*}*/
/*.binding-drawer :global(.container > .main > .main) {*/
/* overflow: hidden;*/
/* height: 100%;*/
/* display: flex;*/
/* flex-direction: column;*/
/*}*/
/*.binding-drawer :global(.spectrum-Tabs-content) {*/
/* flex: 1;*/
/* overflow: hidden;*/
/*}*/
/*.binding-drawer :global(.spectrum-Tabs-content > div),*/
/*.binding-drawer :global(.spectrum-Tabs-content > div > div),*/
/*.binding-drawer :global(.spectrum-Tabs-content .main-content) {*/
/* height: 100%;*/
/*}*/
/*.binding-drawer .main-content {*/
/* grid-template-rows: unset;*/
/*}*/
/*.messaging {*/
/* display: flex;*/
/* align-items: center;*/
/* gap: var(--spacing-m);*/
/* min-width: 0;*/
/* flex: 1;*/
/*}*/
/*.messaging-wrap {*/
/* overflow: hidden;*/
/*}*/
/*.messaging-wrap > div {*/
/* text-overflow: ellipsis;*/
/* white-space: nowrap;*/
/* overflow: hidden;*/
/*}*/
/*.main :global(textarea) {*/
/* min-height: 202px !important;*/
/*}*/
/*.main-content {*/
/* padding: var(--spacing-s) var(--spacing-xl);*/
/*}*/
/*.main :global(.spectrum-Tabs div.drawer-actions) {*/
/* display: flex;*/
/* gap: var(--spacing-m);*/
/* margin-left: auto;*/
/*}*/
/*.main :global(.spectrum-Tabs-content),*/
/*.main :global(.spectrum-Tabs-content .main-content) {*/
/* margin-top: 0px;*/
/* padding: 0px;*/
/*}*/
/*.main :global(.spectrum-Tabs) {*/
/* display: flex;*/
/*}*/
/*.syntax-error {*/
/* color: var(--red);*/
/* font-size: 12px;*/
/*}*/
/*.syntax-error a {*/
/* color: var(--red);*/
/* text-decoration: underline;*/
/*}*/
/*.binding-footer {*/
/* width: 100%;*/
/* display: flex;*/
/* justify-content: space-between;*/
/*}*/
/*.main-content {*/
/* display: grid;*/
/* grid-template-columns: 1fr;*/
/* grid-template-rows: 380px;*/
/*}*/
/*.main-content.binding-panel {*/
/* grid-template-columns: 1fr 320px;*/
/*}*/
/*.binding-picker {*/
/* border-left: 2px solid var(--border-light);*/
/* border-left: var(--border-light);*/
/* overflow: scroll;*/
/* height: 100%;*/
/*}*/
/*.editor {*/
/* padding: var(--spacing-xl);*/
/* min-width: 0;*/
/* display: flex;*/
/* flex-direction: column;*/
/* gap: var(--spacing-xl);*/
/* overflow: hidden;*/
/*}*/
/*.overlay-wrap {*/
/* position: relative;*/
/* flex: 1;*/
/* overflow: hidden;*/
/*}*/
/*.mode-overlay {*/
/* position: absolute;*/
/* top: 0;*/
/* left: 0;*/
/* z-index: 2;*/
/* width: 100%;*/
/* height: 100%;*/
/* display: flex;*/
/* align-items: center;*/
/* justify-content: center;*/
/* background-color: var(*/
/* --spectrum-textfield-m-background-color,*/
/* var(--spectrum-global-color-gray-50)*/
/* );*/
/* border-radius: var(--border-radius-s);*/
/*}*/
/*.prompt-body {*/
/* display: flex;*/
/* flex-direction: column;*/
/* align-items: center;*/
/* justify-content: center;*/
/* gap: var(--spacing-l);*/
/*}*/
/*.prompt-body .switch-actions {*/
/* display: flex;*/
/* gap: var(--spacing-l);*/
/*}*/
/*.binding-drawer :global(.code-editor),*/
/*.binding-drawer :global(.code-editor > div) {*/
/* height: 100%;*/
/*}*/
.result {
margin: 0;
background: var(--spectrum-global-color-gray-200);
font-size: 14px;
padding: var(--spacing-l);
border-radius: var(--border-radius-s);
font-family: monospace;
border: 1px solid var(--spectrum-global-color-gray-300);
}
</style>

83
packages/builder/src/components/common/bindings/BindingSidePanel.svelte
View File

@ -140,21 +140,19 @@
<div class="binding-side-panel">
<Layout noPadding gap="S">
{#if selectedCategory}
<div class="sub-section-back">
<ActionButton
secondary
icon={"ArrowLeft"}
on:click={() => {
selectedCategory = null
}}
>
Back
</ActionButton>
<div class="header">
<Icon
name="BackAndroid"
hoverable
size="S"
on:click={() => (selectedCategory = null)}
/>
{selectedCategory}
</div>
{/if}
{#if !selectedCategory}
<div class="search">
<div class="header">
<span class="search-input">
<Input
placeholder={"Search for bindings"}
@ -162,7 +160,6 @@
bind:value={search}
/>
</span>
<span
class="search-input-icon"
on:click={() => {
@ -195,9 +192,11 @@
{#each filteredCategories as category}
{#if category.bindings?.length}
<div class="sub-section">
<div class="cat-heading">
<Icon name={categoryIcons[category.name]} />{category.name}
</div>
{#if filteredCategories.length > 1}
<div class="cat-heading">
<Icon name={categoryIcons[category.name]} />{category.name}
</div>
{/if}
<ul>
{#each category.bindings as binding}
<li
@ -262,32 +261,28 @@
overflow: auto;
}
.search :global(input) {
.header {
height: 53px;
padding: 0 var(--spacing-l);
display: flex;
align-items: center;
border-bottom: var(--border-light);
position: sticky;
top: 0;
gap: var(--spacing-m);
background: var(--background);
z-index: 1;
}
.header :global(input) {
border: none;
border-radius: 0;
background: none;
padding: 0;
}
.search {
padding: var(--spacing-m) var(--spacing-l);
display: flex;
align-items: center;
border-top: 0;
border-bottom: var(--border-light);
border-left: 2px solid transparent;
border-right: 2px solid transparent;
margin-right: 1px;
position: sticky;
top: 0;
background-color: var(--background);
z-index: 2;
}
.search-input {
flex: 1;
}
.search-input-icon.searching {
cursor: pointer;
}
@ -300,14 +295,6 @@
padding: var(--spacing-l);
padding-top: 0;
}
.sub-section-back {
padding: var(--spacing-l);
padding-top: var(--spacing-xl);
padding-bottom: 0;
}
.cat-heading {
margin-bottom: var(--spacing-l);
}
ul.helpers li * {
pointer-events: none;
}
@ -317,7 +304,6 @@
align-items: center;
}
ul.category-list .category-name {
font-weight: 600;
text-transform: capitalize;
}
ul.category-list .category-chevron {
@ -331,6 +317,7 @@
li.binding {
display: flex;
align-items: center;
gap: var(--spacing-m);
}
li.binding .binding__typeWrap {
flex: 1;
@ -346,8 +333,8 @@
.cat-heading {
font-size: var(--font-size-s);
font-weight: 600;
text-transform: uppercase;
color: var(--spectrum-global-color-gray-600);
color: var(--spectrum-global-color-gray-700);
margin-bottom: var(--spacing-s);
}
.cat-heading {
@ -384,17 +371,13 @@
}
.binding__label {
font-weight: 600;
text-transform: capitalize;
}
.binding__type {
font-family: var(--font-mono);
background-color: var(--spectrum-global-color-gray-200);
border-radius: var(--border-radius-s);
padding: 2px 4px;
margin-left: 2px;
font-weight: 600;
font-size: 10px;
color: var(--spectrum-global-color-gray-700);
}
.helper pre {

44
yarn.lock
View File

@ -2120,6 +2120,16 @@
"@codemirror/view" "^6.6.0"
"@lezer/common" "^1.0.0"
"@codemirror/commands@^6.0.0":
version "6.3.3"
resolved "https://registry.yarnpkg.com/@codemirror/commands/-/commands-6.3.3.tgz#03face5bf5f3de0fc4e09b177b3c91eda2ceb7e9"
integrity sha512-dO4hcF0fGT9tu1Pj1D2PvGvxjeGkbC6RGcZw6Qs74TH+Ed1gw98jmUgd2axWvIZEqTeTuFrg1lEB1KV6cK9h1A==
dependencies:
"@codemirror/language" "^6.0.0"
"@codemirror/state" "^6.4.0"
"@codemirror/view" "^6.0.0"
"@lezer/common" "^1.1.0"
"@codemirror/commands@^6.2.4":
version "6.2.4"
resolved "https://registry.yarnpkg.com/@codemirror/commands/-/commands-6.2.4.tgz#b8a0e5ce72448c092ba4c4b1d902e6f183948aec"
@ -2164,11 +2174,25 @@
"@codemirror/view" "^6.0.0"
crelt "^1.0.5"
"@codemirror/search@^6.0.0":
version "6.5.6"
resolved "https://registry.yarnpkg.com/@codemirror/search/-/search-6.5.6.tgz#8f858b9e678d675869112e475f082d1e8488db93"
integrity sha512-rpMgcsh7o0GuCDUXKPvww+muLA1pDJaFrpq/CCHtpQJYz8xopu4D1hPcKRoDD0YlF8gZaqTNIRa4VRBWyhyy7Q==
dependencies:
"@codemirror/state" "^6.0.0"
"@codemirror/view" "^6.0.0"
crelt "^1.0.5"
"@codemirror/state@^6.0.0", "@codemirror/state@^6.1.4", "@codemirror/state@^6.2.0":
version "6.2.0"
resolved "https://registry.yarnpkg.com/@codemirror/state/-/state-6.2.0.tgz#a0fb08403ced8c2a68d1d0acee926bd20be922f2"
integrity sha512-69QXtcrsc3RYtOtd+GsvczJ319udtBf1PTrr2KbLWM/e2CXUPnh0Nz9AUo8WfhSQ7GeL8dPVNUmhQVgpmuaNGA==
"@codemirror/state@^6.4.0":
version "6.4.1"
resolved "https://registry.yarnpkg.com/@codemirror/state/-/state-6.4.1.tgz#da57143695c056d9a3c38705ed34136e2b68171b"
integrity sha512-QkEyUiLhsJoZkbumGZlswmAhA7CBU02Wrz7zvH4SrcifbsqwlXShVXg65f3v/ts57W3dqyamEriMhij1Z3Zz4A==
"@codemirror/theme-one-dark@^6.1.2":
version "6.1.2"
resolved "https://registry.yarnpkg.com/@codemirror/theme-one-dark/-/theme-one-dark-6.1.2.tgz#fcef9f9cfc17a07836cb7da17c9f6d7231064df8"
@ -3380,6 +3404,11 @@
resolved "https://registry.yarnpkg.com/@lezer/common/-/common-1.0.2.tgz#8fb9b86bdaa2ece57e7d59e5ffbcb37d71815087"
integrity sha512-SVgiGtMnMnW3ActR8SXgsDhw7a0w0ChHSYAyAUxxrOiJ1OqYWEKk/xJd84tTSPo1mo6DXLObAJALNnd0Hrv7Ng==
"@lezer/common@^1.1.0":
version "1.2.1"
resolved "https://registry.yarnpkg.com/@lezer/common/-/common-1.2.1.tgz#198b278b7869668e1bebbe687586e12a42731049"
integrity sha512-yemX0ZD2xS/73llMZIK6KplkjIjf2EvAHcinDi/TfJ9hS25G0388+ClHt6/3but0oOxinTcQHJLDXh6w1crzFQ==
"@lezer/highlight@^1.0.0", "@lezer/highlight@^1.1.3":
version "1.1.4"
resolved "https://registry.yarnpkg.com/@lezer/highlight/-/highlight-1.1.4.tgz#98ed821e89f72981b7ba590474e6ee86c8185619"
@ -8086,11 +8115,24 @@ codemirror-spell-checker@1.1.2:
dependencies:
typo-js "*"
codemirror@^5.59.0, codemirror@^5.63.1:
codemirror@^5.63.1:
version "5.65.12"
resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.65.12.tgz#294fdf097d10ac5b56a9e011a91eff252afc73ae"
integrity sha512-z2jlHBocElRnPYysN2HAuhXbO3DNB0bcSKmNz3hcWR2Js2Dkhc1bEOxG93Z3DeUrnm+qx56XOY5wQmbP5KY0sw==
codemirror@^6.0.1:
version "6.0.1"
resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-6.0.1.tgz#62b91142d45904547ee3e0e0e4c1a79158035a29"
integrity sha512-J8j+nZ+CdWmIeFIGXEFbFPtpiYacFMDR8GlHK3IyHQJMCaVRfGx9NT+Hxivv1ckLWPvNdZqndbr/7lVhrf/Svg==
dependencies:
"@codemirror/autocomplete" "^6.0.0"
"@codemirror/commands" "^6.0.0"
"@codemirror/language" "^6.0.0"
"@codemirror/lint" "^6.0.0"
"@codemirror/search" "^6.0.0"
"@codemirror/state" "^6.0.0"
"@codemirror/view" "^6.0.0"
collect-v8-coverage@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/collect-v8-coverage/-/collect-v8-coverage-1.0.1.tgz#cc2c8e94fc18bbdffe64d6534570c8a673b27f59"