ahtlon/deck
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Some styling of the card details

Browse Source 
Signed-off-by: Julius Härtl <jus@bitgrid.net>
This commit is contained in:
Julius Härtl
2019-08-22 23:34:10 +02:00
parent 60d77e4d33
commit ba3b5b59ff
1 changed files with 76 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
src/components/card/CardSidebar.vue
View File

@@ -29,34 +29,45 @@
<template #action /> <template #action />
<AppSidebarTab :order="0" name="Details" icon="icon-home"> <AppSidebarTab :order="0" name="Details" icon="icon-home">
<p>Tags</p> <div class="section-wrapper">
<multiselect v-model="allLabels" :multiple="true" :options="currentBoard.labels" <div class="section-label icon-tag" v-tooltip="t('deck', 'Tags')"><span class="hidden-visually">{{ t('deck', 'Tags') }}</span></div>
:taggable="true" label="title" <div class="section-details">
track-by="id" @select="addLabelToCard" @remove="removeLabelFromCard"> <multiselect v-model="allLabels" :multiple="true" :options="currentBoard.labels"
<template #option="scope"> :taggable="true" label="title"
<span>{{ scope.option.title }}</span> track-by="id" @select="addLabelToCard" @remove="removeLabelFromCard">
</template> <template #option="scope">
</multiselect> <span>{{ scope.option.title }}</span>
</template>
</multiselect>
</div>
</div>
<p>Assign to user</p> <div class="section-wrapper">
<multiselect v-model="assignedUsers" :multiple="true" :options="assignableUsers" <div class="section-label icon-group" v-tooltip="t('deck', 'Assign to users')"><span class="hidden-visually">{{ t('deck', 'Assign to users') }}</span></div>
label="displayname" <div class="section-details">
track-by="primaryKey" <multiselect v-model="assignedUsers" :multiple="true" :options="assignableUsers"
@select="assignUserToCard" @remove="removeUserFromCard"> label="displayname"
<template #option="scope"> track-by="primaryKey"
{{ scope.option.displayname }} @select="assignUserToCard" @remove="removeUserFromCard">
</template> <template #option="scope">
</multiselect> {{ scope.option.displayname }}
</template>
</multiselect>
</div>
</div>
<p>Due to</p> <div class="section-wrapper">
<div class="section-label icon-calendar-dark" v-tooltip="t('deck', 'Due date')"><span class="hidden-visually">{{ t('deck', 'Due date') }}</span></div>
<DatetimePicker v-model="copiedCard.duedate" type="datetime" lang="en" <div class="section-details">
format="YYYY-MM-DD HH:mm" confirm @change="setDue()" /> <DatetimePicker v-model="copiedCard.duedate" type="datetime" lang="en"
format="YYYY-MM-DD HH:mm" confirm @change="setDue()" />
<Actions> <Actions>
<ActionButton v-if="copiedCard.duedate" icon="icon-delete" @click="removeDue()">{{ t('deck', 'Remove due date') }}</ActionButton> <ActionButton v-if="copiedCard.duedate" icon="icon-delete" @click="removeDue()">{{ t('deck', 'Remove due date') }}</ActionButton>
</Actions> </Actions>
</div>
</div>
<h5>Description</h5>
<VueEasymde ref="markdownEditor" v-model="desc" :configs="mdeConfig" /> <VueEasymde ref="markdownEditor" v-model="desc" :configs="mdeConfig" />
</AppSidebarTab> </AppSidebarTab>
<AppSidebarTab :order="1" name="Attachments" icon="icon-files-dark"> <AppSidebarTab :order="1" name="Attachments" icon="icon-files-dark">
@@ -231,8 +242,48 @@ export default {
<style> <style>
@import "~easymde/dist/easymde.min.css"; @import "~easymde/dist/easymde.min.css";
.vue-easymde, .CodeMirror {
border: none;
}
.editor-preview, .editor-preview,
.editor-statusbar { .editor-statusbar {
display: none; display: none;
} }
#app-sidebar .app-sidebar-header__desc h4 {
font-size: 12px !important;
}
</style> </style>
<style lang="scss">
h5 {
border-bottom: 1px solid var(--color-border);
margin-top: 20px;
margin-bottom: 5px;
color: var(--color-text-maxcontrast);
}
.section-wrapper {
display: flex;
max-width: 100%;
margin-top: 10px;
.section-label {
background-position: 0px center;
width:28px;
flex-shrink: 0;
}
.section-details {
flex-grow: 1;
button.action-item--single {
margin-top: -6px;
}
}
}
</style>