Commit 778abce6 authored by Simon Knox's avatar Simon Knox

clean up modal styles

parent 91a647ea
<template> <template>
<popup-dialog :title="title" > <popup-dialog :title="title">
<p v-if="currentPage === 'delete'"> <p v-if="currentPage === 'delete'">
Are you sure you want to delete this board? Are you sure you want to delete this board?
</p> </p>
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
v-else v-else
@submit="submit" @submit="submit"
> >
<div> <div class="append-bottom-20">
<label class="label-light" for="board-new-name"> <label class="label-light" for="board-new-name">
Board name Board name
</label> </label>
...@@ -18,19 +18,19 @@ ...@@ -18,19 +18,19 @@
v-model="board.name" v-model="board.name"
> >
</div> </div>
<div> <div class="media append-bottom-10">
<label class="label-light media-body align-self-sm-center">
Board scope
</label>
<button <button
type="button" type="button"
class="btn pull-right" class="btn"
@click="expand = !expand"> @click="expand = !expand"
>
Expand Expand
</button> </button>
<h3>
Board scope
</h3>
</div> </div>
<transition name="fade"> <div v-if="expand">
<div v-show="expand">
<p> <p>
Board scope affects which issues are displayed for anyone who visits this board Board scope affects which issues are displayed for anyone who visits this board
</p> </p>
...@@ -39,14 +39,14 @@ ...@@ -39,14 +39,14 @@
<input <input
type="hidden" type="hidden"
id="board-milestone" id="board-milestone"
v-model.number="board.milestone_id"> v-model.number="board.milestone_id"
>
<board-milestone-select <board-milestone-select
:board="board" :board="board"
:milestone-path="milestonePath" :milestone-path="milestonePath"
:select-milestone="selectMilestone"> :select-milestone="selectMilestone">
</board-milestone-select> </board-milestone-select>
</div> </div>
</transition>
</form> </form>
<template slot="footer"> <template slot="footer">
<!-- TODO: handle Delete button with btn-danger class and method delete to link_to current_board_path(board) --> <!-- TODO: handle Delete button with btn-danger class and method delete to link_to current_board_path(board) -->
...@@ -72,7 +72,7 @@ ...@@ -72,7 +72,7 @@
import Vue from 'vue'; import Vue from 'vue';
import PopupDialog from '~/vue_shared/components/popup_dialog.vue'; import PopupDialog from '~/vue_shared/components/popup_dialog.vue';
import boardMilestoneSelect from './milestone_select'; import BoardMilestoneSelect from './milestone_select.vue';
window.gl = window.gl || {}; window.gl = window.gl || {};
window.gl.issueBoards = window.gl.issueBoards || {}; window.gl.issueBoards = window.gl.issueBoards || {};
...@@ -101,7 +101,7 @@ export default Vue.extend({ ...@@ -101,7 +101,7 @@ export default Vue.extend({
}; };
}, },
components: { components: {
boardMilestoneSelect, BoardMilestoneSelect,
PopupDialog, PopupDialog,
}, },
mounted() { mounted() {
......
/* global BoardService, MilestoneSelect */
import extraMilestones from '../mixins/extra_milestones';
export default {
props: {
board: {
type: Object,
required: true,
},
milestonePath: {
type: String,
required: true,
},
selectMilestone: {
type: Function,
required: true,
},
},
data() {
return {
loading: false,
milestones: [],
extraMilestones,
};
},
mounted() {
BoardService.loadMilestones.call(this);
MilestoneSelect();
},
template: `
<div class="dropdown">
<button data-toggle="dropdown" class="dropdown-menu-toggle">{{ board.milestone ? board.milestone.title : 'Milestone' }}</button>
<div class="dropdown-menu">
<div class="dropdown-content">
<div class="text-center">
<i
v-if="loading"
class="fa fa-spinner fa-spin"></i>
</div>
<ul
class="board-milestone-list"
v-if="!loading">
<li v-for="milestone in extraMilestones">
<a
href="#"
@click.prevent.stop="selectMilestone(milestone)">
<i
class="fa fa-check"
v-if="board.milestone_id === milestone.id"></i>
{{ milestone.title }}
</a>
</li>
<li class="divider"></li>
<li v-for="milestone in milestones">
<a
href="#"
@click.prevent.stop="selectMilestone(milestone)">
<i
class="fa fa-check"
v-if="board.milestone_id === milestone.id"></i>
{{ milestone.title }}
</a>
</li>
</ul>
</div>
</div>
</div>
`,
};
<template>
<div class="droplab-dropdown">
<div class="media">
<label class="media-body">Milestone</label>
<a href="#" data-dropdown-trigger="#milestone-dropdown" ref="trigger">
Edit
</a>
</div>
<div>
{{ board.milestone ? board.milestone.title : 'Milestone' }}
<ul
ref="list"
class="dropdown-menu"
>
<li
v-for="milestone in extraMilestones"
:key="milestone.id"
>
<a
href="#"
@click.prevent.stop="selectMilestone(milestone)">
<i
class="fa fa-check"
v-if="board.milestone_id === milestone.id"></i>
{{ milestone.title }}
</a>
</li>
<li class="divider"></li>
<li
v-for="milestone in milestones"
:key="milestone.id"
>
<a
href="#"
@click.prevent.stop="selectMilestone(milestone)">
<i
class="fa fa-check"
v-if="board.milestone_id === milestone.id"></i>
{{ milestone.title }}
</a>
</li>
</ul>
</div>
</div>
</template>
<script>
/* global BoardService */
import DropLab from '~/droplab/drop_lab';
import extraMilestones from '../mixins/extra_milestones';
export default {
props: {
board: {
type: Object,
required: true,
},
milestonePath: {
type: String,
required: true,
},
selectMilestone: {
type: Function,
required: true,
},
},
data() {
return {
loading: false,
milestones: [],
extraMilestones,
};
},
mounted() {
BoardService.loadMilestones.call(this);
this.droplab = new DropLab();
this.droplab.init(this.$refs.trigger, this.$refs.list);
},
};
</script>
...@@ -16,11 +16,6 @@ export default { ...@@ -16,11 +16,6 @@ export default {
required: false, required: false,
default: 'primary', default: 'primary',
}, },
closeButtonLabel: {
type: String,
required: false,
default: 'Cancel',
},
primaryButtonLabel: { primaryButtonLabel: {
type: String, type: String,
required: false, required: false,
...@@ -50,15 +45,20 @@ export default { ...@@ -50,15 +45,20 @@ export default {
<div <div
class="modal popup-dialog" class="modal popup-dialog"
role="dialog" role="dialog"
tabindex="-1"> tabindex="-1"
<div class="modal-dialog" role="document"> >
<div
class="modal-dialog"
role="document"
>
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<slot name="header"> <slot name="header">
<button type="button" <button type="button"
class="close" class="close"
@click="close" @click="close"
aria-label="Close"> aria-label="Close"
>
<span aria-hidden="true">&times;</span> <span aria-hidden="true">&times;</span>
</button> </button>
<h4 class="modal-title">{{this.title}}</h4> <h4 class="modal-title">{{this.title}}</h4>
...@@ -75,7 +75,7 @@ export default { ...@@ -75,7 +75,7 @@ export default {
type="button" type="button"
class="btn btn-default" class="btn btn-default"
@click="emitSubmit(false)"> @click="emitSubmit(false)">
{{closeButtonLabel}} Cancel
</button> </button>
<button type="button" <button type="button"
class="btn" class="btn"
......
...@@ -29,7 +29,6 @@ ...@@ -29,7 +29,6 @@
@import "framework/media_object"; @import "framework/media_object";
@import "framework/mobile"; @import "framework/mobile";
@import "framework/modal"; @import "framework/modal";
@import "framework/media_object";
@import "framework/nav"; @import "framework/nav";
@import "framework/pagination"; @import "framework/pagination";
@import "framework/panels"; @import "framework/panels";
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment