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

[WIP] bootstrap-vue upgrade (#9178)

Browse Source 
* update bootstrap-vue to 1.0.0-beta.9 - remove all individual bootstrap components and use BootstrapVue into Vue

* change modal action names from show::modal to bv::show::modal

* check if drops are undefined

* fix modal widths - sellModal now using input instead of dropbox

* upgrade to bootstrap 4.0beta

* include package-lock changes

* fix app menu dropdown position

* upgrade bootstrap to beta2 (was missing grid offset and other fixes) - refix header menu position

* fix tags popup (auto width to max not working) - fix filter panel width (adding width: 100% works until max-width)

* show hide logo on different screensize (new css breakpoints - http://getbootstrap.com/docs/4.0/utilities/display/ )

* fix package-lock?

* fix active button style / app header toggle button

* fix package-lock !

* update package lock after merge - new mixin "openedItemRows" to save the "show more/show less" in stable

* mixin naming style

* fix buyQuestModal marginTop

* fix customMenuDropdown position

* fix userDropdown items
This commit is contained in:
negue
2017-11-08 18:40:37 +01:00
committed by Matteo Pagliazzi
parent 34f6b63968
commit 4108a22d78
105 changed files with 354 additions and 684 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
website/client/components/tasks/approvalFooter.vue
View File

@@ -109,7 +109,7 @@ export default {
},
showRequests () {
this.$root.$emit('show::modal', 'approval-modal');
this.$root.$emit('bv::show::modal', 'approval-modal');
},
},
};

7
website/client/components/tasks/approvalModal.vue
View File

@@ -18,13 +18,8 @@
</style>
<script>
import bModal from 'bootstrap-vue/lib/components/modal';
export default {
props: ['task'],
components: {
bModal,
},
methods: {
approve (index) {
if (!confirm('Are you sure you want to approve this task?')) return;
@@ -37,7 +32,7 @@ export default {
this.task.approvals.splice(index, 1);
},
close () {
this.$root.$emit('hide::modal', 'approval-modal');
this.$root.$emit('bv::hide::modal', 'approval-modal');
},
},
};

6
website/client/components/tasks/brokenTaskModal.vue
View File

@@ -33,14 +33,10 @@
<script>
import { mapActions } from 'client/libs/store';
import bModal from 'bootstrap-vue/lib/components/modal';
import notifications from 'client/mixins/notifications';
export default {
mixins: [notifications],
components: {
bModal,
},
data () {
return {
brokenChallengeTask: {},
@@ -90,7 +86,7 @@ export default {
},
close () {
this.$store.state.brokenChallengeTask = {};
this.$root.$emit('hide::modal', 'broken-task-modal');
this.$root.$emit('bv::hide::modal', 'broken-task-modal');
},
},
};

3
website/client/components/tasks/column.vue
View File

@@ -226,8 +226,6 @@
import Task from './task';
import sortBy from 'lodash/sortBy';
import throttle from 'lodash/throttle';
import bModal from 'bootstrap-vue/lib/components/modal';
import sortable from 'client/directives/sortable.directive';
import buyMixin from 'client/mixins/buy';
import { mapState, mapActions } from 'client/libs/store';
@@ -249,7 +247,6 @@ export default {
components: {
Task,
BuyQuestModal,
bModal,
shopItem,
},
directives: {

3
website/client/components/tasks/spells.vue
View File

@@ -148,8 +148,6 @@ div(v-if='user.stats.lvl > 10')
</style>
<script>
import bPopover from 'bootstrap-vue/lib/directives/popover';
import spells from '../../../common/script/content/spells';
import { mapState } from 'client/libs/store';
@@ -169,7 +167,6 @@ export default {
},
directives: {
mousePosition: MouseMoveDirective,
bPopover,
},
data () {
return {

2
website/client/components/tasks/tagsPopup.vue
View File

@@ -21,7 +21,7 @@
.tags-popup {
padding-left: 24px;
padding-right: 24px;
max-width: 593px;
width: 593px;
z-index: 9999;
background: $white;
border-radius: 2px;

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

@@ -477,7 +477,6 @@ import axios from 'axios';
import scoreTask from 'common/script/ops/scoreTask';
import Vue from 'vue';
import * as Analytics from 'client/libs/analytics';
import bTooltip from 'bootstrap-vue/lib/directives/tooltip';
import positiveIcon from 'assets/svg/positive.svg';
import negativeIcon from 'assets/svg/negative.svg';
@@ -493,7 +492,6 @@ import bottomIcon from 'assets/svg/bottom.svg';
import deleteIcon from 'assets/svg/delete.svg';
import checklistIcon from 'assets/svg/checklist.svg';
import menuIcon from 'assets/svg/menu.svg';
import bPopover from 'bootstrap-vue/lib/components/popover';
import markdownDirective from 'client/directives/markdown';
import notifications from 'client/mixins/notifications';
import approvalHeader from './approvalHeader';
@@ -503,14 +501,12 @@ import MenuDropdown from '../ui/customMenuDropdown';
export default {
mixins: [notifications],
components: {
bPopover,
approvalFooter,
approvalHeader,
MenuDropdown,
},
directives: {
markdown: markdownDirective,
bTooltip,
},
props: ['task', 'isUser', 'group', 'dueDate'], // @TODO: maybe we should store the group on state?
data () {

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

@@ -507,10 +507,7 @@
<script>
import TagsPopup from './tagsPopup';
import bModal from 'bootstrap-vue/lib/components/modal';
import { mapGetters, mapActions, mapState } from 'client/libs/store';
import bDropdown from 'bootstrap-vue/lib/components/dropdown';
import bDropdownItem from 'bootstrap-vue/lib/components/dropdown-item';
import toggleSwitch from 'client/components/ui/toggleSwitch';
import sortable from 'client/directives/sortable.directive';
import clone from 'lodash/clone';
@@ -531,9 +528,6 @@ import goldIcon from 'assets/svg/gold.svg';
export default {
components: {
TagsPopup,
bModal,
bDropdown,
bDropdownItem,
Datepicker,
toggleSwitch,
},
@@ -752,16 +746,16 @@ export default {
this.saveTask(this.task);
this.$emit('taskEdited', this.task);
}
this.$root.$emit('hide::modal', 'task-modal');
this.$root.$emit('bv::hide::modal', 'task-modal');
},
destroy () {
if (!confirm(this.$t('sureDelete'))) return;
this.destroyTask(this.task);
this.$emit('taskDestroyed', this.task);
this.$root.$emit('hide::modal', 'task-modal');
this.$root.$emit('bv::hide::modal', 'task-modal');
},
cancel () {
this.$root.$emit('hide::modal', 'task-modal');
this.$root.$emit('bv::hide::modal', 'task-modal');
},
onClose () {
this.showTagsSelect = false;

18
website/client/components/tasks/user.vue
View File

@@ -63,8 +63,8 @@
transition(name="slide-tasks-btns")
.d-flex(v-if="openCreateBtn")
.create-task-btn.rounded-btn(
v-for="type in columns",
:key="type",
v-for="type in columns",
:key="type",
@click="createTask(type)",
v-b-tooltip.hover.bottom="$t(type)",
)
@@ -192,6 +192,7 @@
padding-left: 24px;
padding-right: 24px;
max-width: 40vw;
width: 100%;
z-index: 9999;
background: $white;
border-radius: 2px;
@@ -305,11 +306,6 @@ import rewardIcon from 'assets/svg/reward.svg';
import uuid from 'uuid';
import Vue from 'vue';
import bDropdown from 'bootstrap-vue/lib/components/dropdown';
import bTooltip from 'bootstrap-vue/lib/directives/tooltip';
import bTooltipComponent from 'bootstrap-vue/lib/components/tooltip';
import bDropdownItem from 'bootstrap-vue/lib/components/dropdown-item';
import throttle from 'lodash/throttle';
import cloneDeep from 'lodash/cloneDeep';
import { mapState, mapActions } from 'client/libs/store';
@@ -322,16 +318,12 @@ export default {
components: {
TaskColumn,
TaskModal,
bDropdown,
bDropdownItem,
bTooltip: bTooltipComponent,
Item,
spells,
brokenTaskModal,
},
directives: {
markdown,
bTooltip,
},
data () {
return {
@@ -438,7 +430,7 @@ export default {
this.editingTask = cloneDeep(task);
// Necessary otherwise the first time the modal is not rendered
Vue.nextTick(() => {
this.$root.$emit('show::modal', 'task-modal');
this.$root.$emit('bv::show::modal', 'task-modal');
});
},
createTask (type) {
@@ -448,7 +440,7 @@ export default {
// Necessary otherwise the first time the modal is not rendered
Vue.nextTick(() => {
this.$root.$emit('show::modal', 'task-modal');
this.$root.$emit('bv::show::modal', 'task-modal');
});
},
cancelTaskModal () {