1
0
mirror of https://github.com/amir20/dozzle.git synced 2025-12-21 21:33:18 +01:00

Cleans up icons

This commit is contained in:
Amir Raminfar
2023-03-29 09:16:38 -07:00
parent bda832a8a3
commit 3417ec3e99
12 changed files with 51 additions and 33 deletions

View File

@@ -9,12 +9,10 @@ export {}
declare module '@vue/runtime-core' {
export interface GlobalComponents {
CarbonCaretDown: typeof import('~icons/carbon/caret-down')['default']
'Cil:checkAlt': typeof import('~icons/cil/check-alt')['default']
'Carbon:caretDown': typeof import('~icons/carbon/caret-down')['default']
'Cil:checkCircle': typeof import('~icons/cil/check-circle')['default']
'Cil:columns': typeof import('~icons/cil/columns')['default']
CilCheckAlt: typeof import('~icons/cil/check-alt')['default']
CilColumns: typeof import('~icons/cil/columns')['default']
'Cil:findInPage': typeof import('~icons/cil/find-in-page')['default']
CilFindInPage: typeof import('~icons/cil/find-in-page')['default']
ComplexLogItem: typeof import('./components/LogViewer/ComplexLogItem.vue')['default']
ContainerStat: typeof import('./components/LogViewer/ContainerStat.vue')['default']
@@ -31,14 +29,19 @@ declare module '@vue/runtime-core' {
LogLevel: typeof import('./components/LogViewer/LogLevel.vue')['default']
LogViewer: typeof import('./components/LogViewer/LogViewer.vue')['default']
LogViewerWithSource: typeof import('./components/LogViewer/LogViewerWithSource.vue')['default']
MdiDotsVertical: typeof import('~icons/mdi/dots-vertical')['default']
MdiLightChevronDoubleDown: typeof import('~icons/mdi-light/chevron-double-down')['default']
MdiLightChevronLeft: typeof import('~icons/mdi-light/chevron-left')['default']
MdiLightChevronRight: typeof import('~icons/mdi-light/chevron-right')['default']
MdiLightCog: typeof import('~icons/mdi-light/cog')['default']
MdiLightLogout: typeof import('~icons/mdi-light/logout')['default']
'Mdi:dotsVertical': typeof import('~icons/mdi/dots-vertical')['default']
'Mdi:lightChevronDoubleDown': typeof import('~icons/mdi-light/chevron-double-down')['default']
'Mdi:lightChevronLeft': typeof import('~icons/mdi-light/chevron-left')['default']
'Mdi:lightChevronRight': typeof import('~icons/mdi-light/chevron-right')['default']
'Mdi:lightCog': typeof import('~icons/mdi-light/cog')['default']
'Mdi:lightLogout': typeof import('~icons/mdi-light/logout')['default']
'Mdi:lightMagndify': typeof import('~icons/mdi-light/magndify')['default']
'Mdi:lightMagnify': typeof import('~icons/mdi-light/magnify')['default']
MdiLightMagnify: typeof import('~icons/mdi-light/magnify')['default']
MobileMenu: typeof import('./components/MobileMenu.vue')['default']
'Octicon:container24': typeof import('~icons/octicon/container24')['default']
'Octicon:download24': typeof import('~icons/octicon/download24')['default']
'Octicon:trash24': typeof import('~icons/octicon/trash24')['default']
OcticonContainer24: typeof import('~icons/octicon/container24')['default']
OcticonDownload24: typeof import('~icons/octicon/download24')['default']
OcticonTrash24: typeof import('~icons/octicon/trash24')['default']

View File

@@ -3,7 +3,7 @@
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
<span class="icon">
<mdi-dots-vertical />
<mdi:dots-vertical />
</span>
</button>
</div>
@@ -26,12 +26,14 @@
& > .icon {
height: 100%;
& > svg {
align-self: flex-start;
height: 0.85em;
}
}
}
.is-top {
& .dropdown-menu {
top: 0;

View File

@@ -14,7 +14,7 @@
<div class="media">
<div class="media-left">
<span class="icon is-small" :class="item.state">
<octicon-container-24 />
<octicon:container-24 />
</span>
</div>
<div class="media-content">
@@ -26,7 +26,7 @@
@click.stop.prevent="addColumn(item)"
:title="$t('tooltip.pin-column')"
>
<cil-columns />
<cil:columns />
</span>
</div>
</div>
@@ -130,9 +130,11 @@ function addColumn(container: Container) {
:deep(a.dropdown-item) {
padding-right: 1em;
.media-right {
visibility: hidden;
}
&:hover .media-right {
visibility: visible;
}

View File

@@ -4,7 +4,7 @@
<div class="level is-justify-content-start">
<div class="level-left">
<div class="level-item">
<octicon-trash-24 class="mr-4" />
<octicon:trash-24 class="mr-4" />
</div>
</div>
<div class="level-right">
@@ -16,7 +16,7 @@
<div class="level is-justify-content-start">
<div class="level-left">
<div class="level-item">
<octicon-download-24 class="mr-4" />
<octicon:download-24 class="mr-4" />
</div>
</div>
<div class="level-right">
@@ -29,7 +29,7 @@
<div class="level is-justify-content-start">
<div class="level-left">
<div class="level-item">
<mdi-light-magnify class="mr-4" />
<mdi:light-magnify class="mr-4" />
</div>
</div>
<div class="level-right">

View File

@@ -12,7 +12,7 @@
<div class="level is-justify-content-start">
<div class="level-left">
<div class="level-item">
<cil-find-in-page class="mr-4" />
<cil:find-in-page class="mr-4" />
</div>
</div>
<div class="level-right">
@@ -72,10 +72,12 @@ watch(
display: flex;
word-wrap: break-word;
padding: 0.2em 1em;
&:last-child {
scroll-snap-align: end;
scroll-margin-block-end: 5rem;
}
&:nth-child(odd) {
background-color: rgba(125, 125, 125, 0.08);
}

View File

@@ -29,7 +29,7 @@
<div>
<button class="button is-small is-rounded" @click="$emit('search')" :title="$t('tooltip.search')">
<span class="icon">
<mdi-light-magnify />
<mdi:light-magnify />
</span>
</button>
</div>
@@ -38,7 +38,7 @@
<div>
<router-link :to="{ name: 'settings' }" active-class="is-active" class="button is-small is-rounded">
<span class="icon">
<mdi-light-cog />
<mdi:light-cog />
</span>
</router-link>
</div>
@@ -47,7 +47,7 @@
<div>
<a class="button is-small is-rounded" :href="`${base}/logout`" :title="$t('button.logout')">
<span class="icon">
<mdi-light-logout />
<mdi:light-logout />
</span>
</a>
</div>

View File

@@ -22,7 +22,7 @@
@click="scrollToBottom()"
v-show="paused"
>
<mdi-light-chevron-double-down />
<mdi:light-chevron-double-down />
</button>
</transition>
</div>
@@ -97,6 +97,7 @@ section {
.is-scrollbar-progress {
text-align: right;
margin-right: 110px;
.scroll-progress {
position: fixed;
top: 60px;
@@ -111,6 +112,7 @@ section {
.is-scrollbar-notification {
text-align: right;
margin-right: 65px;
button {
position: fixed;
bottom: 30px;
@@ -138,9 +140,11 @@ section {
100% {
transform: translateY(0);
}
40% {
transform: translateY(-30px);
}
60% {
transform: translateY(-15px);
}
@@ -150,6 +154,7 @@ section {
.fade-leave-active {
transition: opacity 0.15s ease-in;
}
.fade-enter,
.fade-leave-to {
opacity: 0;

View File

@@ -11,7 +11,7 @@
@keyup.esc="resetSearch()"
/>
<span class="icon is-left">
<mdi-light-magnify />
<mdi:light-magnify />
</span>
</p>
</div>
@@ -52,6 +52,7 @@ onUnmounted(() => resetSearch());
margin-left: 1em;
background-color: var(--scheme-main-ter);
opacity: 0.6;
&:after,
&:before {
background-color: var(--text-color);
@@ -68,6 +69,7 @@ onUnmounted(() => resetSearch());
.input {
color: var(--body-color);
&::placeholder {
color: var(--border-color);
}

View File

@@ -19,7 +19,7 @@
<o-button variant="primary" type="button" size="small">
<span>{{ sessionHost }}</span>
<span class="icon">
<carbon-caret-down />
<carbon:caret-down />
</span>
</o-button>
</template>
@@ -35,21 +35,21 @@
<div class="column is-narrow py-0 pl-0 pr-1">
<button class="button is-rounded is-small" @click="$emit('search')" :title="$t('tooltip.search')">
<span class="icon">
<mdi-light-magnify />
<mdi:light-magnify />
</span>
</button>
</div>
<div class="column is-narrow py-0" :class="secured ? 'pl-0 pr-1' : 'px-0'">
<router-link :to="{ name: 'settings' }" active-class="is-active" class="button is-rounded is-small">
<span class="icon">
<mdi-light-cog />
<mdi:light-cog />
</span>
</router-link>
</div>
<div class="column is-narrow py-0 px-0" v-if="secured">
<a class="button is-rounded is-small" :href="`${base}/logout`" :title="$t('button.logout')">
<span class="icon">
<mdi-light-logout />
<mdi:light-logout />
</span>
</a>
</div>

View File

@@ -32,10 +32,10 @@
v-if="!isMobile"
>
<span class="icon ml-2" v-if="collapseNav">
<mdi-light-chevron-right />
<mdi:light-chevron-right />
</span>
<span class="icon" v-else>
<mdi-light-chevron-left />
<mdi:light-chevron-left />
</span>
</button>
</main>
@@ -87,6 +87,7 @@ function onResized(e: any) {
:deep(.splitpanes--vertical > .splitpanes__splitter) {
min-width: 3px;
background: var(--border-color);
&:hover {
background: var(--border-hover-color);
}
@@ -110,6 +111,7 @@ function onResized(e: any) {
position: fixed;
left: 10px;
bottom: 10px;
&.collapsed {
left: -40px;
width: 60px;

View File

@@ -48,7 +48,7 @@
@keyup.enter="onEnter()"
/>
<span class="icon is-left">
<search-icon />
<mdi:light-magnify />
</span>
</p>
</div>
@@ -75,7 +75,6 @@
</template>
<script lang="ts" setup>
import SearchIcon from "~icons/mdi-light/magnify";
import { useFuse } from "@vueuse/integrations/useFuse";
const { version } = config;

View File

@@ -39,7 +39,7 @@
<o-button variant="primary" type="button">
<span class="is-capitalized">{{ hourStyle }}</span>
<span class="icon">
<carbon-caret-down />
<carbon:caret-down />
</span>
</o-button>
</template>
@@ -64,7 +64,7 @@
<o-button variant="primary" type="button">
<span class="is-capitalized">{{ size }}</span>
<span class="icon">
<carbon-caret-down />
<carbon:caret-down />
</span>
</o-button>
</template>
@@ -92,7 +92,7 @@
<o-button variant="primary" type="button">
<span class="is-capitalized">{{ lightTheme }}</span>
<span class="icon">
<carbon-caret-down />
<carbon:caret-down />
</span>
</o-button>
</template>
@@ -177,6 +177,7 @@ fetchNextRelease();
a.next-release {
text-decoration: underline;
&:hover {
text-decoration: none;
}