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

Use normal scrollbar for screen list

This commit is contained in:
Andrew Kingston 2023-08-22 16:16:35 +01:00
parent ec9f0a25ec
commit 919158cf78
1 changed files with 14 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Screens/index.svelte
View File

@ -5,6 +5,7 @@
import RoleIndicator from "./RoleIndicator.svelte" import RoleIndicator from "./RoleIndicator.svelte"
import DropdownMenu from "./DropdownMenu.svelte" import DropdownMenu from "./DropdownMenu.svelte"
import NewScreen from "components/design/NewScreen/index.svelte" import NewScreen from "components/design/NewScreen/index.svelte"
import { tick } from "svelte"
let newScreen = false let newScreen = false
let search = false let search = false
@ -15,8 +16,9 @@
$: filteredScreens = getFilteredScreens($sortedScreens, searchValue) $: filteredScreens = getFilteredScreens($sortedScreens, searchValue)
const openSearch = () => { const openSearch = async () => {
search = true search = true
await tick()
searchInput.focus() searchInput.focus()
screensContainer.scroll({ top: 0, behavior: "smooth" }) screensContainer.scroll({ top: 0, behavior: "smooth" })
} }
@ -136,7 +138,7 @@
height: 212px; height: 212px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
transition: height 300ms; transition: height 300ms ease-out;
} }
.screenSearch { .screenSearch {
@ -152,7 +154,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
border-bottom: 2px solid transparent; border-bottom: 2px solid transparent;
transition: border-bottom 300ms; transition: border-bottom 300ms ease-out;
} }
.headerScrolling { .headerScrolling {
@ -164,17 +166,21 @@
position: absolute; position: absolute;
padding-left: 12px; padding-left: 12px;
color: var(--ink); color: var(--ink);
background-color: var(--background-alt); background-color: transparent;
border: none; border: none;
font-size: var(--spectrum-alias-font-size-default); font-size: var(--spectrum-alias-font-size-default);
width: 260px; width: 260px;
box-sizing: border-box; box-sizing: border-box;
display: none;
} }
.input:focus { .input:focus {
outline: none; outline: none;
} }
.screenSearch input {
display: block;
}
.title { .title {
display: flex; display: flex;
align-items: center; align-items: center;
@ -183,8 +189,7 @@
padding-left: 12px; padding-left: 12px;
flex: 1; flex: 1;
opacity: 1; opacity: 1;
transition: opacity 300ms; transition: opacity 300ms ease-out;
background-color: var(--background-alt);
z-index: 1; z-index: 1;
} }
@ -193,21 +198,6 @@
flex-grow: 1; flex-grow: 1;
} }
.content::-webkit-scrollbar-track {
background: var(--background-alt);
}
.content::-webkit-scrollbar {
width: 18px;
}
.content::-webkit-scrollbar-thumb {
background-color: var(--grey-3);
border-radius: 20px;
border: 1px solid var(--background-alt);
border-width: 5px 5px;
}
.screens :global(.nav-item) { .screens :global(.nav-item) {
padding-right: 8px !important; padding-right: 8px !important;
} }
@ -217,7 +207,7 @@
cursor: pointer; cursor: pointer;
margin-right: 10px; margin-right: 10px;
opacity: 1; opacity: 1;
transition: opacity 300ms; transition: opacity 300ms ease-out;
} }
.searchButton:hover { .searchButton:hover {
@ -232,7 +222,7 @@
.addButton { .addButton {
color: var(--grey-7); color: var(--grey-7);
cursor: pointer; cursor: pointer;
transition: transform 300ms; transition: transform 300ms ease-out;
} }
.closeButton { .closeButton {