UBER-340,-341,-346, TSK-1545: ui fixes (#3328)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov 2023-06-02 10:03:46 +03:00 committed by GitHub
parent da2f5f3ee4
commit 876d52c08d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 27 additions and 52 deletions

View File

@ -680,7 +680,7 @@ export function createModel (builder: Builder): void {
key: '',
label: tracker.string.DueDate,
presenter: tracker.component.DueDatePresenter,
props: { kind: 'list' }
props: { kind: 'list', size: 'small' }
},
{
key: '',

View File

@ -60,6 +60,7 @@
--primary-button-pressed: #284B86;
--primary-button-focused: #144CA8;
--primary-button-disabled: #484662;
--primary-button-disabled-color: rgba(255, 255, 255, .5);
--primary-button-focused-border: #6E9FED;
--primary-button-border: rgba(255, 255, 255, .09);
--primary-button-outline: rgba(87, 132, 255, .3); // OLD
@ -69,6 +70,7 @@
--theme-button-pressed: rgba(255, 255, 255, .08);
--theme-button-focused: rgba(255, 255, 255, .04);
--theme-button-disabled: rgba(255, 255, 255, .02);
--theme-button-disabled-color: rgba(255, 255, 255, .5);
--theme-button-border: rgba(255, 255, 255, .09);
--theme-refinput-color: rgba(255, 255, 255, .03);
@ -241,6 +243,7 @@
--primary-button-pressed: #284B86;
--primary-button-focused: #144CA8;
--primary-button-disabled: #EBEBEB;
--primary-button-disabled-color: rgba(0, 0, 0, .5);
--primary-button-focused-border: #6E9FED; // DARK
--primary-button-border: rgba(255, 255, 255, .09);
--primary-button-outline: rgba(87, 132, 255, .3); // OLD
@ -250,6 +253,7 @@
--theme-button-pressed: rgba(0, 0, 0, .08);
--theme-button-focused: rgba(0, 0, 0, .04);
--theme-button-disabled: rgba(0, 0, 0, .02);
--theme-button-disabled-color: rgba(0, 0, 0, .5);
--theme-button-border: rgba(0, 0, 0, .09);
--theme-refinput-color: rgba(0, 0, 0, .03);

View File

@ -174,6 +174,7 @@
background-color: var(--theme-button-focused);
}
&:disabled {
color: var(--theme-button-disabled-color);
background-color: var(--theme-button-disabled);
}
@ -267,7 +268,6 @@
}
&.list {
padding: 0 0.625em;
min-height: 1.75rem;
color: var(--theme-content-color);
background-color: var(--theme-button-enabled);
border: 1px solid var(--theme-button-border);
@ -275,17 +275,14 @@
// transition-property: border, color, background-color;
// transition-duration: 0.15s;
.btn-icon {
color: var(--theme-dark-color);
}
&:not(.inline, .x-small) { min-height: 1.75rem; }
.btn-icon { color: var(--theme-dark-color); }
&:hover {
color: var(--theme-caption-color);
background-color: var(--theme-button-hovered);
border-color: var(--theme-button-border);
}
&:not(.no-focus):focus {
box-shadow: none;
}
&:not(.no-focus):focus { box-shadow: none; }
}
&.primary {
padding: 0 0.75rem;
@ -307,6 +304,7 @@
background-color: var(--primary-button-focused);
}
&:disabled {
color: var(--primary-button-disabled-color);
background-color: var(--primary-button-disabled);
}
}

View File

@ -310,12 +310,6 @@
font-size: 0.6875rem;
color: var(--theme-halfcontent-color);
}
.check {
flex-shrink: 0;
margin-left: .5rem;
width: 1rem;
color: var(--theme-dark-color);
}
}
// &:hover { background-color: var(--popup-bg-hover); }
@ -340,9 +334,11 @@
}
}
.ap-check {
flex-shrink: 0;
margin-left: 1rem;
width: 1rem;
height: 1rem;
color: var(--theme-dark-color);
}
.ap-menuHeader {
display: flex;

View File

@ -244,14 +244,14 @@
padding: 0 0.25rem;
}
.btn-icon {
.btn-icon:not(.warning, .critical, .overdue) {
color: var(--theme-darker-color);
}
&:hover {
color: var(--theme-content-color);
background-color: var(--theme-bg-color);
border-color: var(--theme-divider-color);
.btn-icon {
.btn-icon:not(.warning, .critical, .overdue) {
color: var(--theme-content-color);
}
}
@ -271,8 +271,8 @@
background-color: var(--theme-list-button-hover);
border-color: var(--theme-divider-color);
}
.btn-icon,
&:hover .btn-icon {
.btn-icon:not(.warning, .critical, .overdue),
&:hover .btn-icon:not(.warning, .critical, .overdue) {
color: var(--theme-halfcontent-color) !important;
}
&.medium {
@ -289,7 +289,7 @@
color: var(--theme-caption-color);
background-color: var(--theme-link-button-hover);
border-color: var(--theme-list-divider-color);
.btn-icon {
.btn-icon:not(.warning, .critical, .overdue) {
color: var(--theme-caption-color);
}
}
@ -309,13 +309,13 @@
&:not(.withIcon) {
padding: 0 0.75rem;
}
.btn-icon {
.btn-icon:not(.warning, .critical, .overdue) {
color: var(--theme-content-color);
}
&:hover {
background-color: var(--theme-button-hovered);
border-color: var(--theme-divider-color);
.btn-icon {
.btn-icon:not(.warning, .critical, .overdue) {
color: var(--theme-content-color);
}
}
@ -339,10 +339,10 @@
}
}
&.noDate .btn-icon {
&.noDate .btn-icon:not(.warning, .critical, .overdue) {
color: var(--theme-dark-color);
}
&.noDate:hover .btn-icon {
&.noDate:hover .btn-icon:not(.warning, .critical, .overdue) {
color: var(--theme-content-color);
}

View File

@ -35,7 +35,7 @@
export let currentProject: Project | undefined = undefined
export let kind: ButtonKind = 'link-bordered'
export let size: ButtonSize = 'inline'
export let size: ButtonSize = 'small'
export let justify: 'left' | 'center' = 'left'
export let width: string | undefined = 'min-contet'

View File

@ -13,7 +13,7 @@
// limitations under the License.
-->
<script lang="ts">
import login, { loginId, Workspace } from '@hcengineering/login'
import login, { Workspace } from '@hcengineering/login'
import { getResource } from '@hcengineering/platform'
import {
closePopup,
@ -30,7 +30,7 @@
import { workbenchId } from '@hcengineering/workbench'
import { onMount } from 'svelte'
import { workspacesStore } from '../utils'
import Drag from './icons/Drag.svelte'
// import Drag from './icons/Drag.svelte'
onMount(() => {
getResource(login.function.GetWorkspaces).then(async (f) => {
@ -59,10 +59,6 @@
setMetadataLocalStorage(login.metadata.LoginTokens, tokens)
}
const loginPath: Location = {
path: [loginId, 'selectWorkspace']
}
function getWorkspaceLink (ws: Workspace): string {
const loc: Location = {
path: [workbenchId, ws.workspace]
@ -113,13 +109,6 @@
}
}
function handleOther (e: MouseEvent) {
if (e.metaKey || e.ctrlKey) return
e.preventDefault()
closePopup()
navigate({ path: [loginId, 'selectWorkspace'] })
}
$: last = $workspacesStore.length
</script>
@ -132,19 +121,19 @@
<a class="stealth" href={getWorkspaceLink(ws)} on:click={(e) => clickHandler(e, ws.workspace)}>
<button
bind:this={btns[i]}
class="ap-menuItem flex-row-center withDrag"
class="ap-menuItem flex-row-center flex-grow"
class:hover={btns[i] === activeElement}
on:mousemove={() => {
focusTarget(btns[i])
}}
>
<div class="drag"><Drag size={'small'} /></div>
<!-- <div class="drag"><Drag size={'small'} /></div> -->
<!-- <div class="logo empty" /> -->
<!-- <div class="flex-col flex-grow"> -->
<span class="label overflow-label flex-grow">{ws.workspace}</span>
<!-- <span class="description overflow-label">Description</span> -->
<!-- </div> -->
<div class="check">
<div class="ap-check">
{#if $resolvedLocationStore.path[1] === ws.workspace}
<IconCheck size={'small'} />
{/if}
@ -152,18 +141,6 @@
</button>
</a>
{/each}
<a class="stealth" href={locationToUrl(loginPath)} on:click={handleOther}>
<button
bind:this={btns[last]}
class="ap-menuItem flex-grow"
class:hover={btns[last] === activeElement}
on:mousemove={() => {
focusTarget(btns[last])
}}
>
...
</button>
</a>
</div>
</div>
<div class="ap-space x2" />