UBER-358: Fix icons (#3338)

Signed-off-by: Andrey Sobolev <haiodo@gmail.com>
This commit is contained in:
Andrey Sobolev 2023-06-05 12:12:31 +07:00 committed by GitHub
parent 4243f68f07
commit 2aff844540
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 6 additions and 116 deletions

View File

@ -22,7 +22,6 @@
import IconUpOutline from './icons/UpOutline.svelte'
import IconDownOutline from './icons/DownOutline.svelte'
import HalfUpDown from './icons/HalfUpDown.svelte'
import { isSafari } from '../utils'
export let padding: string | undefined = undefined
export let autoscroll: boolean = false
@ -375,7 +374,6 @@
} else if (deltaY > 0 && autoscroll && !scrolling && belowContent && belowContent <= 10) {
scrolling = true
}
scrollY += deltaY
}
let observer: IntersectionObserver
@ -452,7 +450,6 @@
(orientir === 'horizontal' && (maskH === 'left' || maskH === 'both'))
? 'visible'
: 'hidden'
let scrollY: number = 0
</script>
<svelte:window on:resize={_resize} />
@ -478,22 +475,6 @@
style:overflow-x={horizontal ? 'auto' : 'hidden'}
on:scroll={(evt) => {
if ($tooltipstore.label !== undefined) closeTooltip()
const newPos = divScroll?.scrollTop ?? 0
// TODO: Workaround: https://front.hc.engineering/workbench/platform/tracker/TSK-760
// In Safari scroll could jump on click, with no particular reason.
if (
!scrolling &&
!isScrolling &&
scrollY !== 0 &&
Math.abs(newPos - scrollY) > 100 &&
divScroll !== undefined &&
isSafari()
) {
divScroll.scrollTop = scrollY
}
scrollY = divScroll?.scrollTop ?? 0
}}
>
<div

View File

@ -1,10 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="contactapplication" viewBox="0 0 32 32">
<path fill-rule="evenodd" clip-rule="evenodd" d="M22.2223 16.3256C21.5645 16.7652 20.7911 16.9998 20 16.9998C18.9391 16.9998 17.9217 16.5783 17.1716 15.8282C16.4214 15.078 16 14.0606 16 12.9998C16 12.2086 16.2346 11.4353 16.6741 10.7775C17.1136 10.1197 17.7384 9.60699 18.4693 9.30424C19.2002 9.00149 20.0044 8.92228 20.7804 9.07662C21.5563 9.23096 22.269 9.61192 22.8284 10.1713C23.3878 10.7307 23.7688 11.4435 23.9231 12.2194C24.0775 12.9953 23.9983 13.7996 23.6955 14.5305C23.3928 15.2614 22.8801 15.8861 22.2223 16.3256ZM21.1111 11.3368C20.7822 11.1171 20.3956 10.9998 20 10.9998C19.4696 10.9998 18.9609 11.2105 18.5858 11.5855C18.2107 11.9606 18 12.4693 18 12.9998C18 13.3953 18.1173 13.782 18.3371 14.1109C18.5568 14.4398 18.8692 14.6961 19.2346 14.8475C19.6001 14.9989 20.0022 15.0385 20.3902 14.9613C20.7781 14.8842 21.1345 14.6937 21.4142 14.414C21.6939 14.1343 21.8844 13.7779 21.9616 13.3899C22.0387 13.002 21.9991 12.5998 21.8478 12.2344C21.6964 11.8689 21.44 11.5566 21.1111 11.3368Z" />
<path d="M7 9.99976C6.44772 9.99976 6 10.4475 6 10.9998C6 11.552 6.44772 11.9998 7 11.9998H12C12.5523 11.9998 13 11.552 13 10.9998C13 10.4475 12.5523 9.99976 12 9.99976H7Z" />
<path d="M18 19.9998C16.8954 19.9998 16 20.8952 16 21.9998V22.9998C16 23.552 15.5523 23.9998 15 23.9998C14.4477 23.9998 14 23.552 14 22.9998V21.9998C14 19.7906 15.7909 17.9998 18 17.9998H22C24.2091 17.9998 26 19.7906 26 21.9998V22.9998C26 23.552 25.5523 23.9998 25 23.9998C24.4477 23.9998 24 23.552 24 22.9998V21.9998C24 20.8952 23.1046 19.9998 22 19.9998H18Z" />
<path d="M7 13.9998C6.44772 13.9998 6 14.4475 6 14.9998C6 15.552 6.44772 15.9998 7 15.9998H9C9.55228 15.9998 10 15.552 10 14.9998C10 14.4475 9.55228 13.9998 9 13.9998H7Z" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M6 3.99976C3.79086 3.99976 2 5.79062 2 7.99976V23.9998C2 26.2089 3.79086 27.9998 6 27.9998H26C28.2091 27.9998 30 26.2089 30 23.9998V7.99976C30 5.79062 28.2091 3.99976 26 3.99976H6ZM4 7.99976C4 6.89519 4.89543 5.99976 6 5.99976H26C27.1046 5.99976 28 6.89519 28 7.99976V23.9998C28 25.1043 27.1046 25.9998 26 25.9998H6C4.89543 25.9998 4 25.1043 4 23.9998V7.99976Z" />
<path d="M16 7.99976C15.0111 7.99976 14.0444 8.293 13.2222 8.84241C12.3999 9.39182 11.759 10.1727 11.3806 11.0863C11.0022 12 10.9032 13.0053 11.0961 13.9752C11.289 14.9451 11.7652 15.836 12.4645 16.5353C13.1637 17.2346 14.0547 17.7108 15.0246 17.9037C15.9945 18.0966 16.9998 17.9976 17.9134 17.6192C18.8271 17.2407 19.6079 16.5999 20.1574 15.7776C20.7068 14.9554 21 13.9887 21 12.9998C21 11.6737 20.4732 10.4019 19.5355 9.46422C18.5979 8.52654 17.3261 7.99976 16 7.99976ZM16 15.9998C15.4067 15.9998 14.8266 15.8238 14.3333 15.4942C13.8399 15.1645 13.4554 14.696 13.2284 14.1478C13.0013 13.5996 12.9419 12.9964 13.0576 12.4145C13.1734 11.8325 13.4591 11.298 13.8787 10.8784C14.2982 10.4589 14.8328 10.1732 15.4147 10.0574C15.9967 9.94164 16.5999 10.0011 17.1481 10.2281C17.6962 10.4552 18.1648 10.8397 18.4944 11.333C18.8241 11.8264 19 12.4064 19 12.9998C18.9991 13.7951 18.6827 14.5577 18.1203 15.1201C17.5579 15.6825 16.7954 15.9989 16 15.9998Z"/>
<path d="M16 1.99976C13.2311 1.99976 10.5243 2.82084 8.22202 4.35918C5.91973 5.89752 4.12532 8.08402 3.06569 10.6422C2.00607 13.2004 1.72882 16.0153 2.26901 18.731C2.80921 21.4468 4.14258 23.9413 6.10051 25.8993C8.05845 27.8572 10.553 29.1906 13.2687 29.7307C15.9845 30.2709 18.7994 29.9937 21.3576 28.9341C23.9157 27.8744 26.1022 26.08 27.6406 23.7777C29.1789 21.4755 30 18.7687 30 15.9998C29.9958 12.288 28.5195 8.72948 25.8949 6.10488C23.2703 3.48028 19.7118 2.00394 16 1.99976ZM10 26.3763V24.9998C10.0009 24.2044 10.3172 23.4418 10.8797 22.8794C11.4421 22.317 12.2046 22.0006 13 21.9998H19C19.7954 22.0006 20.5579 22.317 21.1204 22.8794C21.6828 23.4418 21.9991 24.2044 22 24.9998V26.3763C20.1792 27.4395 18.1085 27.9998 16 27.9998C13.8915 27.9998 11.8208 27.4395 10 26.3763ZM23.9925 24.9256C23.9726 23.6138 23.4382 22.3624 22.5043 21.441C21.5704 20.5196 20.3119 20.002 19 19.9998H13C11.6881 20.002 10.4296 20.5196 9.49573 21.441C8.56186 22.3624 8.02739 23.6138 8.00751 24.9256C6.19407 23.3063 4.91524 21.1744 4.34034 18.8122C3.76545 16.45 3.92161 13.9689 4.78814 11.6974C5.65468 9.42593 7.19073 7.47122 9.19288 6.09212C11.195 4.71302 13.5688 3.97458 16 3.97458C18.4312 3.97458 20.805 4.71302 22.8071 6.09212C24.8093 7.47122 26.3453 9.42593 27.2119 11.6974C28.0784 13.9689 28.2346 16.45 27.6597 18.8122C27.0848 21.1744 25.8059 23.3063 23.9925 24.9256Z"/>
</symbol>
<symbol id="phone" viewBox="0 0 12 12">
<path d="M9,7.1L10,8.1c0.2,0.2,0.2,0.6,0,0.8C8.8,10,7,10.1,5.7,9.1L5.7,9.1c-1-0.7-1.8-1.6-2.6-2.6L3,6.4c-1-1.3-0.8-3.1,0.3-4.2 C3.5,2,3.9,2,4.1,2.2L5,3.1C5.4,3.4,5.4,4,5,4.3L4.4,4.9C4.3,5,4.3,5.2,4.3,5.4c0.5,1,1.4,1.9,2.4,2.4c0.2,0.1,0.4,0.1,0.5-0.1 l0.6-0.6C8.2,6.8,8.7,6.8,9,7.1z"/>

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 20 KiB

View File

@ -3,9 +3,7 @@
<path fill-rule="evenodd" clip-rule="evenodd" d="M17 3C17 2.44772 16.5523 2 16 2C15.4477 2 15 2.44772 15 3V4.05493C10.5 4.55237 7 8.36745 7 13V14.8953C7 16.0307 6.6136 17.1322 5.90434 18.0188L4.18007 20.1741C3.41618 21.129 3 22.3154 3 23.5383C3 24.8978 4.10216 26 5.46174 26H12C12 26.5253 12.1035 27.0454 12.3045 27.5307C12.5055 28.016 12.8001 28.457 13.1716 28.8284C13.543 29.1999 13.984 29.4945 14.4693 29.6955C14.9546 29.8965 15.4747 30 16 30C16.5253 30 17.0454 29.8965 17.5307 29.6955C18.016 29.4945 18.457 29.1999 18.8284 28.8284C19.1999 28.457 19.4945 28.016 19.6955 27.5307C19.8965 27.0454 20 26.5253 20 26H26.5383C27.8978 26 29 24.8978 29 23.5383C29 22.3154 28.5838 21.129 27.8199 20.1741L26.0957 18.0188C25.3864 17.1322 25 16.0307 25 14.8953V13C25 8.36745 21.5 4.55237 17 4.05493V3ZM18 26H14C14 26.2626 14.0517 26.5227 14.1522 26.7654C14.2528 27.008 14.4001 27.2285 14.5858 27.4142C14.7715 27.5999 14.992 27.7472 15.2346 27.8478C15.4773 27.9483 15.7374 28 16 28C16.2626 28 16.5227 27.9483 16.7654 27.8478C17.008 27.7472 17.2285 27.5999 17.4142 27.4142C17.5999 27.2285 17.7472 27.008 17.8478 26.7654C17.9483 26.5227 18 26.2626 18 26ZM5 23.5383C5 23.7933 5.20673 24 5.46174 24H26.5383C26.7933 24 27 23.7933 27 23.5383C27 22.7696 26.7384 22.0238 26.2582 21.4235L24.5339 19.2682C23.541 18.027 23 16.4848 23 14.8953V13C23 9.13401 19.866 6 16 6C12.134 6 9 9.13401 9 13V14.8953C9 16.4848 8.45903 18.027 7.46608 19.2682L5.74181 21.4235C5.26161 22.0238 5 22.7696 5 23.5383Z" />
</symbol>
<symbol id="inbox" viewBox="0 0 32 32">
<path d="M8 6.99976C8 6.44747 8.44772 5.99976 9 5.99976H23C23.5523 5.99976 24 6.44747 24 6.99976C24 7.55204 23.5523 7.99976 23 7.99976H9C8.44772 7.99976 8 7.55204 8 6.99976Z" />
<path d="M6 10.9998C6 10.4475 6.44772 9.99976 7 9.99976H25C25.5523 9.99976 26 10.4475 26 10.9998C26 11.552 25.5523 11.9998 25 11.9998H7C6.44772 11.9998 6 11.552 6 10.9998Z" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M6 13.9998C3.79086 13.9998 2 15.7906 2 17.9998V21.9998C2 24.2089 3.79086 25.9998 6 25.9998H26C28.2091 25.9998 30 24.2089 30 21.9998V17.9998C30 15.7906 28.2091 13.9998 26 13.9998H19C18.4477 13.9998 18 14.4475 18 14.9998C18 16.1043 17.1046 16.9998 16 16.9998C14.8954 16.9998 14 16.1043 14 14.9998C14 14.4475 13.5523 13.9998 13 13.9998H6ZM4 17.9998C4 16.8952 4.89543 15.9998 6 15.9998H12.126C12.5701 17.725 14.1362 18.9998 16 18.9998C17.8638 18.9998 19.4299 17.725 19.874 15.9998H26C27.1046 15.9998 28 16.8952 28 17.9998V21.9998C28 23.1043 27.1046 23.9998 26 23.9998H6C4.89543 23.9998 4 23.1043 4 21.9998V17.9998Z" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.2 8.39976C9.38885 8.14795 9.68524 7.99976 10 7.99976H22C22.3148 7.99976 22.6111 8.14795 22.8 8.39976L27 13.9998H19C18.4477 13.9998 18 14.4475 18 14.9998C18 15.2624 17.9483 15.5225 17.8478 15.7651C17.7472 16.0078 17.5999 16.2283 17.4142 16.414C17.2285 16.5997 17.008 16.747 16.7654 16.8475C16.5227 16.948 16.2626 16.9998 16 16.9998C15.7374 16.9998 15.4773 16.948 15.2346 16.8475C14.992 16.747 14.7715 16.5997 14.5858 16.414C14.4001 16.2283 14.2528 16.0078 14.1522 15.7651C14.0517 15.5225 14 15.2624 14 14.9998C14 14.4475 13.5523 13.9998 13 13.9998H5L9.2 8.39976ZM12.127 15.9998H4V21.9998C4 23.1043 4.89543 23.9998 6 23.9998H26C27.1046 23.9998 28 23.1043 28 21.9998V15.9998H19.873C19.8264 16.1802 19.7672 16.3576 19.6955 16.5305C19.4945 17.0158 19.1999 17.4567 18.8284 17.8282C18.457 18.1996 18.016 18.4943 17.5307 18.6953C17.0454 18.8963 16.5253 18.9998 16 18.9998C15.4747 18.9998 14.9546 18.8963 14.4693 18.6953C13.984 18.4943 13.543 18.1996 13.1716 17.8282C12.8001 17.4567 12.5055 17.0158 12.3045 16.5305C12.2329 16.3576 12.1736 16.1802 12.127 15.9998ZM10 5.99976C9.05573 5.99976 8.16656 6.44434 7.6 7.19976L2.2 14.3998C2.07018 14.5729 2 14.7834 2 14.9998V21.9998C2 24.2089 3.79086 25.9998 6 25.9998H26C28.2091 25.9998 30 24.2089 30 21.9998V14.9998C30 14.7834 29.9298 14.5729 29.8 14.3998L24.4 7.19976C23.8334 6.44434 22.9443 5.99976 22 5.99976H10Z"/>
</symbol>
<symbol id="track" viewBox="0 0 24 24">
<path d="M21.7,15L21,13.8c-0.6-1.1-1.1-2.3-1.2-3.4l-0.1-0.9c-0.5,0.2-1.1,0.4-1.6,0.4l0.1,0.7c0.1,1.5,0.6,2.9,1.4,4.2l0.7,1.2 c0.4,0.6,0.7,1.2,0.7,1.3c0,0.1-0.1,0.1-0.1,0.2c-0.1,0.1-1,0.1-1.5,0.1H4.8c-0.6,0-1.4,0-1.5-0.1l-0.1-0.1c0-0.1,0.5-0.8,0.7-1.4 l0.7-1.2c0.7-1.3,1.2-2.6,1.4-4.2l0.4-2.7c0.4-3,2.7-5.1,5.7-5.1c1,0,1.9,0.3,2.7,0.7c0.4-0.5,0.9-0.9,1.4-1.1C15,1.5,13.5,1,12,1 C8.2,1,5,3.9,4.5,7.7l-0.4,2.7c-0.1,1.2-0.5,2.4-1.2,3.4L2.2,15c-0.7,1.2-1.1,1.8-1,2.6c0.1,0.5,0.4,1,0.7,1.3 c0.6,0.5,1.3,0.5,2.7,0.5h3c0.2,1,0.8,1.9,1.5,2.5C10.1,22.6,11,23,12,23s2-0.4,2.7-1.1c0.7-0.6,1.2-1.5,1.5-2.5h3 c1.4,0,2.1,0,2.7-0.5c0.4-0.4,0.6-0.8,0.7-1.3C22.9,16.8,22.6,16.2,21.7,15z M13.6,20.6c-1,0.8-2.3,0.8-3.2,0 c-0.4-0.2-0.6-0.7-0.8-1.2h4.9C14.2,19.9,14,20.3,13.6,20.6z" />

Before

Width:  |  Height:  |  Size: 5.5 KiB

After

Width:  |  Height:  |  Size: 5.8 KiB

View File

@ -1,85 +0,0 @@
<!--
// 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 '@hcengineering/platform'
import type { AnySvelteComponent } from '@hcengineering/ui'
import { Icon, tooltip } from '@hcengineering/ui'
export let label: IntlString
export let icon: Asset | AnySvelteComponent
export let selected: boolean
export let notify: boolean = false
</script>
<button class="app" class:selected id={'app-' + label} use:tooltip={{ label }}>
<div class="flex-center icon-container" class:noty={notify}>
<Icon {icon} size={'medium'} />
</div>
{#if notify}<div class="marker" />{/if}
</button>
<style lang="scss">
.app {
position: relative;
padding: 0;
width: 2.25rem;
height: 2.25rem;
background-color: transparent;
border: 1px solid transparent;
border-radius: 0.25rem;
cursor: pointer;
outline: none;
&.horizontal {
margin: 0 0.125rem;
}
&.vertical {
margin: 0.125rem 0;
}
.icon-container {
width: 1.25rem;
height: 1.25rem;
color: var(--theme-navpanel-icons-color);
}
&:hover .icon-container {
color: var(--theme-caption-color);
}
&:focus {
box-shadow: 0 0 0 2px var(--primary-button-focused-border);
.icon-container {
color: var(--theme-caption-color);
}
}
&.selected {
background-color: var(--theme-button-pressed);
.icon-container {
color: var(--theme-caption-color);
}
}
}
.marker {
position: absolute;
top: 1.1rem;
right: 0.375rem;
width: 0.425rem;
height: 0.425rem;
border-radius: 50%;
background-color: var(--highlight-red);
}
</style>

View File

@ -77,8 +77,7 @@
}
&.selected {
background-color: var(--theme-button-enabled);
border: 1px solid var(--theme-button-border);
background-color: var(--theme-button-pressed);
.icon-container {
color: var(--theme-caption-color);
}

View File

@ -19,7 +19,7 @@
import { NavLink } from '@hcengineering/view-resources'
import type { Application } from '@hcengineering/workbench'
import workbench from '@hcengineering/workbench'
import App from './App.svelte'
import AppItem from './AppItem.svelte'
export let active: Ref<Application> | undefined
export let apps: Application[] = []
@ -46,7 +46,7 @@
>
{#each apps.filter((it) => !hiddenAppsIds.includes(it._id)) as app}
<NavLink app={app.alias} shrink={0}>
<App selected={app._id === active} icon={app.icon} label={app.label} />
<AppItem selected={app._id === active} icon={app.icon} label={app.label} />
</NavLink>
{/each}
<div class="apps-space-{direction}" />