diff --git a/packages/theme/src/Theme.svelte b/packages/theme/src/Theme.svelte index f79b909b99..936823c0a7 100644 --- a/packages/theme/src/Theme.svelte +++ b/packages/theme/src/Theme.svelte @@ -22,10 +22,10 @@ const currentFontSize = getCurrnetFontSize() const setRootColors = (theme: string) => { - document.body.setAttribute('class', `${theme} ${getCurrnetFontSize()}`) + document.documentElement.setAttribute('class', `${theme} ${getCurrnetFontSize()}`) } const setRootFontSize = (fontsize: string) => { - document.body.setAttribute('class', `${getCurrentTheme()} ${fontsize}`) + document.documentElement.setAttribute('class', `${getCurrentTheme()} ${fontsize}`) } setContext('theme', { diff --git a/packages/theme/styles/_layouts.scss b/packages/theme/styles/_layouts.scss new file mode 100644 index 0000000000..45d7134ae7 --- /dev/null +++ b/packages/theme/styles/_layouts.scss @@ -0,0 +1,93 @@ +// +// Copyright © 2021 Anticrm Platform Contributors. +// +// Licensed under the Eclipse Public License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. You may +// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// +// See the License for the specific language governing permissions and +// limitations under the License. +// + +/* CLEAR */ +button { + display: flex; + justify-content: center; + align-items: center; + padding: 0; + font-size: inherit; + background-color: transparent; + border: 1px solid transparent; + outline: none; + cursor: pointer; +} +audio, canvas, embed, iframe, img, object, svg, video { + display: block; + vertical-align: middle; +} +input:-webkit-autofill, +input:-webkit-autofill:hover, +input:-webkit-autofill:focus +input:-webkit-autofill, +textarea:-webkit-autofill, +textarea:-webkit-autofill:hover +textarea:-webkit-autofill:focus, +select:-webkit-autofill, +select:-webkit-autofill:hover, +select:-webkit-autofill:focus { + -webkit-text-fill-color: var(--theme-caption-color); + transition: background-color 5000s ease-in-out 0s; + background: transparent; +} + +/* Common */ +.flex { display: flex; } +.flex-center { + display: flex; + justify-content: center; + align-items: center; +} +.flex-between { + display: flex; + justify-content: space-between; + align-items: center; +} +.flex-row-center { + display: flex; + align-items: center; +} +.flex-row-reverse { + display: flex; + flex-direction: row-reverse; + align-items: center; +} +.flex-col { + display: flex; + flex-direction: column; +} +.flex-col-center { + display: flex; + flex-direction: column; + align-items: center; +} +.h-full { height: 100%; } +.square-36 { width: 2.25rem; height: 2.25rem; } + +/* Backgrounds & Colors */ +.background-theme-bg-color { background-color: var(--theme-bg-color); } +.background-highlight-red { background-color: var(--highlight-red); } +.background-button-bg-enabled { background-color: var(--theme-button-bg-enabled); } +.background-menu-divider { background-color: var(--theme-menu-divider); } +.background-primary-button-enabled { background-color: var(--primary-button-enabled); } + +.content-color { color: var(--theme-content-color); } +.content-trans-color { color: var(--theme-content-trans-color); } +.caption-color { color: var(--theme-caption-color); } + +.border-primary-button { border-color: var(--primary-button-border); } +.border-button-enabled { border: 1px solid var(--theme-button-border-enabled); } +.bottom-divider { border-bottom: 1px solid var(--theme-menu-divider); } diff --git a/packages/theme/styles/_tailwind.scss b/packages/theme/styles/_tailwind.scss new file mode 100644 index 0000000000..c571f37bea --- /dev/null +++ b/packages/theme/styles/_tailwind.scss @@ -0,0 +1,112 @@ +// +// Copyright © 2021 Anticrm Platform Contributors. +// +// Licensed under the Eclipse Public License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. You may +// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// +// See the License for the specific language governing permissions and +// limitations under the License. +// + +/* Position */ +.relative { position: relative; } +.absolute { position: absolute; } + +.top-3 { top: .75rem } +.right-3 { right: .75rem } + +/* Width & Height */ +.w-0 { width: 0; } +.w-2 { width: .5rem; } +.w-9 { width: 2.25rem; } +.w-10 { width: 2.5rem; } +.w-13 { width: 3.25rem; } // our +.w-20 { width: 5rem; } +.w-72 { width: 18rem; } +.w-full { width: 100%; } + +.h-0 { height: 0; } +.h-2 { height: .5rem; } +.h-9 { height: 2.25rem; } +.h-10 { height: 2.5rem; } +.h-12 { height: 3rem; } +.h-13 { height: 3.25rem; } // our +.h-18 { height: 4.5rem; } // our +.h-auto { height: auto; } +.h-px { height: 1px; } +.h-screen { height: 100vh; } + +/* Spacing */ +.mr-2 { margin-right: .5rem; } +.mb-2 { margin-bottom: .5rem; } +.mx-3 { margin-left: .75rem; margin-right: .75rem; } +.mr-3 { margin-right: .75rem; } +.mx-4 { margin-left: 1rem; margin-right: 1rem; } +.mr-4 { margin-right: 1rem; } +.my-5 { margin-top: 1.25rem; margin-bottom: 1.25rem; } +.my-6 { margin-top: 1.5rem; margin-bottom: 1.5rem; } +.mb-10 { margin-bottom: 2.5rem; } +.mx-10 { margin-left: 2.5rem; margin-right: 2.5rem; } +.ml-11 { margin-left: 2.75rem; } + +.p-0 { padding: 0; } +.pb-5 { padding-bottom: 1.25rem; } +.pr-8 { padding-right: 2rem; } +.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; } +.px-7 { padding-left: 1.75rem; padding-right: 1.75rem; } +.pl-10 { padding-left: 2.5rem; } + +/* Flex */ +.flex { display: flex; } +.flex-col { flex-direction: column; } +.flex-row-reverse { flex-direction: row-reverse; } +.justify-center { justify-content: center; } +.justify-between { justify-content: space-between; } +.items-center { align-items: center; } +.flex-grow { flex-grow: 1; } + +/* Grid */ +.grid { display: grid; } +.grid-flow-col { grid-auto-flow: column; } +.auto-cols-min { grid-auto-columns: min-content; } +.gap-3 { gap: .75rem; } + +/* Typography */ +.text-xs { font-size: .75rem; } +.text-sm { font-size: .875rem; } +.text-base { font-size: 1rem; } +.font-medium { font-weight: 500; } +.font-semibold { font-weight: 600; } +.text-center { text-align: center; } +.whitespace-nowrap { white-space: nowrap; } +.overflow-ellipsis { text-overflow: ellipsis; } + +/* Borders */ +.rounded { border-radius: .25rem; } +.rounded-lg { border-radius: .5rem; } +.rounded-xl { border-radius: .75rem; } +.rounded-3xl { border-radius: 1.5rem; } +.rounded-full { border-radius: 100%; } +.border { border-width: 1px; } +.border-solid { border-style: solid; } +.border-transparent { border-color: transparent; } +.outline-none { outline: none; } + +/* Backgrounds & Colors */ +.bg-transparent { background-color: transparent; } +.opacity-30 { opacity: .3; } +.opacity-60 { opacity: .6; } + +/* Others */ +.border-box { box-sizing: border-box; } +.cursor-pointer { cursor: pointer; } +.cursor-default { cursor: default; } +.overflow-hidden { overflow: hidden; } +.select-none { user-select: none; } +.visible { visibility: visible; } +.invisible { visibility: hidden; } diff --git a/packages/theme/styles/global.scss b/packages/theme/styles/global.scss index d3ed702e11..f2df36063a 100644 --- a/packages/theme/styles/global.scss +++ b/packages/theme/styles/global.scss @@ -14,6 +14,8 @@ // @import "./_colors.scss"; +@import "./_tailwind.scss"; +@import "./_layouts.scss"; @font-face { font-family: 'IBM Plex Sans'; @@ -81,13 +83,8 @@ border-radius: 4px; } -.small-font { - font-size: 12px; -} - -.normal-font { - font-size: 14px; -} +.normal-font { font-size: 16px; } +.small-font { font-size: 14px; } body { -webkit-font-smoothing: antialiased; @@ -95,8 +92,8 @@ body { text-rendering: optimizeLegibility; font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto; - font-size: 14px; font-weight: 400; + font-size: .875rem; color: var(--theme-content-color); background-color: var(--theme-menu-color); } diff --git a/packages/ui/src/components/ActionIcon.svelte b/packages/ui/src/components/ActionIcon.svelte index e491f254d6..25ba86e30e 100644 --- a/packages/ui/src/components/ActionIcon.svelte +++ b/packages/ui/src/components/ActionIcon.svelte @@ -42,16 +42,7 @@ +} + \ No newline at end of file diff --git a/packages/ui/src/components/Tooltip.svelte b/packages/ui/src/components/Tooltip.svelte index aae7b2a60c..b5d256324a 100644 --- a/packages/ui/src/components/Tooltip.svelte +++ b/packages/ui/src/components/Tooltip.svelte @@ -21,7 +21,7 @@ export let direction: string = 'top' -
+
diff --git a/packages/ui/src/components/internal/FontSizeSelector.svelte b/packages/ui/src/components/internal/FontSizeSelector.svelte index f7f971a1c9..7376379f48 100644 --- a/packages/ui/src/components/internal/FontSizeSelector.svelte +++ b/packages/ui/src/components/internal/FontSizeSelector.svelte @@ -5,23 +5,17 @@ const { currentFontSize, setFontSize } = getContext('fontsize') const fontsizes = ['small-font', 'normal-font'] + let fsLabel = currentFontSize - let current = fontsizes.indexOf(currentFontSize) + let current = fontsizes.indexOf(currentFontSize) function changeFontSize () { current++ + fsLabel = fontsizes[current % fontsizes.length] setFontSize(fontsizes[current % fontsizes.length]) } -
+
- - \ No newline at end of file diff --git a/packages/ui/src/components/internal/Root.svelte b/packages/ui/src/components/internal/Root.svelte index 049062b22e..21a06acaf7 100644 --- a/packages/ui/src/components/internal/Root.svelte +++ b/packages/ui/src/components/internal/Root.svelte @@ -34,11 +34,11 @@
-
-
+
+
-
+
@@ -58,7 +58,7 @@ {#if application} {:else} -
+
Application not found: {application}
{/if} @@ -73,7 +73,6 @@ position: relative; display: flex; flex-direction: column; - height: 100vh; .status-bar { @@ -81,49 +80,35 @@ min-width: 1200px; font-size: 14px; - .container { + .status-info { + flex-grow: 1; + text-align: center; + } + .clock { + margin: 0 40px 0 24px; + font-weight: 500; + font-size: 12px; + user-select: none; + } + .widget { display: flex; align-items: center; - height: 100%; - color: var(--theme-content-color); - - .status-messages { - flex-grow: 1; - text-align: center; - } - - .widgets { - display: flex; - align-items: center; - flex-direction: row-reverse; - - .clock { - margin: 0 40px 0 24px; - font-weight: 500; - font-size: 12px; - user-select: none; - } - .widget { - display: flex; - align-items: center; - justify-content: center; - width: 32px; - height: 32px; - opacity: .6; - } - } + justify-content: center; + width: 32px; + height: 32px; + opacity: .6; } } - .error { - margin-top: 45vh; - text-align: center; - } - .app { height: calc(100vh - #{$status-bar-height}); min-width: 1200px; min-height: 600px; + + .error { + margin-top: 45vh; + text-align: center; + } } } diff --git a/packages/ui/src/components/internal/ThemeSelector.svelte b/packages/ui/src/components/internal/ThemeSelector.svelte index 184bedfcde..172e89024d 100644 --- a/packages/ui/src/components/internal/ThemeSelector.svelte +++ b/packages/ui/src/components/internal/ThemeSelector.svelte @@ -14,14 +14,6 @@ } -
+
- - \ No newline at end of file diff --git a/plugins/chunter-assets/assets/icons.svg b/plugins/chunter-assets/assets/icons.svg index eac3e9160c..42c1f1d66b 100644 --- a/plugins/chunter-assets/assets/icons.svg +++ b/plugins/chunter-assets/assets/icons.svg @@ -1,6 +1,6 @@ - - + + diff --git a/plugins/chunter-resources/src/components/CreateChannel.svelte b/plugins/chunter-resources/src/components/CreateChannel.svelte index 2602641d9c..158918f298 100644 --- a/plugins/chunter-resources/src/components/CreateChannel.svelte +++ b/plugins/chunter-resources/src/components/CreateChannel.svelte @@ -51,19 +51,3 @@ - - - \ No newline at end of file diff --git a/plugins/login-resources/src/components/Form.svelte b/plugins/login-resources/src/components/Form.svelte index baa52f6906..11eac3bd7e 100644 --- a/plugins/login-resources/src/components/Form.svelte +++ b/plugins/login-resources/src/components/Form.svelte @@ -137,12 +137,6 @@ grid-column-start: 1; grid-column-end: 3; } - @media (max-width: 985px) { - .form-col { - grid-column-start: 1; - grid-column-end: 3; - } - } .send { margin-top: 36px; } diff --git a/plugins/login-resources/src/components/LoginApp.svelte b/plugins/login-resources/src/components/LoginApp.svelte index 4168030ac4..e69fd63b7d 100644 --- a/plugins/login-resources/src/components/LoginApp.svelte +++ b/plugins/login-resources/src/components/LoginApp.svelte @@ -20,12 +20,8 @@ let page = 'login' -
+
-
-
-
-
{#if page === 'login'} page = event.detail}/> {:else if page === 'signup'} @@ -44,39 +40,20 @@
\ No newline at end of file diff --git a/plugins/workbench-resources/src/components/Applications.svelte b/plugins/workbench-resources/src/components/Applications.svelte index bb57acd480..bf5a740bfa 100644 --- a/plugins/workbench-resources/src/components/Applications.svelte +++ b/plugins/workbench-resources/src/components/Applications.svelte @@ -39,26 +39,8 @@ -
+
{#each apps as app} -
- {navigateApp(app._id)}}/> -
+ {navigateApp(app._id)}}/> {/each}
- - \ No newline at end of file diff --git a/plugins/workbench-resources/src/components/Header.svelte b/plugins/workbench-resources/src/components/Header.svelte new file mode 100644 index 0000000000..86b1d49656 --- /dev/null +++ b/plugins/workbench-resources/src/components/Header.svelte @@ -0,0 +1,61 @@ + + + + +
+
+ {#if icon }{/if} + {label} +
+ {#if description }
{description}
{/if} +
+ + diff --git a/plugins/workbench-resources/src/components/NavHeader.svelte b/plugins/workbench-resources/src/components/NavHeader.svelte index cadac20fb4..1e3952ace6 100644 --- a/plugins/workbench-resources/src/components/NavHeader.svelte +++ b/plugins/workbench-resources/src/components/NavHeader.svelte @@ -14,53 +14,36 @@ --> -
-
- {title} -
- -
-
+
+ {label} +
\ No newline at end of file + diff --git a/plugins/workbench-resources/src/components/SpaceHeader.svelte b/plugins/workbench-resources/src/components/SpaceHeader.svelte index 584e7161eb..73b2bf367b 100644 --- a/plugins/workbench-resources/src/components/SpaceHeader.svelte +++ b/plugins/workbench-resources/src/components/SpaceHeader.svelte @@ -17,6 +17,7 @@ import type { Ref, Space } from '@anticrm/core' import { Icon, ActionIcon, Button } from '@anticrm/ui' import type { AnyComponent } from '@anticrm/ui' + import Header from './Header.svelte' import MoreH from './icons/MoreH.svelte' import Add from './icons/Add.svelte' import Star from './icons/Star.svelte' @@ -28,6 +29,7 @@ export let space: Ref | undefined export let createItemDialog: AnyComponent | undefined + export let divider: boolean = false const client = getClient() const query = createQuery() @@ -40,80 +42,28 @@ } -
+
{#if data} -
-
- - {data.name} -
-
{data.description}
-
- {#if createItemDialog} -
\ No newline at end of file + diff --git a/plugins/workbench-resources/src/components/SpaceView.svelte b/plugins/workbench-resources/src/components/SpaceView.svelte index 4deacaf760..b532612a87 100644 --- a/plugins/workbench-resources/src/components/SpaceView.svelte +++ b/plugins/workbench-resources/src/components/SpaceView.svelte @@ -47,24 +47,23 @@ let selected = 0 {#await getViewlets(client, _class)} ... {:then viewlets} -
{#if viewlets.length > 0} -
-
+
+
-
- {#each viewlets as viewlet, i} -
-
-
- {/each} +
+ {#each viewlets as viewlet, i} +
+
+
+ {/each} +
+
- -
{/if} -
+
-
+ {/await} diff --git a/plugins/workbench-resources/src/components/Workbench.svelte b/plugins/workbench-resources/src/components/Workbench.svelte index 788003088d..1d91c09180 100644 --- a/plugins/workbench-resources/src/components/Workbench.svelte +++ b/plugins/workbench-resources/src/components/Workbench.svelte @@ -63,26 +63,29 @@ {#if client} - - + + + + +
-
+
-
- Profile +
+ Profile
{#if navigator} -
- +
+
{/if} -
- +
+ {#if currentView && currentSpace} {/if} @@ -95,67 +98,44 @@ {/if} \ No newline at end of file + diff --git a/plugins/workbench-resources/src/components/navigator/ListItem.svelte b/plugins/workbench-resources/src/components/navigator/ListItem.svelte index 980e978ebd..a534eefed2 100644 --- a/plugins/workbench-resources/src/components/navigator/ListItem.svelte +++ b/plugins/workbench-resources/src/components/navigator/ListItem.svelte @@ -15,7 +15,7 @@ -
{if (node && !icon) collapsed = !collapsed; dispatch('click')}}> -
-
- {#if icon} - - {:else} - {#if collapsed}{:else}{/if} - {/if} -
- - {#if label} - {#each actions as action} -
- -
- {/each} - {#if notifications > 0 && collapsed} -
{notifications}
+
{ + if (node && !icon) collapsed = !collapsed + dispatch('click') + }} +> +
+ {#if icon} + + {:else} + {#if collapsed}{:else}{/if} {/if}
+ + {#if label} + {#each actions as action} +
+ +
+ {/each} + {#if notifications > 0 && collapsed} +
{notifications}
+ {/if}
{#if node && !icon} -
+
{/if} \ No newline at end of file diff --git a/plugins/workbench-resources/src/components/navigator/TreeSeparator.svelte b/plugins/workbench-resources/src/components/navigator/TreeSeparator.svelte index 69a58940f9..918fe2325a 100644 --- a/plugins/workbench-resources/src/components/navigator/TreeSeparator.svelte +++ b/plugins/workbench-resources/src/components/navigator/TreeSeparator.svelte @@ -13,14 +13,4 @@ // limitations under the License. --> -
- - \ No newline at end of file +