RPJosh
/
memories
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improve select button

pull/162/head
Varun Patil 2022-10-30 14:59:14 -07:00
parent 07f6a5c713
commit fc16ebec17
1 changed files with 14 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/frame/Photo.vue
View File

@ -8,8 +8,8 @@
error: data.flag & c.FLAG_LOAD_FAIL, error: data.flag & c.FLAG_LOAD_FAIL,
}" }"
> >
<Check <CheckCircle
:size="16" :size="20"
class="select" class="select"
v-if="!(data.flag & c.FLAG_PLACEHOLDER)" v-if="!(data.flag & c.FLAG_PLACEHOLDER)"
@click="toggleSelect" @click="toggleSelect"
@ -41,7 +41,7 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import Check from "vue-material-design-icons/Check.vue"; import CheckCircle from "vue-material-design-icons/CheckCircle.vue";
import Star from "vue-material-design-icons/Star.vue"; import Star from "vue-material-design-icons/Star.vue";
import Video from "vue-material-design-icons/PlayCircleOutline.vue"; import Video from "vue-material-design-icons/PlayCircleOutline.vue";
import { Component, Emit, Mixins, Prop, Watch } from "vue-property-decorator"; import { Component, Emit, Mixins, Prop, Watch } from "vue-property-decorator";
@ -52,7 +52,7 @@ import { IDay, IPhoto } from "../../types";
@Component({ @Component({
components: { components: {
Check, CheckCircle,
Video, Video,
Star, Star,
}, },
@ -229,12 +229,11 @@ $icon-half-size: 5px;
$icon-size: $icon-half-size * 2; $icon-size: $icon-half-size * 2;
/* Extra icons */ /* Extra icons */
.check-icon.select { .check-circle-icon.select {
position: absolute; position: absolute;
top: calc($icon-dist + 2px); top: $icon-dist;
left: calc($icon-dist + 2px); left: $icon-dist;
z-index: 100; z-index: 100;
background-color: var(--color-main-background);
border-radius: 50%; border-radius: 50%;
cursor: pointer; cursor: pointer;
display: none; display: none;
@ -242,9 +241,12 @@ $icon-size: $icon-half-size * 2;
.p-outer:hover > & { .p-outer:hover > & {
display: flex; display: flex;
} }
filter: invert(1) brightness(100);
.p-outer.selected > & { .p-outer.selected > & {
display: flex; display: flex;
filter: invert(1); filter: invert(0);
background-color: white;
} }
} }
.play-circle-outline-icon, .play-circle-outline-icon,
@ -312,10 +314,10 @@ div.img-outer {
transform: translateY(-100%); // very weird stuff transform: translateY(-100%); // very weird stuff
background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, transparent 30%); background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, transparent 30%);
opacity: 0; display: none;
transition: opacity 0.1s ease-in border-radius 0.1s ease-in; transition: border-radius 0.1s ease-in;
.p-outer:not(.selected):hover > & { .p-outer:not(.selected):hover > & {
opacity: 1; display: block;
} }
} }