KumiSystems/Chatwoot
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Chore: Refactor add note to use foundation card classes (#2308)

Browse source
This commit is contained in:
Nithin David Thomas 2021-05-20 23:08:05 +05:30 committed by GitHub
parent 46356d0bf9
commit 047617713e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 19 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
app/javascript/dashboard/assets/scss/_foundation-settings.scss
View file

@ -285,10 +285,10 @@ $callout-link-tint: 30%;
$card-background: $white; $card-background: $white;
$card-font-color: $body-font-color; $card-font-color: $body-font-color;
$card-divider-background: $light-gray; $card-divider-background: $light-gray;
$card-border: 1px solid $light-gray; $card-border: 1px solid var(--color-border);
$card-shadow: none; $card-shadow: var(--shadow-small);
$card-border-radius: $global-radius; $card-border-radius: var(--border-radius-medium);
$card-padding: $global-padding; $card-padding: var(--space-small);
$card-margin: $global-margin; $card-margin: $global-margin;
// 15. Close Button // 15. Close Button

60
app/javascript/dashboard/routes/dashboard/contacts/components/AddNote.vue
View file

@ -1,21 +1,17 @@
<template> <template>
<div class="wrap"> <div class="card">
<div class="input-wrap"> <textarea
<textarea v-model="inputText"
v-model="inputText" :placeholder="$t('NOTES.ADD.PLACEHOLDER')"
:placeholder="$t('NOTES.ADD.PLACEHOLDER')" class="input--note"
class="input--note" @keydown.enter.shift.exact="onAdd"
@keydown.enter.shift.exact="onAdd" />
>
</textarea>
</div>
<div class="footer"> <div class="footer">
<woot-button <woot-button
size="tiny" size="tiny"
color-scheme="warning" color-scheme="warning"
:title="$t('NOTES.ADD.TITLE')" :title="$t('NOTES.ADD.TITLE')"
:is-disabled="buttonDisabled" :is-disabled="buttonDisabled"
class="button-wrap"
@click="onAdd" @click="onAdd"
> >
{{ $t('NOTES.ADD.BUTTON') }} {{ $t('NOTES.ADD.BUTTON') }}
@ -25,12 +21,7 @@
</template> </template>
<script> <script>
import WootButton from 'dashboard/components/ui/WootButton.vue';
export default { export default {
components: {
WootButton,
},
data() { data() {
return { return {
inputText: '', inputText: '',
@ -56,41 +47,20 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.wrap { .wrap {
display: flex; .input--note {
flex-direction: column; font-size: var(--font-size-mini);
border: 1px solid var(--color-border); border-color: transparent;
border-radius: var(--border-radius-small); margin: 0;
margin-bottom: var(--space-smaller); resize: none;
width: 100%; min-height: var(--space-larger);
.input-wrap {
display: flex;
flex: 0 0 auto;
width: 100%;
.input--note {
font-size: var(--font-size-mini);
border-color: transparent;
padding: var(--space-small) var(--space-small) 0 var(--space-small);
resize: none;
box-sizing: border-box;
min-height: var(--space-larger);
margin-bottom: var(--space-small);
}
} }
.footer { .footer {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
flex: 1 1 auto;
overflow: auto;
width: 100%; width: 100%;
padding: var(--space-small);
.button-wrap { padding-top: 0;
float: right;
margin-bottom: var(--space-small);
margin-right: var(--space-small);
}
} }
} }
</style> </style>