Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UI updates #7295

Open
wants to merge 5 commits into
base: develop
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion packages/theme/styles/_colors.scss
Original file line number Diff line number Diff line change
@@ -124,7 +124,7 @@
--theme-refinput-border: rgba(255, 255, 255, .1);

// Be aware to update defineAlpha() function in colors.ts
--theme-bg-color: #1A1A28;
--theme-bg-color: #14141f;
--theme-bg-accent-color: rgba(0, 0, 0, .08);
--theme-bg-dark-color: rgba(0, 0, 0, .2);
--theme-back-color: #0f0f18;
@@ -188,6 +188,7 @@
--theme-popup-shadow: 0 0 .5rem rgba(0, 0, 0, .2);
--theme-popup-checkicon: #FFFFFF99;
--theme-panel-color: #1A1A28;
--theme-workbench-color: #1A1A28;
--theme-calendar-today-color: #fff;
--theme-calendar-holiday-color: #eb5757;
--theme-calendar-weekend-color: rgba(242, 153, 74, 1);
@@ -447,6 +448,7 @@
--theme-popup-shadow: 0 0 .5rem rgba(0, 0, 0, .2);
--theme-popup-checkicon: #205DC2;
--theme-panel-color: #FFFFFF;
--theme-workbench-color: #FFFFFF;
--theme-calendar-today-color: #000;
--theme-calendar-holiday-color: #eb5757;
--theme-calendar-weekend-color: rgba(242, 153, 74, 1);
13 changes: 9 additions & 4 deletions packages/theme/styles/common.scss
Original file line number Diff line number Diff line change
@@ -113,8 +113,9 @@
flex-direction: column;
min-width: var(--app-panel-width);
width: var(--app-panel-width);
height: 100%;
border-right: 1px solid var(--theme-navpanel-divider);
margin: var(--spacing-1);
border: 1px solid var(--theme-divider-color);
border-radius: var(--medium-BorderRadius) !important;
}
&.horizonatl {
min-height: var(--app-panel-width);
@@ -130,7 +131,6 @@
.antiPanel-navigator,
.antiPanel-component {
display: flex;
height: 100%;
min-height: 0;

&.header { background-color: var(--theme-comp-header-color); }
@@ -142,7 +142,12 @@
.antiPanel-navigator {
position: relative;

&:not(.second) { background-color: var(--theme-navpanel-color); }
&:not(.second) {
background-color: var(--theme-workbench-color);
margin-right: var(--spacing-2);
border: 1px solid var(--theme-divider-color);
border-radius: var(--small-focus-BorderRadius);
}
&:not(.right) {
min-width: 12.5rem;
max-width: 22.5rem;
3 changes: 2 additions & 1 deletion packages/theme/styles/components.scss
Original file line number Diff line number Diff line change
@@ -18,18 +18,19 @@
display: flex;
flex-direction: column;
flex-grow: 1;
height: 100%;
min-height: 0;
min-width: 0;
border: 1px solid var(--theme-divider-color); // var(--global-surface-02-BorderColor);
border-radius: var(--small-focus-BorderRadius);
padding: var(--spacing-2);

&:not(.modal) {
background-color: var(--theme-panel-color); // var(--global-surface-02-BackgroundColor);
}
&.modal {
overflow: hidden;
background-color: var(--theme-comp-header-color); // var(--global-surface-02-BackgroundColor);
margin-left: var(--spacing-2);
}
&.beforeAside {
border-right: none;
2 changes: 1 addition & 1 deletion packages/theme/styles/global.scss
Original file line number Diff line number Diff line change
@@ -77,7 +77,7 @@
scrollbar-color: var(--theme-navpanel-divider) transparent;
scrollbar-width: none;
--body-font-size: .875rem;
--status-bar-height: 36px;
--status-bar-height: 42px;
--status-bar-normal-height: 36px;
--panel-aside-width: 25rem; // 20rem;
--font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto;
1 change: 0 additions & 1 deletion packages/theme/styles/panel.scss
Original file line number Diff line number Diff line change
@@ -20,7 +20,6 @@
height: 100%;
min-width: 0;
min-height: 0;
background-color: var(--theme-navpanel-color); // var(--global-surface-01-BackgroundColor);
border-radius: 0 var(--small-focus-BorderRadius) var(--small-focus-BorderRadius) 0;

// .antiPanel-navigator {
2 changes: 2 additions & 0 deletions packages/ui/src/components/internal/Root.svelte
Original file line number Diff line number Diff line change
@@ -280,6 +280,8 @@
font-size: 0.75rem;
line-height: 150%;
background-color: var(--theme-statusbar-color);
margin: var(--spacing-2) var(--spacing-2) 0 var(--spacing-2);
border-radius: var(--medium-focus-BorderRadius);
// border-bottom: 1px solid var(--theme-navpanel-divider);

.history-box {
16 changes: 14 additions & 2 deletions plugins/time-resources/src/components/PlanView.svelte
Original file line number Diff line number Diff line change
@@ -86,10 +86,10 @@

{#if $deviceInfo.navigator.visible}
<ToDosNavigator bind:mode bind:tag bind:currentDate />
<Separator name={'time'} float={$deviceInfo.navigator.float} index={0} color={'var(--theme-divider-color)'} />
<Separator name={'time'} float={$deviceInfo.navigator.float} index={0} separatorSize={0} />
{/if}
<div
class="flex-col w-full clear-mins mobile-wrapper"
class="antiPanel-PlanView flex-col clear-mins"
class:left-divider={!$deviceInfo.navigator.visible}
bind:this={mainPanel}
>
@@ -105,3 +105,15 @@
on:dragDrop={drop}
/>
{/if}

<style lang="scss">
.antiPanel-PlanView {
display: flex;
flex-direction: column;
flex-grow: 1;
background-color: var(--theme-workbench-color);
border: 1px solid var(--theme-divider-color);
border-radius: var(--small-focus-BorderRadius);
min-width: 320px;
}
</style>
Original file line number Diff line number Diff line change
@@ -175,7 +175,7 @@
</script>

<div
class="hulyComponent modal"
class="hulyComponent modal margin-left-2"
bind:this={element}
use:resizeObserver={(element) => {
showLabel = showLabel ? element.clientWidth > rem(3.5) + 399 : element.clientWidth > rem(3.5) + 400
18 changes: 11 additions & 7 deletions plugins/workbench-resources/src/components/Workbench.svelte
Original file line number Diff line number Diff line change
@@ -941,6 +941,14 @@
<div class="cover shown" on:click={() => ($deviceInfo.navigator.visible = false)} />
{/if}
{#if mainNavigator}
<Separator
name={'workbench'}
float={$deviceInfo.navigator.float}
index={0}
color={'transparent'}
separatorSize={0}
short
/>
<div
class="antiPanel-navigator no-print {$deviceInfo.navigator.direction === 'horizontal'
? 'portrait'
@@ -1088,23 +1096,18 @@
min-width: 0;
min-height: 0;
width: 100%;
height: 100%;
background-color: var(--theme-panel-color);
touch-action: none;
margin: var(--spacing-1);

&.inner {
background-color: var(--theme-navpanel-color);

&.rounded {
border-radius: 0 var(--medium-BorderRadius) var(--medium-BorderRadius) 0;
border-radius: var(--medium-BorderRadius);
}
}
&:not(.inner)::after {
position: absolute;
content: '';
inset: 0;
border: 1px solid var(--theme-divider-color);
border-radius: var(--medium-BorderRadius);
pointer-events: none;
}
.antiPanel-application.horizontal {
@@ -1114,6 +1117,7 @@
.antiPanel-application:not(.horizontal) {
border-radius: var(--medium-BorderRadius) 0 0 var(--medium-BorderRadius);
border-right: none;
background-color: var(--theme-panel-color);
}
}

Original file line number Diff line number Diff line change
@@ -158,7 +158,6 @@
min-width: 0;
min-height: 0;
background-color: var(--theme-panel-color);

border-left: none;
}

Original file line number Diff line number Diff line change
@@ -98,10 +98,10 @@
flex-direction: column;
padding-block: var(--spacing-2);
height: 100%;
width: 3.5rem;
width: var(--app-panel-width);
min-width: 3.5rem;
max-width: 3.5rem;
background-color: var(--theme-navpanel-color);
background-color: var(--theme-workbench-color);
border-radius: 0 var(--medium-BorderRadius) var(--medium-BorderRadius) 0;
overflow-y: auto;
}