mirrors/dozzle
1
0
Fork 0
mirror of https://github.com/amir20/dozzle.git synced 2026-01-04 12:05:07 +01:00
Code Issues Projects Releases Wiki Activity

Cleans up pin icons in favor of columns

Browse Source
This commit is contained in:
Amir Raminfar
2021-03-29 20:09:15 -07:00
parent c3361be731
commit 20a72c2538
2 changed files with 34 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
assets/components/FuzzySearchModal.vue
View File

@@ -14,13 +14,15 @@
<template slot-scope="props">
<div class="media">
<div class="media-left">
<span :class="props.option.state"><icon name="crate"></icon></span>
<span class="icon is-small" :class="props.option.state"><icon name="crate"></icon></span>
</div>
<div class="media-content">
{{ props.option.name }}
</div>
<div class="media-right">
<span class="column-icon" @click.stop.prevent="addColumn(props.option)"><icon name="column"></icon></span>
<span class="icon is-small column-icon" @click.stop.prevent="addColumn(props.option)" title="Pin as column">
<icon name="column"></icon>
</span>
</div>
</div>
</template>
@@ -122,5 +124,12 @@ export default {
::v-deep a.dropdown-item {
padding-right: 1em;
.media-right {
visibility: hidden;
}
i &:hover .media-right {
visibility: visible;
}
}
</style>

39
assets/components/SideMenu.vue
View File

@@ -39,15 +39,20 @@
active-class="is-active"
:title="item.name"
>
<div class="is-ellipsis">
<span
@click.stop.prevent="appendActiveContainer(item)"
class="icon is-small will-append-container"
:class="{ 'is-active': activeContainersById[item.id] }"
>
<icon name="pin"></icon>
</span>
{{ item.name }}
<div class="container is-flex is-align-items-center">
<div class="is-flex-grow-1 is-ellipsis">
{{ item.name }}
</div>
<div class="is-flex-shrink-1 column-icon">
<span
class="icon is-small"
@click.stop.prevent="appendActiveContainer(item)"
v-show="!activeContainersById[item.id]"
title="Pin as column"
>
<icon name="column"></icon>
</span>
</div>
</div>
</router-link>
</li>
@@ -108,14 +113,16 @@ li.exited a {
fill: var(--logo-color);
}
.will-append-container.icon {
transition: transform 0.2s ease-out;
&.is-active {
pointer-events: none;
color: var(--primary-color);
}
.router-link-exact-active & {
.menu-list li {
.column-icon {
visibility: hidden;
}
&:hover .column-icon {
visibility: visible;
&:hover {
color: var(--secondary-color);
}
}
}
</style>