1
0
Fork 0
mirror of synced 2024-06-17 01:44:53 +12:00

switch remix icons to spectrum in panels

This commit is contained in:
Keviin Åberg Kultalahti 2021-04-23 10:07:50 +02:00
parent 66c5a134e5
commit b5db919ee1
3 changed files with 40 additions and 66 deletions

View file

@ -1,7 +1,7 @@
<script>
import AutomationList from "./AutomationList.svelte"
import CreateAutomationModal from "./CreateAutomationModal.svelte"
import { Modal, Tabs, Tab } from "@budibase/bbui"
import { Icon, Modal, Tabs, Tab } from "@budibase/bbui"
let modal
</script>
@ -16,22 +16,20 @@
</div>
</Tab>
</Tabs>
<i
on:click={modal.show}
data-cy="new-automation"
class="ri-add-circle-fill" />
<div class="add-button">
<Icon hoverable name="AddCircle" on:click={modal.show} />
</div>
</div>
<style>
.tab-content-padding {
padding: 0 var(--spacing-s);
padding: 0 var(--spectrum-alias-item-padding-m);
}
i {
font-size: 20px;
.add-button {
position: absolute;
top: var(--spacing-l);
right: var(--spacing-l);
top: var(--spectrum-alias-item-padding-l);
bottom: 0;
right: var(--spectrum-alias-item-padding-l);
}
.title {

View file

@ -12,7 +12,7 @@
import Layout from "components/design/NavigationPanel/Layout.svelte"
import NewScreenModal from "components/design/NavigationPanel/NewScreenModal.svelte"
import NewLayoutModal from "components/design/NavigationPanel/NewLayoutModal.svelte"
import { Modal, Select, Search, Tabs, Tab } from "@budibase/bbui"
import { Icon, Modal, Select, Search, Tabs, Tab } from "@budibase/bbui"
const tabs = [
{
@ -26,21 +26,21 @@
]
let modal
$: selected = tabs.find(t => t.key === $params.assetType).title
$: selected = tabs.find((t) => t.key === $params.assetType).title
const navigate = ({ detail }) => {
const { key } = tabs.find(t => t.title === detail)
const { key } = tabs.find((t) => t.title === detail)
$goto(`../${key}`)
}
const updateAccessRole = event => {
const updateAccessRole = (event) => {
const role = event.detail
// Select a valid screen with this new role - otherwise we'll not be
// able to change role at all because ComponentNavigationTree will kick us
// back the current role again because the same screen ID is still selected
const firstValidScreenId = $allScreens.find(
screen => screen.routing.roleId === role
(screen) => screen.routing.roleId === role
)?._id
if (firstValidScreenId) {
store.actions.screens.select(firstValidScreenId)
@ -49,7 +49,7 @@
// Otherwise clear the selected screen ID so that the first new valid screen
// can be selected by ComponentNavigationTree
else {
store.update(state => {
store.update((state) => {
state.selectedScreenId = null
return state
})
@ -72,13 +72,15 @@
on:change={updateAccessRole}
value={$selectedAccessRole}
label="Filter by Access"
getOptionLabel={role => role.name}
getOptionValue={role => role._id}
options={$roles} />
getOptionLabel={(role) => role.name}
getOptionValue={(role) => role._id}
options={$roles}
/>
<Search
placeholder="Enter a route to search"
label="Search Screens"
bind:value={$screenSearchString} />
bind:value={$screenSearchString}
/>
</div>
<div class="nav-items-container">
<ComponentNavigationTree />
@ -93,7 +95,8 @@
<i
on:click={modal.show}
data-cy="new-layout"
class="ri-add-circle-fill" />
class="ri-add-circle-fill"
/>
{#each $store.layouts as layout, idx (layout._id)}
<Layout {layout} border={idx > 0} />
{/each}
@ -103,7 +106,9 @@
</div>
</Tab>
</Tabs>
<i on:click={modal.show} data-cy="new-screen" class="ri-add-circle-fill" />
<div class="add-button">
<Icon hoverable name="AddCircle" on:click={modal.show} />
</div>
</div>
<style>
@ -114,15 +119,11 @@
align-items: stretch;
position: relative;
}
.title i {
font-size: 20px;
.add-button {
position: absolute;
top: var(--spacing-l);
right: var(--spacing-l);
}
.title i:hover {
cursor: pointer;
color: var(--blue);
top: var(--spectrum-alias-item-padding-l);
bottom: 0;
right: var(--spectrum-alias-item-padding-l);
}
.role-select {
@ -135,25 +136,6 @@
}
.tab-content-padding {
padding: 0 var(--spacing-s);
}
.search-screens {
position: relative;
}
.search-screens i {
right: 2px;
bottom: 2px;
position: absolute;
box-sizing: border-box;
padding: var(--spacing-s);
border-left: 1px solid var(--grey-4);
background-color: var(--grey-2);
border-top-right-radius: var(--border-radius-m);
border-bottom-right-radius: var(--border-radius-m);
color: var(--grey-7);
font-size: 14px;
line-height: 15px;
top: auto;
padding: 0 var(--spectrum-alias-item-padding-m);
}
</style>

View file

@ -1,6 +1,6 @@
<script>
import { isActive, goto } from "@roxi/routify"
import { Modal, Tabs, Tab } from "@budibase/bbui"
import { Icon, Modal, Tabs, Tab } from "@budibase/bbui"
import TableNavigator from "components/backend/TableNavigator/TableNavigator.svelte"
import DatasourceNavigator from "components/backend/DatasourceNavigator/DatasourceNavigator.svelte"
import CreateDatasourceModal from "components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte"
@ -20,7 +20,7 @@
let selected = $isActive("./datasource") ? "External" : "Internal"
function selectFirstTableOrSource({ detail }) {
const { key } = tabs.find(t => t.title === detail)
const { key } = tabs.find((t) => t.title === detail)
if (key === "datasource") {
$goto("./datasource")
} else {
@ -52,11 +52,8 @@
</div>
</Tab>
</Tabs>
<div class="title">
<i
data-cy={`new-${selected === 'External' ? 'datasource' : 'tabel'}`}
class="ri-add-circle-fill"
on:click={modal.show} />
<div class="add-button" data-cy={`new-${selected === "External" ? "datasource" : "tabel"}`}>
<Icon hoverable name="AddCircle" on:click={modal.show} />
</div>
</div>
<div class="content">
@ -83,11 +80,8 @@
gap: var(--spacing-l);
background: var(--background);
}
.content :global(> span) {
display: contents;
}
.tab-content-padding {
padding: 0 var(--spacing-s);
padding: 0 var(--spectrum-alias-item-padding-m);
}
.nav {
@ -101,11 +95,11 @@
border-right: var(--border-light);
}
i {
font-size: 20px;
.add-button {
position: absolute;
top: var(--spacing-l);
right: var(--spacing-l);
top: var(--spectrum-alias-item-padding-l);
bottom: 0;
right: var(--spectrum-alias-item-padding-l);
}
i:hover {