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

clean up modal styles

parent 91a647ea
<template>
<popup-dialog :title="title" >
<popup-dialog :title="title">
<p v-if="currentPage === 'delete'">
Are you sure you want to delete this board?
</p>
......@@ -7,7 +7,7 @@
v-else
@submit="submit"
>
<div>
<div class="append-bottom-20">
<label class="label-light" for="board-new-name">
Board name
</label>
......@@ -18,35 +18,35 @@
v-model="board.name"
>
</div>
<div>
<div class="media append-bottom-10">
<label class="label-light media-body align-self-sm-center">
Board scope
</label>
<button
type="button"
class="btn pull-right"
@click="expand = !expand">
class="btn"
@click="expand = !expand"
>
Expand
</button>
<h3>
Board scope
</h3>
</div>
<transition name="fade">
<div v-show="expand">
<p>
Board scope affects which issues are displayed for anyone who visits this board
</p>
<div v-if="expand">
<p>
Board scope affects which issues are displayed for anyone who visits this board
</p>
<!-- TODO: if current_board_parent.issue_board_milestone_available?(current_user) -->
<input
type="hidden"
id="board-milestone"
v-model.number="board.milestone_id">
<board-milestone-select
:board="board"
:milestone-path="milestonePath"
:select-milestone="selectMilestone">
</board-milestone-select>
</div>
</transition>
<!-- TODO: if current_board_parent.issue_board_milestone_available?(current_user) -->
<input
type="hidden"
id="board-milestone"
v-model.number="board.milestone_id"
>
<board-milestone-select
:board="board"
:milestone-path="milestonePath"
:select-milestone="selectMilestone">
</board-milestone-select>
</div>
</form>
<template slot="footer">
<!-- TODO: handle Delete button with btn-danger class and method delete to link_to current_board_path(board) -->
......@@ -72,7 +72,7 @@
import Vue from '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.issueBoards = window.gl.issueBoards || {};
......@@ -101,7 +101,7 @@ export default Vue.extend({
};
},
components: {
boardMilestoneSelect,
BoardMilestoneSelect,
PopupDialog,
},
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 {
required: false,
default: 'primary',
},
closeButtonLabel: {
type: String,
required: false,
default: 'Cancel',
},
primaryButtonLabel: {
type: String,
required: false,
......@@ -50,15 +45,20 @@ export default {
<div
class="modal popup-dialog"
role="dialog"
tabindex="-1">
<div class="modal-dialog" role="document">
tabindex="-1"
>
<div
class="modal-dialog"
role="document"
>
<div class="modal-content">
<div class="modal-header">
<slot name="header">
<button type="button"
class="close"
@click="close"
aria-label="Close">
aria-label="Close"
>
<span aria-hidden="true">&times;</span>
</button>
<h4 class="modal-title">{{this.title}}</h4>
......@@ -75,7 +75,7 @@ export default {
type="button"
class="btn btn-default"
@click="emitSubmit(false)">
{{closeButtonLabel}}
Cancel
</button>
<button type="button"
class="btn"
......
......@@ -29,7 +29,6 @@
@import "framework/media_object";
@import "framework/mobile";
@import "framework/modal";
@import "framework/media_object";
@import "framework/nav";
@import "framework/pagination";
@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