RED-9191: toggle icons design fine-tuning.

This commit is contained in:
Nicoleta Panaghiu 2024-05-30 17:14:47 +03:00
parent 85560cc438
commit 668dff4620
11 changed files with 89 additions and 90 deletions

View File

@ -1,18 +1,13 @@
import { inject, Injectable } from '@angular/core';
import { Injectable } from '@angular/core';
import { UserPreferenceService } from '@users/user-preference.service';
import { HeaderElements } from '../../file-preview/utils/constants';
import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
import { TranslateService } from '@ngx-translate/core';
import { PdfViewer } from './pdf-viewer.service';
import { REDDocumentViewer } from './document-viewer.service';
import { UI_ROOT_PATH_FN } from '@common-ui/utils';
import { HeaderElements } from '../../file-preview/utils/constants';
@Injectable()
export class TooltipsService {
readonly #convertPath = inject(UI_ROOT_PATH_FN);
readonly #enableIcon = this.#convertPath('/assets/icons/general/pdftron-action-enable-tooltips.svg');
readonly #disableIcon = this.#convertPath('/assets/icons/general/pdftron-action-disable-tooltips.svg');
constructor(
private readonly _pdf: PdfViewer,
private readonly _documentViewer: REDDocumentViewer,
@ -26,17 +21,23 @@ export class TooltipsService {
});
}
get toggleTooltipsBtnIcon(): string {
const tooltipsDisabled = this._userPreferenceService.getFilePreviewTooltipsPreference();
return tooltipsDisabled ? this.#enableIcon : this.#disableIcon;
}
async toggleTooltips(): Promise<void> {
await this._userPreferenceService.toggleFilePreviewTooltipsPreference();
this._documentViewer.updateTooltipsVisibility();
this.updateIconState();
this._pdf.instance.UI.updateElement(HeaderElements.TOGGLE_TOOLTIPS, {
title: this.toggleTooltipsBtnTitle,
img: this.toggleTooltipsBtnIcon,
});
}
updateIconState() {
const element = this._pdf.instance.UI.iframeWindow.document.querySelector(`[data-element=${HeaderElements.TOGGLE_TOOLTIPS}]`);
if (this._userPreferenceService.getFilePreviewTooltipsPreference()) {
element.classList.add('active');
} else {
element.classList.remove('active');
}
}
}

View File

@ -100,7 +100,7 @@ export class ViewerHeaderService {
element: HeaderElements.TOGGLE_TOOLTIPS,
dataElement: HeaderElements.TOGGLE_TOOLTIPS,
title: this._tooltipsService.toggleTooltipsBtnTitle,
img: this._tooltipsService.toggleTooltipsBtnIcon,
img: this.#convertPath('/assets/icons/general/pdftron-action-enable-tooltips.svg'),
onClick: () => this._ngZone.run(() => this._tooltipsService.toggleTooltips()),
};
}
@ -137,17 +137,6 @@ export class ViewerHeaderService {
};
}
get #closeCompare(): IHeaderElement {
return {
type: 'actionButton',
element: HeaderElements.CLOSE_COMPARE_BUTTON,
dataElement: HeaderElements.CLOSE_COMPARE_BUTTON,
img: this.#convertPath('/assets/icons/general/pdftron-action-close-compare.svg'),
title: 'Leave Compare Mode',
onClick: () => this._ngZone.run(() => this.#closeCompareMode()),
};
}
get #rotateLeft(): IHeaderElement {
return {
type: 'actionButton',
@ -238,6 +227,17 @@ export class ViewerHeaderService {
};
}
get #closeCompare(): IHeaderElement {
return {
type: 'actionButton',
element: HeaderElements.CLOSE_COMPARE_BUTTON,
dataElement: HeaderElements.CLOSE_COMPARE_BUTTON,
img: this.#convertPath('/assets/icons/general/pdftron-action-compare.svg'),
title: 'Leave Compare Mode',
onClick: () => this._ngZone.run(() => this.#closeCompareMode()),
};
}
get #toggleLoadAnnotations$() {
return merge(this.expandedPanelEvent$, this._helpModeService.isHelpModeActive$).pipe(
tap(enable =>
@ -281,7 +281,6 @@ export class ViewerHeaderService {
[HeaderElements.TOGGLE_TOOLTIPS],
[HeaderElements.TOGGLE_LAYERS],
[HeaderElements.TOGGLE_READABLE_REDACTIONS],
[HeaderElements.SHAPE_TOOL_GROUP_BUTTON],
[
HeaderElements.ROTATE_LEFT_BUTTON,
HeaderElements.ROTATE_RIGHT_BUTTON,
@ -290,18 +289,19 @@ export class ViewerHeaderService {
],
];
const loadAllAnnotationsButton = this.#buttons.get(HeaderElements.LOAD_ALL_ANNOTATIONS);
let startButtons = 10;
let deleteCount = 14;
header.get('selectToolButton').insertAfter(this.#buttons.get(HeaderElements.SHAPE_TOOL_GROUP_BUTTON));
groups.forEach(group => this.#pushGroup(enabledItems, group));
const loadAllAnnotationsButton = this.#buttons.get(HeaderElements.LOAD_ALL_ANNOTATIONS);
let startButtons = 11;
let deleteCount = 15;
if (this.#isEnabled(HeaderElements.LOAD_ALL_ANNOTATIONS)) {
if (!header.getItems().includes(loadAllAnnotationsButton)) {
header.get('leftPanelButton').insertAfter(loadAllAnnotationsButton);
}
startButtons = 11;
deleteCount = 15;
startButtons = 12;
deleteCount = 16;
} else {
header.delete(HeaderElements.LOAD_ALL_ANNOTATIONS);
}
@ -311,6 +311,11 @@ export class ViewerHeaderService {
this._pdf.instance?.UI.updateElement('selectToolButton', {
img: this.#convertPath('/assets/icons/general/pdftron-cursor.svg'),
});
this._tooltipsService.updateIconState();
const closeCompareButton = this._pdf.instance.UI.iframeWindow.document.querySelector(
`[data-element=${HeaderElements.CLOSE_COMPARE_BUTTON}]`,
);
closeCompareButton?.classList.add('active');
}
disableLoadAllAnnotations(): void {

View File

@ -1,18 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg height="14px" version="1.1" viewBox="0 0 14 14" width="14px"
xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd" id="Styleguide" stroke="none" stroke-width="1">
<g id="Styleguide-Actions" transform="translate(-62.000000, -609.000000)">
<rect height="906" width="904" x="0" y="0"></rect>
<g id="Group-6" transform="translate(52.000000, 599.000000)">
<rect height="34" id="Rectangle" rx="17" width="34" x="0" y="0"></rect>
<g fill="#868E96" fill-rule="nonzero" id="status"
transform="translate(10.000000, 10.000000)">
<path
d="M7.7,2.38 L8.75,3.29 L6.86,5.18 L7.7,5.18 C11.2,5.18 14,8.05 14,11.48 L14,11.48 L12.6,11.48 C12.6,8.75 10.43,6.58 7.7,6.58 L7.7,6.58 L6.86,6.58 L8.75,8.47 L7.77,9.45 L4.2,5.88 L7.7,2.38 Z M3.5,2.38 L4.48,3.36 L1.96,5.88 L4.48,8.47 L3.5,9.45 L0,5.88 L3.5,2.38 Z"
id="Back-to-review"></path>
</g>
</g>
</g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 1.1 KiB

View File

@ -2,7 +2,7 @@
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg id="Capa_1" style="enable-background:new 0 0 18.08 18.08;" version="1.1" viewBox="0 0 18.08 18.08" x="0px"
xml:space="preserve" xmlns="http://www.w3.org/2000/svg" y="0px">
<g fill="#868E96">
<g fill="#000">
<path d="M6.504,10.283c-0.101,0-0.197,0.039-0.269,0.111c-0.071,0.07-0.111,0.167-0.111,0.269l0.008,2.55
H1.026V2.245H8.54v1.36c0.151-0.102,0.334-0.162,0.53-0.162h0.547V1.729c0-0.188-0.153-0.342-0.342-0.342H0.342
C0.154,1.387,0,1.54,0,1.729v12.046c0,0.189,0.153,0.343,0.342,0.343h6.664c0.097,0,0.19-0.042,0.255-0.114l0.853-0.956v-2.764

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

View File

@ -1,12 +1,17 @@
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M4.97883 9.68508C2.99294 8.89073 2 8.49355 2 8C2 7.50645 2.99294 7.10927 4.97883 6.31492L7.7873 5.19153C9.77318 4.39718 10.7661 4 12 4C13.2339 4 14.2268 4.39718 16.2127 5.19153L19.0212 6.31492C21.0071 7.10927 22 7.50645 22 8C22 8.49355 21.0071 8.89073 19.0212 9.68508L16.2127 10.8085C14.2268 11.6028 13.2339 12 12 12C10.7661 12 9.77318 11.6028 7.7873 10.8085L4.97883 9.68508Z"
stroke="#868E96" stroke-width="1.5"/>
<path
d="M5.76613 10L4.97883 10.3149C2.99294 11.1093 2 11.5065 2 12C2 12.4935 2.99294 12.8907 4.97883 13.6851L7.7873 14.8085C9.77318 15.6028 10.7661 16 12 16C13.2339 16 14.2268 15.6028 16.2127 14.8085L19.0212 13.6851C21.0071 12.8907 22 12.4935 22 12C22 11.5065 21.0071 11.1093 19.0212 10.3149L18.2339 10"
stroke="#868E96" stroke-width="1.5"/>
<path
d="M5.76613 14L4.97883 14.3149C2.99294 15.1093 2 15.5065 2 16C2 16.4935 2.99294 16.8907 4.97883 17.6851L7.7873 18.8085C9.77318 19.6028 10.7661 20 12 20C13.2339 20 14.2268 19.6028 16.2127 18.8085L19.0212 17.6851C21.0071 16.8907 22 16.4935 22 16C22 15.5065 21.0071 15.1093 19.0212 14.3149L18.2339 14"
stroke="#868E96" stroke-width="1.5"/>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 28.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 22 26" style="enable-background:new 0 0 22 26;" xml:space="preserve">
<style type="text/css">
.st0{fill:#868E96;}
.st1{fill:#FFFFFF;}
</style>
<path id="path1-1-2-2-2" class="st0" d="M0,3v20c0,1.6,1.3,3,3,3h16c1.6,0,3-1.3,3-3V3c0-1.7-1.3-3-3-3H3C1.3,0,0,1.3,0,3z"/>
<rect x="2.8" y="2.6" class="st1" width="16.5" height="20.8"/>
<rect x="4.6" y="4.1" class="st0" width="12.7" height="4"/>
<rect x="4.6" y="9.6" class="st0" width="12.7" height="6.8"/>
<rect x="4.6" y="17.9" class="st0" width="12.7" height="4"/>
<rect x="5.9" y="5.2" class="st1" width="10.2" height="1.8"/>
<rect x="5.9" y="19" class="st1" width="10.2" height="1.9"/>
<rect x="5.9" y="10.8" class="st1" width="10.2" height="4.5"/>
</svg>

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 999 B

View File

@ -1,10 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>disable-tooltip</title>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="disable-tooltip">
<rect id="Rectangle" x="0" y="0" width="100" height="100"></rect>
<path d="M85,2 C93.5,2 100,8.5 100,17 L100,17 L100,67 C100,75.5 93.5,82 85,82 L85,82 L69,82 L50,98.1819801 L31.9929123,82 L15,82 C6.5,82 0,75.5 0,67 L0,67 L0,17 C0,8.5 6.5,2 15,2 L15,2 Z M85,12 L15,12 C12,12 10,14 10,17 L10,17 L10,67 C10,70 12,72 15,72 L15,72 L34.9929123,72 L50,86.3372421 L66,72 L85,72 C88,72 90,70 90,67 L90,67 L90,17 C90,14 88,12 85,12 L85,12 Z M28.574352,20.6755343 L72.1132333,64.2144156 L68.994543,67.333106 L61.7994543,60.1625739 L60.7680764,59.131196 C57.4529332,60.4572533 53.8185539,61.1939518 50.0122783,61.1939518 C37.73397,61.1939518 27.2482947,53.556844 23,42.7764893 C24.9154161,37.9142792 28.1077763,33.6905412 32.1841746,30.5227376 L32.1841746,30.5227376 L31.0545703,29.3931332 L25.4556617,23.7942246 L28.574352,20.6755343 Z M39.0354707,37.3740337 C38.2251023,39.019327 37.73397,40.8365166 37.73397,42.7764893 C37.73397,49.5541155 43.2346521,55.0547976 50.0122783,55.0547976 C51.952251,55.0547976 53.7694407,54.5636653 55.414734,53.753297 L55.414734,53.753297 L51.6084584,49.9470214 C51.0927694,50.0698045 50.5525239,50.1434743 50.0122783,50.1434743 C45.9358799,50.1434743 42.6452933,46.8528877 42.6452933,42.7764893 C42.6452933,42.2362437 42.7189632,41.6959982 42.8417462,41.1803092 L42.8417462,41.1803092 Z M49.9877217,24.3590268 C62.26603,24.3590268 72.7517053,31.9961346 77,42.7764893 C75.207367,47.34402 72.2851296,51.3467485 68.5770805,54.4408822 L68.5770805,54.4408822 L61.4065484,47.2703502 C61.9713506,45.870623 62.2905866,44.3726694 62.2905866,42.7764893 C62.2905866,35.9988631 56.7899045,30.498181 50.0122783,30.498181 C48.4160982,30.498181 46.9181446,30.817417 45.5184175,31.3822192 L45.5184175,31.3822192 L40.2141883,26.07799 C43.2592087,24.9729422 46.5497954,24.3590268 49.9877217,24.3590268 Z M50.0368349,35.4340609 C54.1132333,35.4340609 57.4038199,38.7246476 57.4038199,42.8010459 L57.4038199,42.8010459 L57.3547067,43.1939518 L49.6193724,35.4586176 Z" id="Combined-Shape" fill="#868E96" fill-rule="nonzero"></path>
</g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 2.4 KiB

View File

@ -1,15 +1,23 @@
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M4.97883 9.68508C2.99294 8.89073 2 8.49355 2 8C2 7.50645 2.99294 7.10927 4.97883 6.31492L7.7873 5.19153C9.77318 4.39718 10.7661 4 12 4C13.2339 4 14.2268 4.39718 16.2127 5.19153L19.0212 6.31492C21.0071 7.10927 22 7.50645 22 8C22 8.49355 21.0071 8.89073 19.0212 9.68508L16.2127 10.8085C14.2268 11.6028 13.2339 12 12 12C10.7661 12 9.77318 11.6028 7.7873 10.8085L4.97883 9.68508Z"
fill="#868E96"/>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M2 8C2 8.49355 2.99294 8.89073 4.97883 9.68508L7.7873 10.8085C9.77318 11.6028 10.7661 12 12 12C13.2339 12 14.2268 11.6028 16.2127 10.8085L19.0212 9.68508C21.0071 8.89073 22 8.49355 22 8C22 7.50645 21.0071 7.10927 19.0212 6.31492L16.2127 5.19153C14.2268 4.39718 13.2339 4 12 4C10.7661 4 9.77318 4.39718 7.7873 5.19153L4.97883 6.31492C2.99294 7.10927 2 7.50645 2 8Z"
fill="#868E96"/>
<path
d="M19.0212 13.6851L16.2127 14.8085C14.2268 15.6028 13.2339 16 12 16C10.7661 16 9.77318 15.6028 7.7873 14.8085L4.97883 13.6851C2.99294 12.8907 2 12.4935 2 12C2 11.5551 2.80681 11.1885 4.42043 10.5388L7.56143 11.7952C9.41007 12.535 10.572 13 12 13C13.428 13 14.5899 12.535 16.4386 11.7952L19.5796 10.5388C21.1932 11.1885 22 11.5551 22 12C22 12.4935 21.0071 12.8907 19.0212 13.6851Z"
fill="#868E96"/>
<path
d="M19.0212 17.6849L16.2127 18.8083C14.2268 19.6026 13.2339 19.9998 12 19.9998C10.7661 19.9998 9.77318 19.6026 7.7873 18.8083L4.97883 17.6849C2.99294 16.8905 2 16.4934 2 15.9998C2 15.5549 2.80681 15.1883 4.42043 14.5386L7.56143 15.795C9.41007 16.5348 10.572 16.9998 12 16.9998C13.428 16.9998 14.5899 16.5348 16.4386 15.795L19.5796 14.5386C21.1932 15.1883 22 15.5549 22 15.9998C22 16.4934 21.0071 16.8905 19.0212 17.6849Z"
fill="#868E96"/>
</svg>
<?xml version="1.0" encoding="UTF-8"?>
<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 26">
<defs>
<style>
.cls-1 {
fill: #fff;
}
.cls-1, .cls-2 {
stroke-width: 0px;
}
.cls-2 {
fill: #868E96;
}
</style>
</defs>
<path id="path1-1-2-2" class="cls-2" d="m0,2.98v20.04c0,1.65,1.33,2.98,2.98,2.98h16.04c1.65,0,2.98-1.33,2.98-2.98V2.98c0-1.65-1.33-2.98-2.98-2.98H2.98C1.33,0,0,1.33,0,2.98Z"/>
<rect class="cls-1" x="2.75" y="2.6" width="16.5" height="20.8"/>
<rect class="cls-2" x="4.64" y="4.1" width="12.72" height="4.04"/>
<rect class="cls-2" x="4.64" y="9.64" width="12.72" height="6.78"/>
<rect class="cls-2" x="4.64" y="17.92" width="12.72" height="3.94"/>
</svg>

Before

Width:  |  Height:  |  Size: 2.0 KiB

After

Width:  |  Height:  |  Size: 789 B

View File

@ -4,7 +4,7 @@
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="enable-tooltip">
<rect id="Rectangle" x="0" y="0" width="100" height="100"></rect>
<path d="M85,1.90900993 C93.5,1.90900993 100,8.40900993 100,16.9090099 L100,16.9090099 L100,66.9090099 C100,75.4090099 93.5,81.9090099 85,81.9090099 L85,81.9090099 L69,81.9090099 L50,98.0909901 L31.9929123,81.9090099 L15,81.9090099 C6.5,81.9090099 0,75.4090099 0,66.9090099 L0,66.9090099 L0,16.9090099 C0,8.40900993 6.5,1.90900993 15,1.90900993 L15,1.90900993 Z M85,11.9090099 L15,11.9090099 C12,11.9090099 10,13.9090099 10,16.9090099 L10,16.9090099 L10,66.9090099 C10,69.9090099 12,71.9090099 15,71.9090099 L15,71.9090099 L34.9929123,71.9090099 L50,86.2462521 L66,71.9090099 L85,71.9090099 C88,71.9090099 90,69.9090099 90,66.9090099 L90,66.9090099 L90,16.9090099 C90,13.9090099 88,11.9090099 85,11.9090099 L85,11.9090099 Z M50,23.9090099 C62.2727273,23.9090099 72.7536364,31.5426463 77,42.3181008 C72.7536364,53.0935554 62.2727273,60.7271918 50,60.7271918 C37.7272727,60.7271918 27.2463636,53.0935554 23,42.3181008 C27.2463636,31.5426463 37.7272727,23.9090099 50,23.9090099 Z M50,30.0453736 C43.2254545,30.0453736 37.7272727,35.5435554 37.7272727,42.3181008 C37.7272727,49.0926463 43.2254545,54.5908281 50,54.5908281 C56.7745455,54.5908281 62.2727273,49.0926463 62.2727273,42.3181008 C62.2727273,35.5435554 56.7745455,30.0453736 50,30.0453736 Z M50,34.9544645 C54.0745455,34.9544645 57.3636364,38.2435554 57.3636364,42.3181008 C57.3636364,46.3926463 54.0745455,49.6817372 50,49.6817372 C45.9254545,49.6817372 42.6363636,46.3926463 42.6363636,42.3181008 C42.6363636,38.2435554 45.9254545,34.9544645 50,34.9544645 Z" id="Combined-Shape" fill="#868E96" fill-rule="nonzero"></path>
<path d="M85,1.90900993 C93.5,1.90900993 100,8.40900993 100,16.9090099 L100,16.9090099 L100,66.9090099 C100,75.4090099 93.5,81.9090099 85,81.9090099 L85,81.9090099 L69,81.9090099 L50,98.0909901 L31.9929123,81.9090099 L15,81.9090099 C6.5,81.9090099 0,75.4090099 0,66.9090099 L0,66.9090099 L0,16.9090099 C0,8.40900993 6.5,1.90900993 15,1.90900993 L15,1.90900993 Z M85,11.9090099 L15,11.9090099 C12,11.9090099 10,13.9090099 10,16.9090099 L10,16.9090099 L10,66.9090099 C10,69.9090099 12,71.9090099 15,71.9090099 L15,71.9090099 L34.9929123,71.9090099 L50,86.2462521 L66,71.9090099 L85,71.9090099 C88,71.9090099 90,69.9090099 90,66.9090099 L90,66.9090099 L90,16.9090099 C90,13.9090099 88,11.9090099 85,11.9090099 L85,11.9090099 Z M50,23.9090099 C62.2727273,23.9090099 72.7536364,31.5426463 77,42.3181008 C72.7536364,53.0935554 62.2727273,60.7271918 50,60.7271918 C37.7272727,60.7271918 27.2463636,53.0935554 23,42.3181008 C27.2463636,31.5426463 37.7272727,23.9090099 50,23.9090099 Z M50,30.0453736 C43.2254545,30.0453736 37.7272727,35.5435554 37.7272727,42.3181008 C37.7272727,49.0926463 43.2254545,54.5908281 50,54.5908281 C56.7745455,54.5908281 62.2727273,49.0926463 62.2727273,42.3181008 C62.2727273,35.5435554 56.7745455,30.0453736 50,30.0453736 Z M50,34.9544645 C54.0745455,34.9544645 57.3636364,38.2435554 57.3636364,42.3181008 C57.3636364,46.3926463 54.0745455,49.6817372 50,49.6817372 C45.9254545,49.6817372 42.6363636,46.3926463 42.6363636,42.3181008 C42.6363636,38.2435554 45.9254545,34.9544645 50,34.9544645 Z" id="Combined-Shape" fill="#000" fill-rule="nonzero"></path>
</g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 2.0 KiB

After

Width:  |  Height:  |  Size: 2.0 KiB

View File

@ -5,7 +5,7 @@
<g id="Artboard" transform="translate(-4122.000000, -116.000000)">
<g id="cursor" transform="translate(4122.000000, 116.500000)">
<rect id="Rectangle" x="0" y="0" width="100" height="100"></rect>
<path d="M93.7011678,71.6048823 L68.9420443,46.8597234 L83.347674,41.011189 C85.1475337,40.111108 86.048187,38.3115565 86.048187,36.5120692 C86.048187,34.712582 84.6979466,32.9130948 83.3470309,32.4630221 L11.3204898,5.46830329 C9.519987,4.56822224 7.71948424,5.01826276 6.36850427,6.36775768 C5.01826386,7.71786319 4.56800152,9.51746291 5.46854229,11.3169501 L32.4784952,83.302867 C32.9287897,84.6529725 34.7293246,86.0024995 36.5298274,86.0024995 C38.3303302,86.0024995 40.1308329,85.1024185 40.5811596,83.302867 L46.4329945,68.9053622 L71.192118,93.6505212 C72.092707,94.5506022 72.9926208,95 74.3436008,95 C75.6938412,95 76.5944302,94.5499595 77.4950835,93.6505212 L93.2508894,77.9036018 C95.5017188,76.1041146 95.5017188,72.9550521 93.7011839,71.6049948 L93.7011678,71.6048823 Z M74.7942007,84.2027391 L48.2344137,57.6579323 C47.3338247,56.7578513 46.4339109,56.3084535 45.0829309,56.3084535 L44.1823419,56.3084535 C42.8321015,56.758494 41.4811859,57.6579323 41.0308592,59.008086 L36.5298435,68.9058282 L17.1727105,17.1659505 L68.941787,36.5121656 L59.0378161,40.5612128 C57.6875756,41.0112533 56.7869866,42.3607 56.33666,43.710918 C55.8863655,45.0603969 56.33666,46.8606232 57.6869004,47.7599652 L84.2466875,74.304772 L74.7942007,84.2027391 Z" id="Shape" fill="#868E96" fill-rule="nonzero"></path>
<path d="M93.7011678,71.6048823 L68.9420443,46.8597234 L83.347674,41.011189 C85.1475337,40.111108 86.048187,38.3115565 86.048187,36.5120692 C86.048187,34.712582 84.6979466,32.9130948 83.3470309,32.4630221 L11.3204898,5.46830329 C9.519987,4.56822224 7.71948424,5.01826276 6.36850427,6.36775768 C5.01826386,7.71786319 4.56800152,9.51746291 5.46854229,11.3169501 L32.4784952,83.302867 C32.9287897,84.6529725 34.7293246,86.0024995 36.5298274,86.0024995 C38.3303302,86.0024995 40.1308329,85.1024185 40.5811596,83.302867 L46.4329945,68.9053622 L71.192118,93.6505212 C72.092707,94.5506022 72.9926208,95 74.3436008,95 C75.6938412,95 76.5944302,94.5499595 77.4950835,93.6505212 L93.2508894,77.9036018 C95.5017188,76.1041146 95.5017188,72.9550521 93.7011839,71.6049948 L93.7011678,71.6048823 Z M74.7942007,84.2027391 L48.2344137,57.6579323 C47.3338247,56.7578513 46.4339109,56.3084535 45.0829309,56.3084535 L44.1823419,56.3084535 C42.8321015,56.758494 41.4811859,57.6579323 41.0308592,59.008086 L36.5298435,68.9058282 L17.1727105,17.1659505 L68.941787,36.5121656 L59.0378161,40.5612128 C57.6875756,41.0112533 56.7869866,42.3607 56.33666,43.710918 C55.8863655,45.0603969 56.33666,46.8606232 57.6869004,47.7599652 L84.2466875,74.304772 L74.7942007,84.2027391 Z" id="Shape" fill="#000" fill-rule="nonzero"></path>
</g>
</g>
</g>

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

View File

@ -1,6 +1,6 @@
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd" stroke="none" stroke-width="1">
<g fill="#868E96">
<g fill="#000">
<g>
<path
d="M18.17,13.39 L16.28,13.39 L16.28,16.22 L13.44,16.22 L13.44,18.11 L16.28,18.11 L16.28,21 L18.17,21 L18.17,18.11 L21,18.11 L21,16.22 L18.17,16.22 L18.17,13.39 Z M4,18.11 L6.83,18.11 L6.83,16.22 L4.94,16.22 L4.94,14.34 L3.05,14.34 L3.05,17.17 C3.05,17.4210458 3.15039276,17.6616665 3.32884571,17.838241 C3.50729865,18.0148155 3.74896838,18.1126707 4,18.11 Z M18.17,3.94 C18.1382202,3.41127612 17.6996773,2.99904577 17.17,2.99999835 L14.39,2.99999835 L14.39,4.89 L16.28,4.89 L16.28,6.78 L18.17,6.78 L18.17,3.94 Z M4.94,4.89 L6.83,4.89 L6.83,3 L3.99999804,3 C3.74047377,2.9834001 3.48566705,3.07505767 3.29618264,3.25317302 C3.10669822,3.43128837 2.99946966,3.67994396 2.99999804,3.94 L2.99999804,6.78 L4.94,6.78 L4.94,4.89 Z M3.05,8.67 L4.94,8.67 L4.94,12.45 L3.05,12.45 L3.05,8.67 Z M16.28,8.67 L18.17,8.67 L18.17,11.5 L16.28,11.5 L16.28,8.67 Z M8.72,3 L12.5,3 L12.5,4.89 L8.72,4.89 L8.72,3 Z M8.72,16.22 L11.55,16.22 L11.55,18.11 L8.72,18.11 L8.72,16.22 Z"></path>

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@ -47,3 +47,11 @@ button.Button[data-element='LOAD_ALL_ANNOTATIONS'] > img[src='/ui/assets/icons/g
opacity: 0.5;
cursor: default;
}
.HeaderItems .Button:not(.active):not([data-element='TOGGLE_LAYERS']) > img {
filter: brightness(0) saturate(100%) invert(60%) sepia(11%) saturate(294%) hue-rotate(169deg) brightness(91%) contrast(85%);
}
.HeaderItems .Button.active > img {
filter: invert(19%) sepia(100%) saturate(791%) hue-rotate(175deg) brightness(89%) contrast(85%);
}