krikkert/habitica
1
0
Fork 0
mirror of https://github.com/HabitRPG/habitica.git synced 2025-12-16 22:27:26 +01:00
Code Issues Packages Projects Releases Wiki Activity

More Tasks page fixes (#9475)

Browse Source 
* fix datepicker not closing when clicking outside of it, fixes #9346

* fixes #9441
This commit is contained in:
Matteo Pagliazzi
2017-11-15 17:06:32 +01:00
committed by GitHub
parent cb612d99d7
commit ab974675b9
4 changed files with 292 additions and 272 deletions
Download Patch File Download Diff File Expand all files Collapse all files

499
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

2
package.json
View File

@@ -122,7 +122,7 @@
"vue-router": "^3.0.0", "vue-router": "^3.0.0",
"vue-style-loader": "^3.0.0", "vue-style-loader": "^3.0.0",
"vue-template-compiler": "^2.5.2", "vue-template-compiler": "^2.5.2",
"vuejs-datepicker": "git://github.com/habitrpg/vuejs-datepicker#45e607a7bccf4e3e089761b3b7b33e3f2c5dc21f", "vuejs-datepicker": "git://github.com/habitrpg/vuejs-datepicker#825a866b6a9c52dd8c588a3e8b900880875ce914",
"webpack": "^2.2.1", "webpack": "^2.2.1",
"webpack-merge": "^4.0.0", "webpack-merge": "^4.0.0",
"winston": "^2.1.0", "winston": "^2.1.0",

59
website/client/components/tasks/task.vue
View File

@@ -84,13 +84,15 @@
.svg-icon.challenge.broken(v-html="icons.challenge", v-if='task.challenge.broken', @click='handleBrokenTask(task)') .svg-icon.challenge.broken(v-html="icons.challenge", v-if='task.challenge.broken', @click='handleBrokenTask(task)')
.d-flex.align-items-center(v-if="hasTags", :id="`tags-icon-${task._id}`") .d-flex.align-items-center(v-if="hasTags", :id="`tags-icon-${task._id}`")
.svg-icon.tags(v-html="icons.tags") .svg-icon.tags(v-html="icons.tags")
b-popover.tags-popover.no-span-margin( #tags-popover
b-popover(
v-if="hasTags", v-if="hasTags",
:target="`tags-icon-${task._id}`", :target="`tags-icon-${task._id}`",
triggers="hover", triggers="hover",
placement="bottom", placement="bottom",
container="tags-popover",
) )
.d-flex.align-items-center .d-flex.align-items-center.tags-container
.tags-popover-title(v-once) {{ `${$t('tags')}:` }} .tags-popover-title(v-once) {{ `${$t('tags')}:` }}
.tag-label(v-for="tag in getTagsFor(task)") {{tag}} .tag-label(v-for="tag in getTagsFor(task)") {{tag}}
@@ -307,10 +309,6 @@
margin-left: 4px; margin-left: 4px;
} }
.no-span-margin span {
margin-left: 0px !important;
}
.svg-icon.streak { .svg-icon.streak {
width: 11.6px; width: 11.6px;
height: 7.1px; height: 7.1px;
@@ -446,35 +444,38 @@
font-weight: bold; font-weight: bold;
} }
} }
</style>
<style lang="scss"> #tags-popover /deep/ {
// not working as scoped css .tags-container {
@import '~client/assets/scss/colors.scss'; flex-wrap: wrap;
margin-top: -3px;
margin-bottom: -3px;
}
.tags-popover { .tags-popover-title {
// TODO fix padding, see https://github.com/bootstrap-vue/bootstrap-vue/issues/559#issuecomment-311150335 margin-right: 4px;
white-space: nowrap; display: block;
} float: left;
margin-top: -3px;
margin-bottom: -3px;
}
.tags-popover-title { .tag-label {
margin-right: 4px; display: block;
display: block; float: left;
float: left; margin-left: 4px;
} border-radius: 100px;
background-color: $gray-50;
.tag-label { padding: 4px 10px;
display: block; color: $gray-300;
float: left; white-space: nowrap;
margin-left: 4px; margin-top: 3px;
border-radius: 100px; margin-bottom: 3px;
background-color: $gray-50; }
padding: 4px 10px;
color: $gray-300;
white-space: nowrap;
} }
</style> </style>
<script> <script>
import { mapState, mapGetters, mapActions } from 'client/libs/store'; import { mapState, mapGetters, mapActions } from 'client/libs/store';
import moment from 'moment'; import moment from 'moment';

4
website/client/components/tasks/taskModal.vue
View File

@@ -67,7 +67,7 @@
.option-item-label(v-once) {{ $t('hard') }} .option-item-label(v-once) {{ $t('hard') }}
.option(v-if="task.type === 'todo'") .option(v-if="task.type === 'todo'")
label(v-once) {{ $t('dueDate') }} label(v-once) {{ $t('dueDate') }}
datepicker( datepicker.d-inline-block(
v-model="task.date", v-model="task.date",
:clearButton='true', :clearButton='true',
clearButtonIcon='category-select', clearButtonIcon='category-select',
@@ -78,7 +78,7 @@
) )
.option(v-if="task.type === 'daily'") .option(v-if="task.type === 'daily'")
label(v-once) {{ $t('startDate') }} label(v-once) {{ $t('startDate') }}
datepicker( datepicker.d-inline-block(
v-model="task.startDate", v-model="task.startDate",
:clearButton='false', :clearButton='false',
:todayButton='true', :todayButton='true',