Chore: Refactors view note component (#2310)

This commit is contained in:
Nithin David Thomas
2021-05-20 23:41:15 +05:30
committed by GitHub
parent 047617713e
commit 2a492b4162
4 changed files with 31 additions and 41 deletions

View File

@@ -5,8 +5,10 @@
&.round { &.round {
border-radius: 1000px; border-radius: 1000px;
} }
}
.card {
padding: var(--space-small);
} }
.button-wrapper .button.link.grey-btn { .button-wrapper .button.link.grey-btn {

View File

@@ -287,7 +287,7 @@ $card-font-color: $body-font-color;
$card-divider-background: $light-gray; $card-divider-background: $light-gray;
$card-border: 1px solid var(--color-border); $card-border: 1px solid var(--color-border);
$card-shadow: var(--shadow-small); $card-shadow: var(--shadow-small);
$card-border-radius: var(--border-radius-medium); $card-border-radius: var(--border-radius-normal);
$card-padding: var(--space-small); $card-padding: var(--space-small);
$card-margin: $global-margin; $card-margin: $global-margin;

View File

@@ -46,21 +46,18 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.wrap { .input--note {
.input--note { font-size: var(--font-size-mini);
font-size: var(--font-size-mini); border-color: transparent;
border-color: transparent; margin-bottom: var(--space-small);
margin: 0; padding: 0;
resize: none; resize: none;
min-height: var(--space-larger); min-height: var(--space-larger);
} }
.footer { .footer {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
width: 100%; width: 100%;
padding: var(--space-small);
padding-top: 0;
}
} }
</style> </style>

View File

@@ -1,8 +1,8 @@
<template> <template>
<div class="note-wrap"> <div class="card note-wrap">
<div class="text"> <p class="note__content">
{{ note }} {{ note }}
</div> </p>
<div class="footer"> <div class="footer">
<div class="meta"> <div class="meta">
<div :title="userName"> <div :title="userName">
@@ -19,7 +19,6 @@
icon="ion-compose" icon="ion-compose"
color-scheme="secondary" color-scheme="secondary"
class-names="button--emoji" class-names="button--emoji"
class="button-wrap"
@click="onEdit" @click="onEdit"
/> />
<woot-button <woot-button
@@ -28,7 +27,6 @@
icon="ion-trash-b" icon="ion-trash-b"
color-scheme="secondary" color-scheme="secondary"
class-names="button--emoji" class-names="button--emoji"
class="button-wrap"
@click="onDelete" @click="onDelete"
/> />
</div> </div>
@@ -90,17 +88,9 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.note-wrap { .note__content {
padding: var(--space-small); font-size: var(--font-size-mini);
border: 1px solid var(--color-border); margin-bottom: var(--space-small);
border-radius: var(--border-radius-small);
margin-bottom: var(--space-smaller);
.text {
padding-bottom: var(--space-small);
font-size: var(--font-size-mini);
color: var(--color-body);
}
} }
.footer { .footer {
@@ -119,19 +109,20 @@ export default {
} }
} }
.actions { .actions {
display: none; display: flex;
visibility: hidden;
}
.button--emoji {
margin-left: var(--space-small);
height: var(--space-medium);
width: var(--space-medium);
} }
} }
.note-wrap:hover { .note-wrap:hover {
.actions { .actions {
display: flex; visibility: visible;
.button-wrap {
margin-right: var(--space-small);
height: var(--space-medium);
width: var(--space-medium);
}
} }
} }
</style> </style>