web/satellite: new nav project dropdown

Added new project dropdown for new navigation sidebar.

Change-Id: Idbfd37cfff2218b8bfda803bdf143b8eab691200
This commit is contained in:
Vitalii Shpital 2021-10-11 17:23:41 +03:00
parent 0009447773
commit b619ce6913
18 changed files with 581 additions and 43 deletions

View File

@ -99,6 +99,10 @@ export default class App extends Vue {
-webkit-user-drag: none;
}
#app {
height: 100%;
}
@font-face {
font-family: 'font_regular';
font-style: normal;

View File

@ -83,7 +83,6 @@ export default class PaymentsBonus extends Vue {
}
.banner-logo-svg {
min-height: 64px;
min-width: 54px;
}

View File

@ -0,0 +1,159 @@
// Copyright (C) 2021 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<div v-if="!isNavigationHidden" class="navigation-area">
<LogoIcon class="navigation-area__logo" @click.stop="onLogoClick" />
<div class="navigation-area__edit">
<NewProjectSelection />
</div>
<router-link
v-for="navItem in navigation"
:key="navItem.name"
:aria-label="navItem.name"
class="navigation-area__item-container"
:to="navItem.path"
>
<div class="navigation-area__item-container__link">
<component :is="navItem.icon" class="navigation-area__item-container__link__icon" />
<p class="navigation-area__item-container__link__title">{{ navItem.name }}</p>
</div>
</router-link>
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import NewProjectSelection from '@/components/navigation/newNavigationStructure/NewProjectSelection.vue';
import LogoIcon from '@/../static/images/logo.svg';
import AccessGrantsIcon from '@/../static/images/navigation/apiKeys.svg';
import DashboardIcon from '@/../static/images/navigation/dashboard.svg';
import ObjectsIcon from '@/../static/images/navigation/objects.svg';
import TeamIcon from '@/../static/images/navigation/team.svg';
import { RouteConfig } from '@/router';
import { NavigationLink } from '@/types/navigation';
// @vue/component
@Component({
components: {
NewProjectSelection,
LogoIcon,
DashboardIcon,
AccessGrantsIcon,
TeamIcon,
ObjectsIcon,
},
})
export default class NewNavigationArea extends Vue {
public navigation: NavigationLink[] = [
RouteConfig.ProjectDashboard.withIcon(DashboardIcon),
RouteConfig.Objects.withIcon(ObjectsIcon),
RouteConfig.AccessGrants.withIcon(AccessGrantsIcon),
RouteConfig.Users.withIcon(TeamIcon),
];
/**
* Reloads page.
*/
public onLogoClick(): void {
location.reload();
}
/**
* Indicates if navigation side bar is hidden.
*/
public get isNavigationHidden(): boolean {
return this.isOnboardingTour || this.isCreateProjectPage;
}
/**
* Indicates if current route is create project page.
*/
private get isCreateProjectPage(): boolean {
return this.$route.name === RouteConfig.CreateProject.name;
}
/**
* Indicates if current route is onboarding tour.
* Overviewstep needs navigation.
*/
private get isOnboardingTour(): boolean {
return this.$route.path.includes(RouteConfig.OnboardingTour.path);
}
}
</script>
<style scoped lang="scss">
.navigation-svg-path {
fill: rgb(53, 64, 73);
}
.navigation-area {
padding: 40px 0 32px 0;
min-width: 280px;
max-width: 280px;
background-color: #fff;
display: flex;
flex-direction: column;
align-items: center;
font-family: 'font_regular', sans-serif;
overflow-y: auto;
&__logo {
cursor: pointer;
}
&__edit {
padding: 0 20px;
margin: 32px 0;
width: calc(100% - 40px);
}
&__item-container {
padding: 10px;
width: calc(100% - 20px);
display: flex;
justify-content: flex-start;
align-items: center;
margin-bottom: 40px;
text-decoration: none;
&__link {
display: flex;
justify-content: flex-start;
align-items: center;
&__icon {
min-width: 24px;
}
&__title {
font-family: 'font_medium', sans-serif;
font-size: 16px;
line-height: 23px;
color: #1b2533;
margin: 0 0 0 18px;
white-space: nowrap;
}
}
&.router-link-active,
&:hover {
font-family: 'font_bold', sans-serif;
background: #0068dc;
border-radius: 6px;
.navigation-area__item-container__link__title {
color: #fff;
}
.svg .navigation-svg-path:not(.white) {
fill: #fff;
}
}
}
}
</style>

View File

@ -0,0 +1,337 @@
// Copyright (C) 2021 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<div class="project-selection">
<div class="project-selection__selected" :class="{ active: isDropdownShown }" @click.stop.prevent="toggleSelection">
<div class="project-selection__selected__left">
<ProjectIcon class="project-selection__selected__left__image" />
<p class="project-selection__selected__left__name" :title="projectName">{{ projectName }}</p>
</div>
<ArrowImage class="project-selection__selected__arrow" />
</div>
<div v-if="isDropdownShown" v-click-outside="closeDropdown" class="project-selection__dropdown">
<div v-if="isLoading" class="project-selection__dropdown__loader-container">
<VLoader width="30px" height="30px" />
</div>
<div v-else class="project-selection__dropdown__items">
<div class="project-selection__dropdown__items__choice" @click.prevent.stop="closeDropdown">
<div class="project-selection__dropdown__items__choice__mark-container">
<CheckmarkIcon class="project-selection__dropdown__items__choice__mark-container__image" />
</div>
<p class="project-selection__dropdown__items__choice__selected">
{{ selectedProject.name }}
</p>
</div>
<div
v-for="project in projects"
:key="project.id"
class="project-selection__dropdown__items__choice"
@click.prevent.stop="onProjectSelected(project.id)"
>
<p class="project-selection__dropdown__items__choice__unselected">{{ project.name }}</p>
</div>
</div>
<div class="project-selection__dropdown__link-container" @click.stop="onProjectsLinkClick">
<ManageIcon />
<p class="project-selection__dropdown__link-container__label">Manage Projects</p>
</div>
<div class="project-selection__dropdown__link-container" @click.stop="onCreateLinkClick">
<CreateProjectIcon />
<p class="project-selection__dropdown__link-container__label">Create new</p>
</div>
</div>
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import VLoader from "@/components/common/VLoader.vue";
import { RouteConfig } from '@/router';
import { APP_STATE_ACTIONS, PM_ACTIONS } from '@/utils/constants/actionNames';
import { PROJECTS_ACTIONS } from "@/store/modules/projects";
import { LocalData } from "@/utils/localData";
import { OBJECTS_ACTIONS } from "@/store/modules/objects";
import { PAYMENTS_ACTIONS } from "@/store/modules/payments";
import { ACCESS_GRANTS_ACTIONS } from "@/store/modules/accessGrants";
import { BUCKET_ACTIONS } from "@/store/modules/buckets";
import { Project } from "@/types/projects";
import ProjectIcon from '@/../static/images/navigation/project.svg';
import ArrowImage from '@/../static/images/navigation/arrow.svg';
import CheckmarkIcon from '@/../static/images/navigation/checkmark.svg';
import ManageIcon from '@/../static/images/navigation/manage.svg';
import CreateProjectIcon from '@/../static/images/navigation/createProject.svg';
// @vue/component
@Component({
components: {
ArrowImage,
CheckmarkIcon,
ProjectIcon,
ManageIcon,
CreateProjectIcon,
VLoader,
},
})
export default class NewProjectSelection extends Vue {
private FIRST_PAGE = 1;
public isLoading = false;
/**
* Fetches projects related information and than toggles selection popup.
*/
public async toggleSelection(): Promise<void> {
if (this.isOnboardingTour) return;
this.toggleDropdown();
if (this.isLoading || !this.isDropdownShown) return;
this.isLoading = true;
try {
await this.$store.dispatch(PROJECTS_ACTIONS.FETCH);
await this.$store.dispatch(PROJECTS_ACTIONS.GET_LIMITS, this.$store.getters.selectedProject.id);
} catch (error) {
await this.$notify.error(error.message);
}
this.isLoading = false;
}
/**
* Toggles project dropdown visibility.
*/
public toggleDropdown(): void {
this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_SELECT_PROJECT_DROPDOWN);
}
/**
* Fetches all project related information.
* @param projectID
*/
public async onProjectSelected(projectID: string): Promise<void> {
await this.$store.dispatch(PROJECTS_ACTIONS.SELECT, projectID);
LocalData.setSelectedProjectId(projectID);
await this.$store.dispatch(PM_ACTIONS.SET_SEARCH_QUERY, '');
this.closeDropdown();
if (this.isObjectsView) {
await this.$store.dispatch(OBJECTS_ACTIONS.CLEAR);
await this.$router.push({name: RouteConfig.Objects.name}).catch(() => {return; });
}
try {
await this.$store.dispatch(PAYMENTS_ACTIONS.GET_PROJECT_USAGE_AND_CHARGES_CURRENT_ROLLUP);
await this.$store.dispatch(PM_ACTIONS.FETCH, this.FIRST_PAGE);
await this.$store.dispatch(ACCESS_GRANTS_ACTIONS.FETCH, this.FIRST_PAGE);
await this.$store.dispatch(BUCKET_ACTIONS.FETCH, this.FIRST_PAGE);
await this.$store.dispatch(PROJECTS_ACTIONS.GET_LIMITS, this.$store.getters.selectedProject.id);
} catch (error) {
await this.$notify.error(`Unable to select project. ${error.message}`);
}
}
/**
* Indicates if current route is onboarding tour.
*/
public get isOnboardingTour(): boolean {
return this.$route.path.includes(RouteConfig.OnboardingTour.path);
}
/**
* Returns selected project's name.
*/
public get projectName(): string {
return this.$store.getters.selectedProject.name;
}
/**
* Indicates if dropdown is shown.
*/
public get isDropdownShown(): string {
return this.$store.state.appStateModule.appState.isSelectProjectDropdownShown;
}
/**
* Returns projects list from store.
*/
public get projects(): Project[] {
return this.$store.getters.projectsWithoutSelected;
}
/**
* Returns selected project from store.
*/
public get selectedProject(): Project {
return this.$store.getters.selectedProject;
}
/**
* Closes select project dropdown.
*/
public closeDropdown(): void {
if (!this.isDropdownShown) return;
this.$store.dispatch(APP_STATE_ACTIONS.CLOSE_POPUPS);
}
/**
* Route to projects list page.
*/
public onProjectsLinkClick(): void {
if (this.$route.name !== RouteConfig.ProjectsList.name) {
this.$router.push(RouteConfig.ProjectsList.path);
}
this.closeDropdown();
}
/**
* Route to create project page.
*/
public onCreateLinkClick(): void {
if (this.$route.name !== RouteConfig.CreateProject.name) {
this.$router.push(RouteConfig.CreateProject.path);
}
this.closeDropdown();
}
/**
* Indicates if current route is objects view.
*/
private get isObjectsView(): boolean {
return this.$route.path.includes(RouteConfig.Objects.path);
}
}
</script>
<style scoped lang="scss">
.project-selection {
font-family: 'font_regular', sans-serif;
position: relative;
width: 100%;
&__selected {
border: 1px solid #ebeef1;
box-sizing: border-box;
border-radius: 8px;
padding: 18px;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
&__left {
display: flex;
align-items: center;
&__name {
font-weight: 500;
font-size: 14px;
line-height: 20px;
color: #56606d;
margin-left: 24px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
&__arrow {
min-width: 14px;
}
}
&__dropdown {
position: absolute;
top: calc(100% - 5px);
left: 0;
width: 100%;
background-color: #fff;
box-shadow: 0 2px 16px rgba(0, 0, 0, 0.1);
border-radius: 0 0 8px 8px;
z-index: 1;
&__loader-container {
margin: 10px 0;
display: flex;
align-items: center;
justify-content: center;
}
&__items {
overflow-y: auto;
max-height: 250px;
background-color: #fff;
border-radius: 6px;
&__choice {
display: flex;
align-items: center;
padding: 8px 16px;
cursor: pointer;
height: 32px;
&__selected,
&__unselected {
font-size: 14px;
line-height: 20px;
color: #1b2533;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
&__selected {
font-family: 'font_medium', sans-serif;
margin-left: 24px;
}
&__unselected {
padding-left: 40px;
}
&:hover {
background-color: #f5f6fa;
}
&__mark-container {
width: 16px;
height: 16px;
&__image {
object-fit: cover;
}
}
}
}
&__link-container {
padding: 8px 16px;
height: 32px;
cursor: pointer;
display: flex;
align-items: center;
border-top: 1px solid #ebeef1;
&__label {
font-size: 14px;
line-height: 20px;
color: #0149ff;
margin-left: 24px;
}
}
}
}
.active {
background-color: #fafafb;
}
</style>

View File

@ -18,7 +18,10 @@
<PaidTierBar v-if="!creditCards.length && !isOnboardingTour" :open-add-p-m-modal="togglePMModal" />
<MFARecoveryCodeBar v-if="showMFARecoveryCodeBar" :open-generate-modal="generateNewMFARecoveryCodes" />
<template v-if="isNewNavStructure">
<router-view />
<div class="dashboard__wrap__new-main-area">
<NewNavigationArea />
<router-view class="dashboard__wrap__new-main-area__content" />
</div>
</template>
<template v-else>
<DashboardHeader />
@ -44,6 +47,7 @@ import MFARecoveryCodesPopup from '@/components/account/mfa/MFARecoveryCodesPopu
import MFARecoveryCodeBar from '@/components/account/mfa/MFARecoveryCodeBar.vue';
import DashboardHeader from '@/components/header/HeaderArea.vue';
import NavigationArea from '@/components/navigation/NavigationArea.vue';
import NewNavigationArea from '@/components/navigation/newNavigationStructure/NewNavigationArea.vue';
import LoaderImage from '@/../static/images/common/loader.svg';
@ -70,6 +74,7 @@ const {
@Component({
components: {
NavigationArea,
NewNavigationArea,
DashboardHeader,
LoaderImage,
PaidTierBar,
@ -362,6 +367,17 @@ export default class DashboardArea extends Vue {
position: relative;
}
}
&__new-main-area {
display: flex;
width: 100%;
height: 100%;
&__content {
width: 100%;
overflow-y: auto;
}
}
}
}

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 59 KiB

After

Width:  |  Height:  |  Size: 57 KiB

View File

@ -0,0 +1,3 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.83987 16.8885L1.47448 17.0988C1.17636 17.1175 0.919588 16.8909 0.900956 16.5928C0.899551 16.5703 0.899551 16.5478 0.900956 16.5253L1.11129 13.1599C1.11951 13.0284 1.17546 12.9044 1.26864 12.8112L5.58927 8.4905L5.57296 8.43607C4.98999 6.44536 5.49345 4.26189 6.96116 2.7231L7.00936 2.67316L7.05933 2.62259C9.35625 0.325673 13.0803 0.325673 15.3772 2.62259C17.6741 4.9195 17.6741 8.64354 15.3772 10.9405C13.8503 12.4673 11.6456 13.0111 9.62856 12.4454L9.56357 12.4268L9.50918 12.4106L5.18856 16.7311C5.09538 16.8243 4.97139 16.8803 4.83987 16.8885ZM2.45229 15.5476L4.38997 15.4264L9.13372 10.6826L9.58862 10.8639C11.2073 11.509 13.072 11.1423 14.3255 9.88877C16.0416 8.17269 16.0416 5.39036 14.3255 3.67427C12.6094 1.95819 9.8271 1.95819 8.11101 3.67427C6.87177 4.91351 6.49924 6.75008 7.11424 8.35578L7.13584 8.41105L7.31711 8.86593L2.57342 13.6099L2.45229 15.5476ZM10.7858 7.21399C11.3666 7.79482 12.3083 7.79482 12.8892 7.21399C13.47 6.63316 13.47 5.69145 12.8892 5.11062C12.3083 4.52979 11.3666 4.52979 10.7858 5.11062C10.205 5.69145 10.205 6.63316 10.7858 7.21399Z" fill="#56606D"/>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.42663 11.6268C8.19665 11.8568 7.82726 11.8624 7.59048 11.6437L7.57298 11.6268L0.976601 5.03045C0.740873 4.79472 0.740873 4.41253 0.976601 4.1768C1.20658 3.94682 1.57597 3.94121 1.81274 4.15997L1.83025 4.1768L7.99973 10.3464L14.1694 4.1768C14.3993 3.94682 14.7687 3.94121 15.0055 4.15997L15.023 4.1768C15.253 4.40678 15.2586 4.77616 15.0398 5.01294L15.023 5.03045L8.42663 11.6268Z" fill="#56606D"/>
</svg>

After

Width:  |  Height:  |  Size: 517 B

View File

@ -0,0 +1,3 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.3547 7.54653C17.7618 8.95364 17.7747 11.2268 16.3776 12.6239C15.8115 13.19 15.1016 13.5246 14.3637 13.6287L14.1104 15.0637C14.0918 16.1895 11.7876 17.0999 8.94789 17.0999C6.12523 17.0999 3.83167 16.2004 3.78608 15.084L3.78565 15.0637L1.84447 4.06585C1.82262 3.98807 1.80863 3.90934 1.80285 3.8298L1.7998 3.81209L1.80171 3.81219C1.80044 3.79015 1.7998 3.76806 1.7998 3.7459C1.7998 2.1741 5.00011 0.899902 8.94789 0.899902C12.8957 0.899902 16.096 2.1741 16.096 3.7459C16.096 3.76806 16.0953 3.79015 16.0941 3.81219L16.096 3.81209L16.0928 3.83099C16.087 3.90963 16.0732 3.98747 16.0517 4.06439L15.5747 6.7665L16.3547 7.54653ZM14.296 5.63425C12.9865 6.22171 11.0758 6.5919 8.94789 6.5919C6.82008 6.5919 4.90941 6.22173 3.59996 5.63431L5.00705 13.6076L5.23711 14.8285L5.25842 14.845C5.37874 14.9353 5.56496 15.037 5.80678 15.135L5.85588 15.1545C6.63533 15.4593 7.746 15.6438 8.94789 15.6438C10.1567 15.6438 11.2731 15.4572 12.0526 15.1495C12.3335 15.0387 12.543 14.9222 12.6659 14.823L12.6759 14.8147L12.9017 13.5347C12.3336 13.3786 11.7953 13.0811 11.3427 12.6428L11.3002 12.601L8.37469 9.67546C8.09038 9.39114 8.09038 8.93017 8.37469 8.64585C8.65208 8.36847 9.09761 8.3617 9.38319 8.62555L9.40431 8.64585L12.3298 11.5714C12.5715 11.8131 12.8553 11.9859 13.1567 12.09L14.296 5.63425ZM15.2659 8.51685L14.6406 12.0596C14.8987 11.9574 15.14 11.8023 15.348 11.5943C16.1639 10.7783 16.1662 9.4493 15.3548 8.6064L15.3251 8.57615L15.2659 8.51685ZM8.94789 2.35599C7.20107 2.35599 5.58107 2.62881 4.43205 3.08629C3.93833 3.28286 3.57099 3.49935 3.35958 3.69836C3.34611 3.71104 3.33381 3.72312 3.32265 3.73457L3.31202 3.74577L3.33123 3.76594L3.35958 3.79345C3.57099 3.99246 3.93833 4.20894 4.43205 4.40552C5.58107 4.863 7.20107 5.13581 8.94789 5.13581C10.6947 5.13581 12.3147 4.863 13.4637 4.40552C13.9575 4.20894 14.3248 3.99246 14.5362 3.79345C14.5497 3.78077 14.562 3.76868 14.5731 3.75723L14.5839 3.74577L14.5646 3.72587L14.5362 3.69836C14.3248 3.49935 13.9575 3.28286 13.4637 3.08629C12.3147 2.62881 10.6947 2.35599 8.94789 2.35599Z" fill="#56606D"/>
</svg>

After

Width:  |  Height:  |  Size: 2.1 KiB

View File

@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.0562 3.47043C14.4081 3.82228 14.4166 4.3874 14.082 4.74964L14.0562 4.77643L7.13789 11.6948C7.00227 11.8304 6.83571 11.9169 6.66064 11.9538C6.35959 12.0544 6.01439 11.9909 5.76634 11.7589L5.75557 11.7486L1.87009 7.86332C1.50945 7.50268 1.50945 6.91797 1.87009 6.55733C2.22193 6.20548 2.78706 6.1969 3.1493 6.53158L3.17608 6.55733L6.41982 9.80083L12.7502 3.47043C13.1109 3.10979 13.6956 3.10979 14.0562 3.47043Z" fill="#00F08B"/>
</svg>

After

Width:  |  Height:  |  Size: 548 B

View File

@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.9998 0.800049C11.9763 0.800049 15.1998 4.0236 15.1998 8.00005C15.1998 11.9765 11.9763 15.2 7.9998 15.2C4.02335 15.2 0.799805 11.9765 0.799805 8.00005C0.799805 4.0236 4.02335 0.800049 7.9998 0.800049ZM7.9998 2.12005C4.75237 2.12005 2.1198 4.75261 2.1198 8.00005C2.1198 11.2475 4.75237 13.88 7.9998 13.88C11.2472 13.88 13.8798 11.2475 13.8798 8.00005C13.8798 4.75261 11.2472 2.12005 7.9998 2.12005ZM8.59945 5.51917L8.59972 5.52979L8.59968 7.37845H10.3939C10.7621 7.37845 11.064 7.67044 11.0762 8.03845C11.088 8.39103 10.8117 8.68636 10.4591 8.6981L10.4485 8.69836L8.59968 8.69845L8.5998 10.5368C8.5998 10.9014 8.30431 11.1968 7.9398 11.1968C7.58419 11.1968 7.29426 10.9156 7.28033 10.5634L7.2798 10.5368L7.27968 8.69845H5.4414C5.0769 8.69845 4.7814 8.40296 4.7814 8.03845C4.7814 7.68283 5.06266 7.3929 5.41486 7.37897L5.4414 7.37845H7.27968L7.2798 5.58433C7.2798 5.21613 7.5718 4.91425 7.9398 4.90201C8.29239 4.89028 8.58772 5.16659 8.59945 5.51917Z" fill="#0047FF"/>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.24777 0.800049C9.90503 0.800049 10.4378 1.33284 10.4378 1.9901L10.4378 2.18417C10.4378 2.62551 10.7956 2.98329 11.2369 2.9833C11.3772 2.98331 11.515 2.94638 11.6365 2.87625L11.8046 2.7792C12.3738 2.45058 13.1016 2.64561 13.4303 3.21481L14.8584 5.68835C15.1812 6.24756 14.9987 6.9599 14.4524 7.29636L14.4227 7.31401L14.2547 7.41102C13.8915 7.62073 13.767 8.0852 13.9767 8.44845C14.0434 8.56391 14.1392 8.65978 14.2547 8.72644L14.3633 8.78913C14.9325 9.11776 15.1275 9.8456 14.7989 10.4148L13.4303 12.7853C13.1074 13.3445 12.3992 13.5426 11.8347 13.2377L11.8046 13.2209L11.6365 13.1238C11.2543 12.9031 10.7656 13.0341 10.5449 13.4163C10.4747 13.5378 10.4378 13.6756 10.4378 13.8159L10.4378 14.01C10.4379 14.6561 9.92297 15.182 9.28111 15.1996L9.24777 15.2H6.39157C5.73432 15.2 5.2015 14.6672 5.20146 14.01L5.20145 13.919C5.20144 13.5105 4.8703 13.1793 4.46183 13.1794C4.332 13.1794 4.20446 13.2135 4.09203 13.2785L4.01326 13.3239C3.45406 13.6468 2.74172 13.4643 2.40525 12.918L2.38759 12.8884L0.959492 10.4148C0.630894 9.8456 0.825905 9.11777 1.39508 8.7891L1.56321 8.69202C1.94541 8.47134 2.07635 7.98262 1.85567 7.60042C1.78553 7.47894 1.68465 7.37806 1.56316 7.30793L1.39512 7.21092C0.835856 6.88813 0.637769 6.17995 0.942603 5.61541L0.959492 5.58529L2.32809 3.21481C2.65673 2.64561 3.38456 2.45059 3.95378 2.7792L4.06228 2.84184C4.42552 3.05156 4.88999 2.92709 5.09971 2.56385C5.16636 2.44841 5.20145 2.31745 5.20145 2.18415L5.20146 1.99013C5.2015 1.33288 5.73432 0.800049 6.39157 0.800049H9.24777ZM6.51063 2.10902L6.51054 2.18418C6.51054 2.54726 6.41496 2.90394 6.23342 3.21839C5.66902 4.19598 4.42714 4.53859 3.44319 3.99557L3.40237 3.97233L2.15279 6.13662L2.21765 6.17419C2.52213 6.34997 2.77756 6.59894 2.961 6.89818L2.98936 6.94584C3.5647 7.9423 3.23411 9.21322 2.2531 9.80487L2.21779 9.82571L2.15279 9.86324L3.462 12.1309L3.48698 12.1171C3.76948 11.9642 4.08399 11.88 4.40507 11.8711L4.46179 11.8703C5.56725 11.8702 6.46823 12.7458 6.5091 13.8412L6.51039 13.891H9.12881L9.12873 13.8159C9.12872 13.4643 9.21664 13.1186 9.3841 12.8101L9.4112 12.7617C9.98655 11.7652 11.2525 11.4161 12.2554 11.97L12.2911 11.9901L12.3561 12.0275L13.6057 9.86324L13.6001 9.86015C13.3014 9.68766 13.0508 9.44336 12.8708 9.14973L12.843 9.10296C12.2786 8.12536 12.6029 6.87857 13.5651 6.29799L13.6002 6.2773L13.6652 6.2398L12.3561 3.97233L12.291 4.00996C11.9865 4.18574 11.6432 4.28244 11.2923 4.29167L11.2369 4.2924C10.0856 4.29237 9.14994 3.36956 9.12908 2.22313L9.12873 2.18396L9.12881 2.10914L6.51063 2.10902ZM7.92147 4.72732C9.72895 4.72732 11.1942 6.19257 11.1942 8.00005C11.1942 9.80753 9.72895 11.2728 7.92147 11.2728C6.114 11.2728 4.64875 9.80753 4.64875 8.00005C4.64875 6.19257 6.114 4.72732 7.92147 4.72732ZM7.92147 6.03641C6.83699 6.03641 5.95784 6.91556 5.95784 8.00005C5.95784 9.08453 6.83699 9.96369 7.92147 9.96369C9.00596 9.96369 9.88511 9.08453 9.88511 8.00005C9.88511 6.91556 9.00596 6.03641 7.92147 6.03641Z" fill="#0047FF"/>
</svg>

After

Width:  |  Height:  |  Size: 3.0 KiB

View File

@ -0,0 +1,3 @@
<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.95639 0.869391L8.9817 0.883239L14.7099 4.19135C14.9014 4.30195 15.0042 4.48933 15.0184 4.6824L15.0196 4.70478L15.0201 4.72974V11.2863C15.0201 11.4991 14.9111 11.6965 14.7325 11.81L14.7088 11.8243L8.9806 15.1175C8.79663 15.2232 8.57203 15.2274 8.38493 15.1301L8.35966 15.1162L2.68707 11.823C2.50373 11.7166 2.38796 11.5243 2.37863 11.3138L2.37793 11.2863L2.37814 4.71807L2.37793 4.6991C2.37906 4.49418 2.48173 4.29502 2.66548 4.17829L2.68791 4.16468L8.36055 0.883452C8.53556 0.782217 8.74769 0.773137 8.92937 0.856235L8.95639 0.869391ZM13.7788 5.80398L9.29188 8.39516V13.5066L13.7788 10.9271V5.80398ZM3.61933 5.80917V10.9289L8.05057 13.5013V8.39335L3.61933 5.80917ZM8.67145 2.1375L4.21121 4.71739L8.6728 7.31928L13.1583 4.72879L8.67145 2.1375Z" fill="#56606D"/>
</svg>

After

Width:  |  Height:  |  Size: 880 B

View File

@ -0,0 +1,3 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.9999 2.69995C13.4734 2.69995 17.0999 6.29647 17.0999 10.733C17.0999 12.3941 16.5915 13.9374 15.7207 15.2183H2.27915C1.40828 13.9374 0.899902 12.3941 0.899902 10.733C0.899902 6.29647 4.5264 2.69995 8.9999 2.69995ZM8.9999 4.17268C5.33704 4.17268 2.37263 7.11259 2.37263 10.733C2.37263 11.765 2.61287 12.7593 3.06475 13.656L3.11087 13.7455H14.8889L14.8921 13.7398C15.3587 12.8462 15.6132 11.8525 15.6266 10.8192L15.6272 10.733C15.6272 7.11259 12.6628 4.17268 8.9999 4.17268ZM11.7821 8.02523C12.0678 8.29853 12.0855 8.74671 11.8279 9.04146L11.8052 9.06634L9.53203 11.4428C9.25092 11.7367 8.7848 11.7471 8.49091 11.466C8.20519 11.1927 8.18746 10.7445 8.44502 10.4497L8.46778 10.4248L10.7409 8.04836C11.022 7.75448 11.4882 7.74412 11.7821 8.02523Z" fill="#56606D"/>
</svg>

After

Width:  |  Height:  |  Size: 879 B

View File

@ -0,0 +1,3 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.00321 12.5637C9.40013 12.5637 9.72373 12.8777 9.73928 13.2708L9.73986 13.3004V16.3633C9.73986 16.7701 9.41005 17.0999 9.00321 17.0999C8.60629 17.0999 8.28269 16.786 8.26715 16.3929L8.26656 16.3633V13.3004C8.26656 12.8936 8.59637 12.5637 9.00321 12.5637ZM12.5825 11.5385L12.6069 11.5618L14.7307 13.6855C15.0184 13.9732 15.0184 14.4396 14.7307 14.7273C14.451 15.007 14.0024 15.0148 13.7133 14.7506L13.6889 14.7273L11.5651 12.6035C11.2774 12.3159 11.2774 11.8494 11.5651 11.5618C11.8366 11.2903 12.2672 11.275 12.5566 11.5159L12.5825 11.5385ZM6.48415 11.4846C6.7631 11.765 6.76968 12.2137 6.50477 12.5021L6.4814 12.5264L4.29031 14.7019C4.00187 14.9888 3.53545 14.9876 3.24853 14.6992C2.96958 14.4187 2.963 13.9701 3.22792 13.6817L3.25129 13.6574L5.44237 11.4819C5.73081 11.1949 6.19723 11.1962 6.48415 11.4846ZM4.70534 8.26321C5.11218 8.26321 5.44199 8.59302 5.44199 8.99986C5.44199 9.39678 5.12808 9.72038 4.73497 9.73592L4.70534 9.73651H1.63655C1.22971 9.73651 0.899902 9.4067 0.899902 8.99986C0.899902 8.60294 1.21382 8.27934 1.60693 8.26379L1.63655 8.26321H4.70534ZM16.3668 8.26321C16.7736 8.26321 17.1034 8.59302 17.1034 8.99986C17.1034 9.39678 16.7895 9.72038 16.3964 9.73592L16.3668 9.73651H13.422C13.0152 9.73651 12.6854 9.4067 12.6854 8.99986C12.6854 8.60294 12.9993 8.27934 13.3924 8.26379L13.422 8.26321H16.3668ZM4.28844 3.24438L4.31282 3.26769L6.44387 5.39874C6.73155 5.68642 6.73155 6.15284 6.44387 6.44052C6.16419 6.72021 5.71555 6.72798 5.42647 6.46383L5.40209 6.44052L3.27104 4.30947C2.98336 4.02179 2.98336 3.55537 3.27104 3.26769C3.54251 2.99623 3.97313 2.98092 4.26253 3.22178L4.28844 3.24438ZM14.7335 3.27475C15.0125 3.55517 15.0191 4.00383 14.7542 4.29221L14.7308 4.31652L12.6582 6.3742C12.3697 6.66112 11.9033 6.65989 11.6164 6.37145C11.3374 6.09102 11.3309 5.64236 11.5958 5.35399L11.6191 5.32967L13.6918 3.27199C13.9802 2.98507 14.4466 2.98631 14.7335 3.27475ZM9.00321 0.899902C9.40013 0.899902 9.72373 1.21382 9.73928 1.60693L9.73986 1.63655V4.58281C9.73986 4.98965 9.41005 5.31946 9.00321 5.31946C8.60629 5.31946 8.28269 5.00554 8.26715 4.61244L8.26656 4.58281V1.63655C8.26656 1.22971 8.59637 0.899902 9.00321 0.899902Z" fill="#56606D"/>
</svg>

After

Width:  |  Height:  |  Size: 2.2 KiB

View File

@ -0,0 +1,3 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.1279 3.60026C14.9368 3.60439 15.3607 3.69002 15.8015 3.92576C16.2191 4.14911 16.5509 4.4809 16.7742 4.89854C17.016 5.35063 17.0999 5.78498 17.0999 6.63504V11.919C17.0956 12.7279 17.01 13.1518 16.7742 13.5926C16.5509 14.0102 16.2191 14.342 15.8015 14.5653C15.372 14.795 14.9585 14.8822 14.1894 14.8904L14.065 14.891H3.93484C3.08478 14.891 2.65044 14.8071 2.19834 14.5653C1.78071 14.342 1.44891 14.0102 1.22556 13.5926C0.995867 13.1631 0.908685 12.7496 0.900541 11.9805L0.899902 11.8561V6.63504C0.899902 5.78498 0.983778 5.35063 1.22556 4.89854C1.44891 4.4809 1.78071 4.14911 2.19834 3.92576C2.65044 3.68397 3.08478 3.6001 3.93484 3.6001L14.1279 3.60026ZM8.26354 4.9501L3.88469 4.95019C3.31057 4.9523 3.08417 4.99178 2.8723 5.09696L2.835 5.1162C2.65263 5.21374 2.51354 5.35283 2.41601 5.53519C2.29312 5.76498 2.2499 5.98878 2.2499 6.63504V11.9062C2.25211 12.4813 2.29171 12.7075 2.39726 12.9196L2.41601 12.9559C2.51354 13.1383 2.65263 13.2774 2.835 13.3749C3.06478 13.4978 3.28858 13.541 3.93484 13.541H8.26354V4.9501ZM14.1151 4.95019L9.61354 4.9501V13.5409L14.1151 13.5409C14.6727 13.5389 14.9023 13.5016 15.1092 13.4031L15.1285 13.3936L15.1648 13.3749C15.3472 13.2774 15.4863 13.1383 15.5838 12.9559C15.7067 12.7261 15.7499 12.5023 15.7499 11.8561L15.7498 6.58489C15.7477 6.01077 15.7082 5.78436 15.603 5.5725L15.5838 5.53519C15.4863 5.35283 15.3472 5.21374 15.1648 5.1162L15.145 5.10579L15.1285 5.09746C15.1111 5.08877 15.0935 5.08053 15.0757 5.07272C15.074 5.07197 15.0722 5.07119 15.0704 5.07041L15.0757 5.07272C15.0708 5.07061 15.066 5.06853 15.0611 5.06647L15.0704 5.07041C15.0624 5.067 15.0545 5.06367 15.0464 5.06042L15.0611 5.06647C15.0541 5.06353 15.0471 5.06064 15.0399 5.05782L15.0464 5.06042C15.0422 5.05871 15.0379 5.05702 15.0337 5.05536L15.0399 5.05782C15.0266 5.05252 15.013 5.04745 14.9991 5.04259C14.9968 5.04178 14.9944 5.04097 14.9921 5.04016L14.9991 5.04259C14.9908 5.03968 14.9823 5.03684 14.9738 5.03409C14.9475 5.02561 14.9201 5.01786 14.891 5.0108C14.887 5.00983 14.8831 5.00888 14.879 5.00795L14.891 5.0108C14.8823 5.00869 14.8735 5.00664 14.8645 5.00465L14.879 5.00795C14.8712 5.00613 14.8633 5.00436 14.8553 5.00263L14.8645 5.00465C14.8564 5.00284 14.8481 5.00109 14.8397 4.99938L14.8553 5.00263C14.8479 5.00106 14.8405 4.99953 14.8329 4.99803L14.8397 4.99938C14.8153 4.99445 14.7899 4.98994 14.7631 4.98582C14.7581 4.98506 14.7531 4.9843 14.748 4.98357L14.7631 4.98582C14.7547 4.98453 14.7461 4.98328 14.7375 4.98207L14.748 4.98357C14.7246 4.98016 14.7001 4.97704 14.6745 4.9742C14.6658 4.97324 14.6569 4.9723 14.6479 4.97139C14.6354 4.97013 14.6227 4.96894 14.6097 4.96781C14.5936 4.96641 14.5771 4.9651 14.5602 4.96388C14.5551 4.96351 14.55 4.96315 14.5448 4.9628L14.5602 4.96388C14.5478 4.96299 14.5353 4.96214 14.5224 4.96134L14.5448 4.9628C14.5332 4.96201 14.5214 4.96127 14.5095 4.96056L14.5224 4.96134C14.5116 4.96067 14.5005 4.96002 14.4893 4.95941L14.5095 4.96056C14.4817 4.95892 14.4527 4.95748 14.4225 4.95625C14.4213 4.9562 14.4201 4.95615 14.4188 4.9561L14.4225 4.95625C14.4108 4.95577 14.3989 4.95532 14.3869 4.9549L14.4188 4.9561C14.3748 4.95432 14.3281 4.95297 14.2783 4.95199C14.2562 4.95156 14.2336 4.95121 14.2103 4.95092L14.1151 4.95019ZM6.2999 10.7796C6.67269 10.7796 6.9749 11.0819 6.9749 11.4546C6.9749 11.8183 6.68726 12.1149 6.32705 12.1291L6.2999 12.1296H4.09081C3.71802 12.1296 3.41581 11.8274 3.41581 11.4546C3.41581 11.0909 3.70346 10.7944 4.06366 10.7802L4.09081 10.7796H6.2999ZM13.1113 10.7796C13.4841 10.7796 13.7863 11.0819 13.7863 11.4546C13.7863 11.8183 13.4986 12.1149 13.1384 12.1291L13.1113 12.1296H11.5158C11.143 12.1296 10.8408 11.8274 10.8408 11.4546C10.8408 11.0909 11.1285 10.7944 11.4887 10.7802L11.5158 10.7796H13.1113ZM6.2999 8.57055C6.67269 8.57055 6.9749 8.87276 6.9749 9.24555C6.9749 9.60925 6.68726 9.90577 6.32705 9.92002L6.2999 9.92055H4.09081C3.71802 9.92055 3.41581 9.61834 3.41581 9.24555C3.41581 8.88185 3.70346 8.58534 4.06366 8.57109L4.09081 8.57055H6.2999ZM13.7249 8.57055C14.0977 8.57055 14.3999 8.87276 14.3999 9.24555C14.3999 9.60925 14.1123 9.90577 13.7521 9.92002L13.7249 9.92055H11.5158C11.143 9.92055 10.8408 9.61834 10.8408 9.24555C10.8408 8.88185 11.1285 8.58534 11.4887 8.57109L11.5158 8.57055H13.7249ZM6.2999 6.36146C6.67269 6.36146 6.9749 6.66367 6.9749 7.03646C6.9749 7.40016 6.68726 7.69668 6.32705 7.71093L6.2999 7.71146H4.09081C3.71802 7.71146 3.41581 7.40925 3.41581 7.03646C3.41581 6.67276 3.70346 6.37625 4.06366 6.362L4.09081 6.36146H6.2999ZM13.7249 6.36146C14.0977 6.36146 14.3999 6.66367 14.3999 7.03646C14.3999 7.40016 14.1123 7.69668 13.7521 7.71093L13.7249 7.71146H11.5158C11.143 7.71146 10.8408 7.40925 10.8408 7.03646C10.8408 6.67276 11.1285 6.37625 11.4887 6.362L11.5158 6.36146H13.7249Z" fill="#56606D"/>
</svg>

After

Width:  |  Height:  |  Size: 4.7 KiB

View File

@ -0,0 +1,3 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.706 3.6001C13.56 3.6001 15.0629 5.10304 15.0629 6.95702C15.0629 7.90706 14.6654 8.79098 13.9894 9.41791L13.9419 9.46089L13.975 9.47528C15.2884 10.0528 16.3478 11.105 16.9302 12.4335L16.9594 12.5013L16.9873 12.5684L17.0261 12.6652C17.0749 12.7965 17.0999 12.9355 17.0999 13.0757C17.0999 13.7015 16.6112 14.2155 15.9889 14.2518L15.9555 14.2533L15.9218 14.2538H7.46736C7.31149 14.2538 7.15705 14.224 7.01235 14.1661C6.38496 13.9148 6.08009 13.2025 6.33177 12.5741C6.89889 11.1808 7.98433 10.076 9.34077 9.4777L9.4077 9.44869L9.44125 9.4346L9.40493 9.40114C9.29824 9.30069 9.19818 9.19336 9.10543 9.07988L9.05066 9.01106L9.03417 8.98914L9.0049 9.02734C8.68761 9.43187 8.28058 9.76016 7.81582 9.98374L7.75487 10.0123L7.70102 10.0362L7.64881 10.0628C7.31336 10.2281 6.94881 10.3266 6.57429 10.3526L6.50396 10.3567L6.43734 10.3589L6.37503 10.3596L6.31812 10.3592L6.26293 10.3596C4.61058 10.3797 3.12361 11.3274 2.39647 12.7825L2.37142 12.8334L2.34737 12.8837L4.47011 12.8837C4.82977 12.8837 5.12469 13.1609 5.15295 13.5133L5.15462 13.5412L5.15517 13.5688C5.15517 13.9379 4.86324 14.2388 4.49766 14.2533L4.47011 14.2538H2.12363C1.44778 14.2538 0.899902 13.706 0.899902 13.0301C0.899902 12.909 0.917894 12.7886 0.954094 12.6704L0.970724 12.62L0.98803 12.5741C1.55513 11.1808 2.64051 10.076 3.9969 9.47776L4.06383 9.44874L4.0972 9.43473L4.09132 9.42933C3.43537 8.82705 3.03867 7.98468 3.00735 7.07377L3.00583 7.01427L3.00535 6.95702C3.00535 5.10304 4.50829 3.6001 6.36227 3.6001C7.40659 3.6001 8.36889 4.08088 8.9975 4.87709L9.03417 4.9244L9.03625 4.92166C9.64136 4.12824 10.5729 3.63614 11.5924 3.602L11.6491 3.60057L11.706 3.6001ZM11.6607 10.3592L11.6067 10.3596C9.93605 10.38 8.43442 11.3485 7.71632 12.831L7.69118 12.8837H15.63L15.6286 12.8804C14.9368 11.4063 13.4748 10.426 11.8323 10.3625L11.7749 10.3607L11.7188 10.3596L11.6607 10.3592ZM11.706 4.9702C10.6087 4.9702 9.7192 5.85973 9.7192 6.95702C9.7192 8.05431 10.6087 8.94384 11.706 8.94384C12.8033 8.94384 13.6928 8.05431 13.6928 6.95702C13.6928 5.85973 12.8033 4.9702 11.706 4.9702ZM6.36227 4.9702C5.26498 4.9702 4.37545 5.85973 4.37545 6.95702C4.37545 8.05431 5.26498 8.94384 6.36227 8.94384C7.45956 8.94384 8.34909 8.05431 8.34909 6.95702C8.34909 5.85973 7.45956 4.9702 6.36227 4.9702Z" fill="#56606D"/>
</svg>

After

Width:  |  Height:  |  Size: 2.3 KiB