mirror of
https://github.com/hcengineering/platform.git
synced 2024-12-22 11:01:54 +03:00
Starting px to em. (#18)
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov
GitHub
parent
2dcc71baed
commit
1c0ccbeef2
@ -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', {
|
||||
|
||||
93
packages/theme/styles/_layouts.scss
Normal file
93
packages/theme/styles/_layouts.scss
Normal file
@ -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); }
|
||||
112
packages/theme/styles/_tailwind.scss
Normal file
112
packages/theme/styles/_tailwind.scss
Normal file
@ -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; }
|
||||
@ -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);
|
||||
}
|
||||
|
||||
@ -42,16 +42,7 @@
|
||||
|
||||
<style lang="scss">
|
||||
.button {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 4px;
|
||||
outline: none;
|
||||
background-color: transparent;
|
||||
cursor: pointer;
|
||||
font-size: inherit;
|
||||
|
||||
.icon {
|
||||
opacity: .3;
|
||||
|
||||
@ -19,12 +19,13 @@
|
||||
|
||||
export let label: IntlString
|
||||
export let primary: boolean = false
|
||||
export let size: 'small' | 'medium' = 'medium'
|
||||
export let disabled: boolean = false
|
||||
export let loading: boolean = false
|
||||
export let width: string | undefined = undefined
|
||||
</script>
|
||||
|
||||
<button class="button" class:primary disabled={disabled || loading} style={width ? 'width: ' + width : ''} on:click>
|
||||
<button class="button {size}" class:primary disabled={disabled || loading} style={width ? 'width: ' + width : ''} on:click>
|
||||
{#if loading}
|
||||
<Spinner />
|
||||
{:else}
|
||||
@ -33,22 +34,16 @@
|
||||
</button>
|
||||
|
||||
<style lang="scss">
|
||||
.small { height: 2.5rem; }
|
||||
.medium { height: 3rem; }
|
||||
.button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 48px;
|
||||
padding: 0 25px;
|
||||
color: var(--theme-caption-color);
|
||||
background-color: var(--theme-button-bg-enabled);
|
||||
border: 1px solid var(--theme-button-border-enabled);
|
||||
border-radius: 12px;
|
||||
outline: none;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
padding: 0 1.5rem;
|
||||
font-weight: 600;
|
||||
background-color: var(--theme-button-bg-enabled);
|
||||
color: var(--theme-caption-color);
|
||||
border: 1px solid var(--theme-button-border-enabled);
|
||||
border-radius: 0.75rem;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--theme-button-bg-hovered);
|
||||
border-color: var(--theme-button-border-hovered);
|
||||
@ -72,14 +67,15 @@
|
||||
.primary {
|
||||
background-color: var(--primary-button-enabled);
|
||||
border-color: var(--primary-button-border);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--primary-button-hovered);
|
||||
border-color: var(--primary-button-border);
|
||||
}
|
||||
&:focus {
|
||||
background-color: var(--primary-button-focused);
|
||||
border-color: var(--primary-button-focused-border);
|
||||
box-shadow: 0 0 0 2px var(--primary-button-outline);
|
||||
border: 1px solid var(--primary-button-focused-border);
|
||||
box-shadow: 0 0 0 3px var(--primary-button-outline);
|
||||
}
|
||||
&:active {
|
||||
background-color: var(--primary-button-pressed);
|
||||
|
||||
@ -31,7 +31,7 @@
|
||||
const dispatch = createEventDispatcher()
|
||||
</script>
|
||||
|
||||
<div class="container">
|
||||
<div class="dialog-container">
|
||||
<form class="dialog" on:submit|preventDefault={() => { okAction(); dispatch('close') }}>
|
||||
<div class="header">
|
||||
<div class="title"><Label {label}/></div>
|
||||
@ -48,7 +48,7 @@
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
.dialog-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
@ -44,7 +44,7 @@
|
||||
})
|
||||
</script>
|
||||
|
||||
<div class="editbox" style="{width ? 'width: ' + width : ''}"
|
||||
<div class="editbox" style="min-width: ; {width ? 'width: ' + width : ''}"
|
||||
on:click={() => { input.focus() }}
|
||||
>
|
||||
<div class="text" bind:this={text}></div>
|
||||
@ -57,7 +57,6 @@
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
.editbox {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -110,7 +109,6 @@
|
||||
width: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -21,7 +21,7 @@
|
||||
export let direction: string = 'top'
|
||||
</script>
|
||||
|
||||
<div class="container">
|
||||
<div class="tooltip-container">
|
||||
<div class="trigger"><slot/></div>
|
||||
<div class="tooltip {direction}">
|
||||
<Label label={label}/>
|
||||
@ -29,7 +29,7 @@
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
.tooltip-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
@ -22,12 +22,6 @@
|
||||
|
||||
<div>
|
||||
<span>{hours}</span>
|
||||
<span class:h={!delimiter}>:</span>
|
||||
<span style="visibility: {delimiter ? 'visible' : 'hidden'}">:</span>
|
||||
<span>{minutes}</span>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.h {
|
||||
visibility: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -5,23 +5,17 @@
|
||||
const { currentFontSize, setFontSize } = getContext('fontsize')
|
||||
|
||||
const fontsizes = ['small-font', 'normal-font']
|
||||
let fsLabel = currentFontSize
|
||||
|
||||
let current = fontsizes.indexOf(currentFontSize)
|
||||
|
||||
function changeFontSize () {
|
||||
current++
|
||||
fsLabel = fontsizes[current % fontsizes.length]
|
||||
setFontSize(fontsizes[current % fontsizes.length])
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="container" on:click={changeFontSize}>
|
||||
<div class="flex-center" on:click={changeFontSize}>
|
||||
<FontSize size={'small'}/>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 56px;
|
||||
}
|
||||
</style>
|
||||
@ -34,11 +34,11 @@
|
||||
<Theme>
|
||||
<div id="ui-root">
|
||||
<div class="status-bar">
|
||||
<div class="container">
|
||||
<div class="status-messages">
|
||||
<div class="flex-row-center h-full content-color">
|
||||
<div class="status-info">
|
||||
<StatusComponent {status} />
|
||||
</div>
|
||||
<div class="widgets">
|
||||
<div class="flex-row-reverse">
|
||||
<div class="clock">
|
||||
<Clock />
|
||||
</div>
|
||||
@ -58,7 +58,7 @@
|
||||
{#if application}
|
||||
<Component is={application} props={{}} />
|
||||
{:else}
|
||||
<div class="caption-1 error">
|
||||
<div class="error">
|
||||
Application not found: {application}
|
||||
</div>
|
||||
{/if}
|
||||
@ -73,7 +73,6 @@
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
height: 100vh;
|
||||
|
||||
.status-bar {
|
||||
@ -81,22 +80,10 @@
|
||||
min-width: 1200px;
|
||||
font-size: 14px;
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
color: var(--theme-content-color);
|
||||
|
||||
.status-messages {
|
||||
.status-info {
|
||||
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;
|
||||
@ -112,18 +99,16 @@
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -14,14 +14,6 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="container" on:click={changeTheme}>
|
||||
<div class="flex-center" on:click={changeTheme}>
|
||||
<Mute size={'small'}/>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 56px;
|
||||
}
|
||||
</style>
|
||||
@ -1,6 +1,6 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
||||
<symbol id="chunter" viewBox="0 0 32 32">
|
||||
<path d="M25.9,14.6C25.7,9.8,21.9,6,17,5.7h-0.5c0,0,0,0,0,0c-1.4,0-2.9,0.3-4.2,1c-3.2,1.6-5.2,4.8-5.2,8.4c0,1.4,0.3,2.7,0.9,4 l-1.9,5.7c-0.1,0.2,0,0.5,0.1,0.6c0.1,0.1,0.3,0.2,0.4,0.2c0.1,0,0.1,0,0.2,0l5.7-1.9c1.2,0.6,2.6,0.9,4,0.9c0,0,0,0,0,0 c3.6,0,6.8-2,8.4-5.2c0.7-1.3,1-2.8,1-4.2L25.9,14.6z M24.7,15.1C24.7,15.1,24.7,15.1,24.7,15.1c0,1.3-0.3,2.5-0.9,3.7 c-1.4,2.8-4.2,4.5-7.3,4.5c0,0,0,0,0,0c-1.3,0-2.5-0.3-3.6-0.9c-0.1-0.1-0.3-0.1-0.5,0l-4.8,1.6l1.6-4.8c0.1-0.2,0-0.3,0-0.5 c-0.6-1.1-0.9-2.4-0.9-3.7c0-3.1,1.7-5.9,4.5-7.3c1.1-0.6,2.4-0.9,3.6-0.9c0,0,0,0,0,0l0.5,0c4.2,0.2,7.5,3.6,7.7,7.7V15.1z"/>
|
||||
<symbol id="chunter" viewBox="0 0 24 24">
|
||||
<path d="M3,21.6c-0.2,0-0.3-0.1-0.4-0.2c-0.2-0.2-0.2-0.4-0.1-0.6l1.8-5.4c-0.6-1.2-0.8-2.5-0.8-3.8c0-3.4,1.9-6.5,4.9-8 c1.2-0.6,2.6-0.9,4-0.9h0.5c4.6,0.3,8.2,3.9,8.5,8.4l0,0.5c0,1.4-0.3,2.8-0.9,4c-1.5,3-4.6,4.9-8,4.9c0,0,0,0,0,0 c-1.3,0-2.6-0.3-3.8-0.8l-5.4,1.8C3.1,21.6,3.1,21.6,3,21.6z M12.3,3.9c-1.2,0-2.4,0.3-3.4,0.8c-2.6,1.3-4.3,4-4.3,6.9 c0,1.2,0.3,2.4,0.8,3.5c0.1,0.1,0.1,0.3,0,0.5l-1.5,4.5l4.5-1.5c0.2-0.1,0.3,0,0.5,0c1.1,0.5,2.2,0.8,3.5,0.8c3,0,5.6-1.6,6.9-4.3 c0.5-1.1,0.8-2.3,0.8-3.5c0,0,0,0,0,0v-0.5c-0.2-3.9-3.4-7-7.3-7.3L12.3,3.9C12.3,3.9,12.3,3.9,12.3,3.9z M21.3,11.7L21.3,11.7 L21.3,11.7z"/>
|
||||
</symbol>
|
||||
|
||||
<symbol id="hashtag" viewBox="0 0 16 16">
|
||||
|
||||
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.7 KiB |
@ -51,19 +51,3 @@
|
||||
<CheckBoxList label={'Add a To Do'} editable />
|
||||
</Section>
|
||||
</Dialog>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
.content {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
row-gap: 20px;
|
||||
|
||||
.row {
|
||||
grid-column-start: 1;
|
||||
grid-column-end: 3;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -20,12 +20,8 @@
|
||||
let page = 'login'
|
||||
</script>
|
||||
|
||||
<div class="container">
|
||||
<div class="panel-container">
|
||||
<div class="panel">
|
||||
<div class="back-panel-dark"/>
|
||||
<div class="back-panel-light">
|
||||
<div class="bg-noise opacity-3"/>
|
||||
</div>
|
||||
{#if page === 'login'}
|
||||
<LoginForm on:switch={(event) => page = event.detail}/>
|
||||
{:else if page === 'signup'}
|
||||
@ -44,39 +40,20 @@
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
@import "@anticrm/theme/styles/mixins.scss";
|
||||
// @import "@anticrm/theme/styles/mixins.scss";
|
||||
|
||||
.bg-noise {
|
||||
@include bg-fullsize;
|
||||
background: url('../../img/noise.png');
|
||||
z-index: -1;
|
||||
}
|
||||
.opacity-3 {
|
||||
opacity: 0.03;
|
||||
}
|
||||
|
||||
.container {
|
||||
.panel-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 100%;
|
||||
padding: 0px 20px 20px 20px;
|
||||
|
||||
.panel {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin-right: 20px;
|
||||
width: 668px;
|
||||
height: 100%;
|
||||
border-radius: 20px;
|
||||
|
||||
.back-panel-light {
|
||||
@include bg-layer(linear-gradient(158.74deg, rgba(205, 166, 255, 0.12) 5.62%, rgba(255, 255, 255, 0) 97.09%), 0.3);
|
||||
z-index: -1;
|
||||
}
|
||||
.back-panel-dark {
|
||||
@include bg-layer(#1D1D23, 0.5);
|
||||
z-index: -1;
|
||||
}
|
||||
background-color: var(--theme-menu-selection);
|
||||
}
|
||||
|
||||
.intro {
|
||||
|
||||
@ -18,23 +18,16 @@
|
||||
export let status: string = 'away'
|
||||
</script>
|
||||
|
||||
<div class="activity {status}">
|
||||
<div class="status"></div>
|
||||
<div class="flex-center {status}" style="min-height: 5rem;">
|
||||
<div class="status"/>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.activity {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 96px;
|
||||
min-height: 96px;
|
||||
.status {
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
width: .5rem;
|
||||
height: .5rem;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
.active .status {
|
||||
background-color: var(--activity-status-active);
|
||||
}
|
||||
|
||||
@ -25,66 +25,70 @@
|
||||
</script>
|
||||
|
||||
<button class="app" class:selected={selected} on:click={action}>
|
||||
{#if notify}
|
||||
<div class="marker"/>
|
||||
{/if}
|
||||
<Tooltip label={label} direction="right">
|
||||
<div class="container" class:noty={notify}>
|
||||
<div class="icon-container" class:noty={notify}>
|
||||
<Icon icon={icon} size={'large'}/>
|
||||
</div>
|
||||
</Tooltip>
|
||||
{#if notify}
|
||||
<div class="marker"/>
|
||||
{/if}
|
||||
</button>
|
||||
|
||||
<style lang="scss">
|
||||
.app {
|
||||
position: relative;
|
||||
padding: 0;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
min-width: 48px;
|
||||
min-height: 48px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
outline: none;
|
||||
width: 3.25rem;
|
||||
height: 3.25rem;
|
||||
background-color: transparent;
|
||||
border: 1px solid transparent;
|
||||
border-radius: .5rem;
|
||||
cursor: pointer;
|
||||
font-size: inherit;
|
||||
outline: none;
|
||||
|
||||
.marker {
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
left: 28px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background-color: var(--highlight-red);
|
||||
}
|
||||
.container {
|
||||
.icon-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
width: 3.25rem;
|
||||
height: 3.25rem;
|
||||
opacity: .3;
|
||||
&.noty {
|
||||
clip-path: url(#notify);
|
||||
|
||||
.normal-font &.noty {
|
||||
clip-path: url(#notify-normal);
|
||||
}
|
||||
.small-font &.noty {
|
||||
clip-path: url(#notify-small);
|
||||
}
|
||||
}
|
||||
&:hover .container {
|
||||
|
||||
&:hover .icon-container {
|
||||
opacity: 1;
|
||||
}
|
||||
&:focus {
|
||||
border: 1px solid var(--primary-button-focused-border);
|
||||
box-shadow: 0 0 0 3px var(--primary-button-outline);
|
||||
.container {
|
||||
.icon-container {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background-color: var(--theme-menu-selection);
|
||||
.container {
|
||||
.icon-container {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.marker {
|
||||
position: absolute;
|
||||
top: .75rem;
|
||||
right: .75rem;
|
||||
width: .5rem;
|
||||
height: .5rem;
|
||||
border-radius: 50%;
|
||||
background-color: var(--highlight-red);
|
||||
}
|
||||
</style>
|
||||
@ -39,26 +39,8 @@
|
||||
|
||||
</script>
|
||||
|
||||
<div class="app-icons">
|
||||
<div class="flex-col">
|
||||
{#each apps as app}
|
||||
<div class="app">
|
||||
<AppItem selected={app._id === active} icon={app.icon} label={app.label} notify action={async () => {navigateApp(app._id)}}/>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.app-icons {
|
||||
.app {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
font-size: inherit;
|
||||
}
|
||||
.app + .app {
|
||||
margin-top: 4px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
61
plugins/workbench-resources/src/components/Header.svelte
Normal file
61
plugins/workbench-resources/src/components/Header.svelte
Normal file
@ -0,0 +1,61 @@
|
||||
<!--
|
||||
// Copyright © 2020 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.
|
||||
-->
|
||||
|
||||
<script lang="ts">
|
||||
import type { IntlString, Asset } from '@anticrm/platform'
|
||||
import { Icon } from '@anticrm/ui'
|
||||
|
||||
export let icon: Asset | undefined
|
||||
export let label: IntlString
|
||||
export let description: IntlString | undefined
|
||||
</script>
|
||||
|
||||
<div class="container">
|
||||
<div class="flex-center">
|
||||
{#if icon }<span class="icon"><Icon {icon} size={'small'}/></span>{/if}
|
||||
<span class="label">{label}</span>
|
||||
</div>
|
||||
{#if description }<div class="description">{description}</div>{/if}
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
width: 100%;
|
||||
|
||||
.icon {
|
||||
margin-right: .5rem;
|
||||
opacity: .6;
|
||||
}
|
||||
.label, .description {
|
||||
flex-grow: 1;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
user-select: none;
|
||||
}
|
||||
.label {
|
||||
font-weight: 500;
|
||||
font-size: 1rem;
|
||||
color: var(--theme-caption-color);
|
||||
}
|
||||
.description {
|
||||
font-size: .75rem;
|
||||
color: var(--theme-content-trans-color);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -14,53 +14,36 @@
|
||||
-->
|
||||
|
||||
<script lang="ts">
|
||||
import type { IntlString } from '@anticrm/platform'
|
||||
import { ActionIcon } from '@anticrm/ui'
|
||||
import MoreH from './icons/MoreH.svelte'
|
||||
|
||||
export let title: string = 'Company name'
|
||||
export let label: IntlString
|
||||
export let action: () => Promise<void>
|
||||
</script>
|
||||
|
||||
<div class="navigator-header">
|
||||
<div class="title">
|
||||
<span>{title}</span>
|
||||
<div class="arrow">
|
||||
<ActionIcon icon={MoreH} size={'small'}/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<span class="label">{label}</span>
|
||||
<ActionIcon label={'More...'} icon={MoreH} size={'small'} {action}/>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.navigator-header {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 72px;
|
||||
padding: 20px 28px;
|
||||
.title {
|
||||
.container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
span {
|
||||
padding: 0 1.75rem;
|
||||
height: 4.5rem;
|
||||
|
||||
.label {
|
||||
flex-grow: 1;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
line-height: 150%;
|
||||
color: var(--theme-caption-color);
|
||||
overflow: hidden;
|
||||
user-select: none;
|
||||
}
|
||||
.arrow {
|
||||
width: 16px;
|
||||
min-width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 4px;
|
||||
margin-left: 16px;
|
||||
}
|
||||
font-weight: 500;
|
||||
font-size: 1rem;
|
||||
color: var(--theme-caption-color);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -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<Space> | undefined
|
||||
export let createItemDialog: AnyComponent | undefined
|
||||
export let divider: boolean = false
|
||||
|
||||
const client = getClient()
|
||||
const query = createQuery()
|
||||
@ -40,80 +42,28 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="header">
|
||||
<div class="container" class:bottom-divider={divider}>
|
||||
{#if data}
|
||||
<div class="caption">
|
||||
<div class="title">
|
||||
<span><Icon icon={classIcon(client, data._class)} size={'small'}/></span>
|
||||
{data.name}
|
||||
</div>
|
||||
<div class="subtitle">{data.description}</div>
|
||||
</div>
|
||||
<Header icon={classIcon(client, data._class)} label={data.name} description={data.description} />
|
||||
{#if createItemDialog}
|
||||
<Button label="Create" primary={true} on:click={showCreateDialog}/>
|
||||
<Button label="Create" primary={true} size={'small'} on:click={showCreateDialog}/>
|
||||
{/if}
|
||||
<div class="buttons">
|
||||
<div class="button"><ActionIcon icon={Star} size={'small'}/></div>
|
||||
<div class="button"><ActionIcon icon={Add} size={'small'}/></div>
|
||||
<div class="button"><ActionIcon icon={MoreH} size={'small'}/></div>
|
||||
</div>
|
||||
<ActionIcon label={'Favorite'} icon={Star} size={'small'}/>
|
||||
<ActionIcon label={'Create'} icon={Add} size={'small'}/>
|
||||
<ActionIcon label={'More...'} icon={MoreH} size={'small'}/>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.header {
|
||||
width: 100%;
|
||||
height: 72px;
|
||||
min-height: 72px;
|
||||
border-bottom: 1px solid var(--theme-menu-divider);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.container {
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
grid-auto-flow: column;
|
||||
grid-auto-columns: min-content;
|
||||
gap: .75rem;
|
||||
align-items: center;
|
||||
padding: 0 32px 0 40px;
|
||||
|
||||
.caption {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
color: var(--theme-caption-color);
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
user-select: none;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
|
||||
span {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
.subtitle {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
opacity: .3;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
margin-left: 24px;
|
||||
.button {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.button + .button {
|
||||
margin-left: 16px;
|
||||
}
|
||||
}
|
||||
padding: 0 2rem 0 2.5rem;
|
||||
height: 4.5rem;
|
||||
min-height: 4.5rem;
|
||||
}
|
||||
</style>
|
||||
@ -47,15 +47,14 @@ let selected = 0
|
||||
{#await getViewlets(client, _class)}
|
||||
...
|
||||
{:then viewlets}
|
||||
<div class="container">
|
||||
|
||||
{#if viewlets.length > 0}
|
||||
<div class="toolbar">
|
||||
<div style="flex-grow: 1" />
|
||||
<div style="flex-grow: 1;" />
|
||||
|
||||
<div class="viewSelection-container">
|
||||
<div class="flex">
|
||||
{#each viewlets as viewlet, i}
|
||||
<div class="button" class:selected={i === selected}>
|
||||
<div class="btn" class:selected>
|
||||
<div class="icon"><Icon icon={viewlet.$lookup?.descriptor?.icon} size={'small'}/></div>
|
||||
</div>
|
||||
{/each}
|
||||
@ -64,7 +63,7 @@ let selected = 0
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="content">
|
||||
<div class="container">
|
||||
<Component is={viewlets[selected].$lookup?.descriptor?.component} props={ {
|
||||
_class,
|
||||
space,
|
||||
@ -73,40 +72,36 @@ let selected = 0
|
||||
config: viewlets[selected].config
|
||||
} } />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/await}
|
||||
|
||||
<style lang="scss">
|
||||
.viewSelection-container {
|
||||
.toolbar {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 32px;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 1.25rem 2.5rem;
|
||||
height: 2.5rem;
|
||||
|
||||
.button {
|
||||
.btn {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 8px;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
background-color: transparent;
|
||||
border-radius: .5rem;
|
||||
cursor: pointer;
|
||||
|
||||
.icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.icon { opacity: .3; }
|
||||
&:hover .icon {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background-color: var(--theme-button-bg-enabled);
|
||||
cursor: default;
|
||||
.icon {
|
||||
opacity: 0.8;
|
||||
&:hover .icon {
|
||||
opacity: .8;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -114,24 +109,7 @@ let selected = 0
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
margin: 0 2.5rem 2.5rem;
|
||||
height: 100%;
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: auto;
|
||||
min-height: 40px;
|
||||
height: 40px;
|
||||
margin: 40px 40px 0;
|
||||
}
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: auto;
|
||||
height: 100%;
|
||||
margin: 40px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -63,25 +63,28 @@
|
||||
|
||||
{#if client}
|
||||
<svg class="mask">
|
||||
<clipPath id="notify">
|
||||
<path d="M0,0v48h48V0H0z M32,25c-3.9,0-7-3.1-7-7s3.1-7,7-7s7,3.1,7,7S35.9,25,32,25z"/>
|
||||
<clipPath id="notify-normal">
|
||||
<path d="M0,0v52.5h52.5V0H0z M34,23.2c-3.2,0-5.8-2.6-5.8-5.8c0-3.2,2.6-5.8,5.8-5.8c3.2,0,5.8,2.6,5.8,5.8 C39.8,20.7,37.2,23.2,34,23.2z"/>
|
||||
</clipPath>
|
||||
<clipPath id="notify-small">
|
||||
<path d="M0,0v45h45V0H0z M29.5,20c-2.8,0-5-2.2-5-5s2.2-5,5-5s5,2.2,5,5S32.3,20,29.5,20z"/>
|
||||
</clipPath>
|
||||
</svg>
|
||||
<div class="container">
|
||||
<div class="applications">
|
||||
<div class="panel-app">
|
||||
<ActivityStatus status="active"/>
|
||||
<Applications active={currentApp}/>
|
||||
<div class="profile">
|
||||
<img class="avatar" src={avatar} alt="Profile"/>
|
||||
<div class="flex-center" style="min-height: 6.25rem;">
|
||||
<img class="square-36" src={avatar} alt="Profile"/>
|
||||
</div>
|
||||
</div>
|
||||
{#if navigator}
|
||||
<div class="navigator">
|
||||
<NavHeader/>
|
||||
<div class="panel-navigator">
|
||||
<NavHeader label={'Chat'}/>
|
||||
<Navigator model={navigatorModel}/>
|
||||
</div>
|
||||
{/if}
|
||||
<div class="component">
|
||||
<div class="panel-component">
|
||||
<SpaceHeader space={currentSpace} {createItemDialog} />
|
||||
{#if currentView && currentSpace}
|
||||
<SpaceView space={currentSpace} _class={currentView.class} options={currentView.options} />
|
||||
@ -95,67 +98,44 @@
|
||||
{/if}
|
||||
|
||||
<style lang="scss">
|
||||
@mixin panel($bg-color) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
border-radius: 20px;
|
||||
background-color: $bg-color;
|
||||
}
|
||||
.mask {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 100%;
|
||||
padding-bottom: 20px;
|
||||
padding-bottom: 1.25rem;
|
||||
|
||||
.applications {
|
||||
@include panel('transparent');
|
||||
.panel-app {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
min-width: 96px;
|
||||
|
||||
.profile {
|
||||
min-width: 5rem;
|
||||
width: 5rem;
|
||||
height: 100%;
|
||||
border-radius: 1.25rem;
|
||||
}
|
||||
.panel-navigator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100px;
|
||||
min-height: 100px;
|
||||
.avatar {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
flex-direction: column;
|
||||
margin-right: 1rem;
|
||||
min-width: 18rem;
|
||||
width: 18rem;
|
||||
height: 100%;
|
||||
border-radius: 1.25rem;
|
||||
background-color: var(--theme-bg-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navigator {
|
||||
@include panel(var(--theme-bg-color));
|
||||
width: 280px;
|
||||
min-width: 280px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
// .externalComponent {
|
||||
// @include panel(var(--theme-bg-color));
|
||||
// width: 100%;
|
||||
// margin-right: 20px;
|
||||
// }
|
||||
|
||||
.component {
|
||||
@include panel(var(--theme-bg-color));
|
||||
.panel-component {
|
||||
flex-grow: 1;
|
||||
margin-right: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-right: 1rem;
|
||||
height: 100%;
|
||||
border-radius: 1.25rem;
|
||||
background-color: var(--theme-bg-color);
|
||||
}
|
||||
|
||||
// .aside {
|
||||
// @include panel(var(--theme-bg-color));
|
||||
// min-width: 400px;
|
||||
// max-width: 400px;
|
||||
// margin-right: 20px;
|
||||
// }
|
||||
}
|
||||
</style>
|
||||
@ -15,7 +15,7 @@
|
||||
|
||||
<script lang="ts">
|
||||
import TreeElement from './TreeElement.svelte'
|
||||
import type { Asset } from '@anticrm/status'
|
||||
import type { Asset } from '@anticrm/platform'
|
||||
|
||||
export let icon: Asset
|
||||
export let title: string
|
||||
|
||||
@ -33,16 +33,20 @@
|
||||
const dispatch = createEventDispatcher()
|
||||
</script>
|
||||
|
||||
<div class="container" on:click|stopPropagation={() => {if (node && !icon) collapsed = !collapsed; dispatch('click')}}>
|
||||
<div class="title" class:sub={!node}>
|
||||
<div class="container"
|
||||
on:click|stopPropagation={() => {
|
||||
if (node && !icon) collapsed = !collapsed
|
||||
dispatch('click')
|
||||
}}
|
||||
>
|
||||
<div class="icon" class:sub={!node}>
|
||||
{#if icon}
|
||||
<Icon {icon} size={'small'}/>
|
||||
{:else}
|
||||
{#if collapsed}<Collapsed/>{:else}<Expanded/>{/if}
|
||||
{#if collapsed}<Collapsed size={'small'} />{:else}<Expanded size={'small'} />{/if}
|
||||
{/if}
|
||||
</div>
|
||||
<span>
|
||||
<span class="label" class:sub={node}>
|
||||
{#if label}<Label {label}/>{:else}{title}{/if}
|
||||
</span>
|
||||
{#each actions as action}
|
||||
@ -54,78 +58,53 @@
|
||||
<div class="counter">{notifications}</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{#if node && !icon}
|
||||
<div class="dropdown" class:collapsed={collapsed}>
|
||||
<div class="dropbox" class:hidden={collapsed}>
|
||||
<slot/>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
height: 36px;
|
||||
cursor: pointer;
|
||||
.title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0 10px;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--theme-caption-color);
|
||||
margin: 0 1rem;
|
||||
height: 2.25rem;
|
||||
border-radius: .5rem;
|
||||
user-select: none;
|
||||
&.sub {
|
||||
font-weight: 400;
|
||||
color: var(--theme-content-color);
|
||||
}
|
||||
cursor: pointer;
|
||||
|
||||
.icon {
|
||||
width: 16px;
|
||||
min-width: 16px;
|
||||
height: 16px;
|
||||
margin: 10px 16px 10px 18px;
|
||||
border-radius: 4px;
|
||||
min-width: 1rem;
|
||||
opacity: .3;
|
||||
&.sub {
|
||||
margin: 10px 16px 10px 50px;
|
||||
margin: 0 1.125rem 0 .625rem;
|
||||
&.sub { margin: 0 .5rem 0 2.75rem }
|
||||
}
|
||||
}
|
||||
// .avatar {
|
||||
// width: 24px;
|
||||
// min-width: 24px;
|
||||
// height: 24px;
|
||||
// margin: 6px 8px 6px 50px;
|
||||
// border-radius: 50%;
|
||||
// background-color: var(--theme-bg-selection);
|
||||
// }
|
||||
span {
|
||||
.label {
|
||||
flex-grow: 1;
|
||||
overflow: hidden;
|
||||
margin-right: .75rem;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
user-select: none;
|
||||
font-weight: 400;
|
||||
color: var(--theme-content-color);
|
||||
&.sub {
|
||||
font-weight: 500;
|
||||
color: var(--theme-caption-color);
|
||||
}
|
||||
}
|
||||
.tool {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-left: 12px;
|
||||
opacity: 0;
|
||||
&:last-child {
|
||||
margin-right: 10px;
|
||||
}
|
||||
margin-right: .75rem;
|
||||
visibility: hidden;
|
||||
}
|
||||
.counter {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 24px;
|
||||
min-width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
margin: 6px 10px;
|
||||
background-color: #DA5F44;
|
||||
font-size: 12px;
|
||||
margin-right: .75rem;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
font-size: .75rem;
|
||||
color: var(--theme-caption-color);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--theme-button-bg-enabled);
|
||||
.tool {
|
||||
@ -134,19 +113,14 @@
|
||||
}
|
||||
}
|
||||
|
||||
&:hover .title .tool {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.dropdown {
|
||||
visibility: visible;
|
||||
.dropbox {
|
||||
height: auto;
|
||||
margin-bottom: .5rem;
|
||||
visibility: visible;
|
||||
|
||||
&.hidden {
|
||||
height: auto;
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
&.collapsed {
|
||||
visibility: hidden;
|
||||
height: 0;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -13,14 +13,4 @@
|
||||
// limitations under the License.
|
||||
-->
|
||||
|
||||
<div class="separator"/>
|
||||
|
||||
<style lang="scss">
|
||||
.separator {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
min-height: 1px;
|
||||
margin: 24px 0;
|
||||
background-color: var(--theme-menu-divider);
|
||||
}
|
||||
</style>
|
||||
<div class="background-menu-divider" style="height: 1px; margin: 1.5rem 0;"/>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user