Create epics lightbox
parent
c5f9cd54eb
commit
7070f181ac
|
@ -239,6 +239,17 @@ patch = (oldImmutable, newImmutable) ->
|
|||
|
||||
return pathObj
|
||||
|
||||
DEFAULT_COLOR_LIST = [
|
||||
'#fce94f', '#edd400', '#c4a000', '#8ae234', '#73d216', '#4e9a06', '#d3d7cf',
|
||||
'#fcaf3e', '#f57900', '#ce5c00', '#729fcf', '#3465a4', '#204a87', '#888a85',
|
||||
'#ad7fa8', '#75507b', '#5c3566', '#ef2929', '#cc0000', '#a40000'
|
||||
]
|
||||
|
||||
getRandomDefaultColor = () ->
|
||||
return _.sample(DEFAULT_COLOR_LIST)
|
||||
|
||||
getDefaulColorList = () ->
|
||||
return _.clone(DEFAULT_COLOR_LIST)
|
||||
|
||||
taiga = @.taiga
|
||||
taiga.addClass = addClass
|
||||
|
@ -267,3 +278,5 @@ taiga.defineImmutableProperty = defineImmutableProperty
|
|||
taiga.isImage = isImage
|
||||
taiga.isPdf = isPdf
|
||||
taiga.patch = patch
|
||||
taiga.getRandomDefaultColor = getRandomDefaultColor
|
||||
taiga.getDefaulColorList = getDefaulColorList
|
||||
|
|
|
@ -17,41 +17,35 @@
|
|||
# File: color-selector.controller.coffee
|
||||
###
|
||||
|
||||
module = angular.module('taigaCommon')
|
||||
taiga = @.taiga
|
||||
getDefaulColorList = taiga.getDefaulColorList
|
||||
|
||||
|
||||
class ColorSelectorController
|
||||
|
||||
constructor: () ->
|
||||
@.colorList = [
|
||||
'#fce94f',
|
||||
'#edd400',
|
||||
'#c4a000',
|
||||
'#8ae234',
|
||||
'#73d216',
|
||||
'#4e9a06',
|
||||
'#d3d7cf',
|
||||
'#fcaf3e',
|
||||
'#f57900',
|
||||
'#ce5c00',
|
||||
'#729fcf',
|
||||
'#3465a4',
|
||||
'#204a87',
|
||||
'#888a85',
|
||||
'#ad7fa8',
|
||||
'#75507b',
|
||||
'#5c3566',
|
||||
'#ef2929',
|
||||
'#cc0000',
|
||||
'#a40000'
|
||||
]
|
||||
@.colorList = getDefaulColorList()
|
||||
|
||||
if @.initColor
|
||||
@.color = @.initColor
|
||||
|
||||
@.displaycolorList = false
|
||||
|
||||
toggleColorList: () ->
|
||||
@.displaycolorList = !@.displaycolorList
|
||||
|
||||
if @.isRequired and not @.color
|
||||
@.color = @.initColor
|
||||
|
||||
onSelectDropdownColor: (color) ->
|
||||
@.color = color
|
||||
@.onSelectColor({color: color})
|
||||
@.toggleColorList()
|
||||
|
||||
onKeyDown: (event) ->
|
||||
if event.which == 13 # ENTER
|
||||
event.stopPropagation()
|
||||
if @.color or not @.isRequired
|
||||
@.onSelectDropdownColor(@.color)
|
||||
|
||||
module.controller("ColorSelectorCtrl", ColorSelectorController)
|
||||
|
||||
angular.module('taigaComponents').controller("ColorSelectorCtrl", ColorSelectorController)
|
|
@ -29,7 +29,7 @@ describe "ColorSelector", ->
|
|||
return null
|
||||
|
||||
beforeEach ->
|
||||
module "taigaCommon"
|
||||
module "taigaComponents"
|
||||
|
||||
_mocks()
|
||||
|
|
@ -17,21 +17,20 @@
|
|||
# File: color-selector.directive.coffee
|
||||
###
|
||||
|
||||
module = angular.module('taigaCommon')
|
||||
|
||||
ColorSelectorDirective = ($timeout) ->
|
||||
link = (scope, el) ->
|
||||
timeout = null
|
||||
link = (scope, el, attrs, ctrl) ->
|
||||
# Animation
|
||||
_timeout = null
|
||||
|
||||
cancel = () ->
|
||||
$timeout.cancel(timeout)
|
||||
timeout = null
|
||||
$timeout.cancel(_timeout)
|
||||
_timeout = null
|
||||
|
||||
close = () ->
|
||||
return if timeout
|
||||
return if _timeout
|
||||
|
||||
timeout = $timeout (() ->
|
||||
scope.vm.displaycolorList = false
|
||||
_timeout = $timeout (() ->
|
||||
scope.vm.toggleColorList()
|
||||
), 400
|
||||
|
||||
el.find('.color-selector')
|
||||
|
@ -45,17 +44,19 @@ ColorSelectorDirective = ($timeout) ->
|
|||
return {
|
||||
link: link,
|
||||
scope:{
|
||||
isRequired: "="
|
||||
onSelectColor: "&",
|
||||
color: "="
|
||||
initColor: "="
|
||||
},
|
||||
templateUrl:"components/tags/color-selector/color-selector.html",
|
||||
templateUrl:"components/color-selector/color-selector.html",
|
||||
controller: "ColorSelectorCtrl",
|
||||
controllerAs: "vm",
|
||||
bindToController: true
|
||||
}
|
||||
|
||||
|
||||
ColorSelectorDirective.$inject = [
|
||||
"$timeout"
|
||||
]
|
||||
|
||||
module.directive("tgColorSelector", ColorSelectorDirective)
|
||||
angular.module('taigaComponents').directive("tgColorSelector", ColorSelectorDirective)
|
|
@ -12,19 +12,23 @@
|
|||
ng-title="color"
|
||||
ng-click="vm.onSelectDropdownColor(color)"
|
||||
)
|
||||
li.empty-color(ng-click="vm.onSelectDropdownColor(null)")
|
||||
li.empty-color(
|
||||
ng-if="!vm.isRequired"
|
||||
ng-click="vm.onSelectDropdownColor(null)"
|
||||
)
|
||||
.custom-color-selector
|
||||
.display-custom-color.empty-color(
|
||||
ng-if="!customColor.color || customColor.color.length < 7"
|
||||
ng-if="!vm.color"
|
||||
)
|
||||
.display-custom-color(
|
||||
ng-if="customColor.color.length === 7"
|
||||
ng-style="{'background': customColor.color}"
|
||||
ng-click="vm.onSelectDropdownColor(customColor.color)"
|
||||
ng-if="vm.color"
|
||||
ng-style="{'background': vm.color}"
|
||||
ng-click="vm.onSelectDropdownColor(vm.color)"
|
||||
)
|
||||
input.custom-color-input(
|
||||
type="text"
|
||||
maxlength="7"
|
||||
placeholder="#000000"
|
||||
ng-model="customColor.color"
|
||||
placeholder="Type hex code"
|
||||
ng-model="vm.color"
|
||||
ng-keydown="vm.onKeyDown($event)"
|
||||
)
|
|
@ -21,7 +21,6 @@
|
|||
|
||||
tg-color-selector(
|
||||
ng-if="!vm.disableColorSelection"
|
||||
color="vm.newTag.color",
|
||||
on-select-color="vm.selectColor(color)"
|
||||
)
|
||||
|
||||
|
|
|
@ -19,30 +19,40 @@
|
|||
|
||||
taiga = @.taiga
|
||||
trim = taiga.trim
|
||||
getRandomDefaultColor = taiga.getRandomDefaultColor
|
||||
|
||||
module = angular.module("taigaEpics")
|
||||
|
||||
class CreateEpicController
|
||||
@.$inject = [
|
||||
"tgResources"
|
||||
"tgAttachmentsService"
|
||||
"$q"
|
||||
]
|
||||
|
||||
constructor: (@rs) ->
|
||||
constructor: (@rs, @attachmentsService, @q) ->
|
||||
@.newEpic = {
|
||||
color: null
|
||||
projecti: @.project.id
|
||||
color: getRandomDefaultColor()
|
||||
project: @.project.id
|
||||
status: @.project.default_epic_status
|
||||
tags: []
|
||||
}
|
||||
@.attachments = Immutable.List()
|
||||
|
||||
createEpic: () ->
|
||||
return @rs.epics.post(@.newEpic).then () =>
|
||||
@.onReloadEpics()
|
||||
promise = @rs.epics.post(@.newEpic)
|
||||
|
||||
promise.then (response) =>
|
||||
@._createAttachments(response.data)
|
||||
|
||||
promise.then (data) =>
|
||||
@.onCreateEpic()
|
||||
|
||||
# Color selector
|
||||
selectColor: (color) ->
|
||||
@.newEpic.color = color
|
||||
|
||||
# Tags
|
||||
addTag: (name, color) ->
|
||||
name = trim(name.toLowerCase())
|
||||
|
||||
|
@ -52,5 +62,13 @@ class CreateEpicController
|
|||
deleteTag: (tag) ->
|
||||
_.remove @.newEpic.tags, (it) -> it[0] == tag[0]
|
||||
|
||||
# Attachments
|
||||
addAttachment: (attachment) ->
|
||||
@.attachments.push(attachment)
|
||||
|
||||
_createAttachments: (epic) ->
|
||||
promises = _.map @.attachments.toJS(), (attachment) ->
|
||||
return attachmentsService.upload(attachment.file, epic.id, epic.project, 'epic')
|
||||
return @q.all(promises)
|
||||
|
||||
module.controller("CreateEpicCtrl", CreateEpicController)
|
||||
|
|
|
@ -28,7 +28,7 @@ CreateEpicDirective = () ->
|
|||
bindToController: true,
|
||||
scope: {
|
||||
project: '=',
|
||||
onReloadEpics: '&'
|
||||
onCreateEpic: '&'
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -7,7 +7,8 @@ tg-lightbox-close
|
|||
)
|
||||
fieldset
|
||||
tg-color-selector(
|
||||
color="vm.newEpic.color",
|
||||
is-required="true"
|
||||
init-color="vm.newEpic.color"
|
||||
on-select-color="vm.selectColor(color)"
|
||||
)
|
||||
input.e2e-create-epic-subject(
|
||||
|
@ -46,6 +47,7 @@ tg-lightbox-close
|
|||
fieldset
|
||||
tg-attachments-simple(
|
||||
attachments="vm.attachments"
|
||||
on-add="vm.addAttachment(attachment)"
|
||||
)
|
||||
.settings
|
||||
fieldset.team-requirement
|
||||
|
|
|
@ -55,10 +55,10 @@ class EpicsDashboardController
|
|||
@lightboxFactory.create('tg-create-epic', {
|
||||
"class": "lightbox lightbox-create-epic open"
|
||||
"project": "project"
|
||||
"on-reload-epics": "reloadEpics()"
|
||||
"on-create-epic": "onCreateEpic()"
|
||||
}, {
|
||||
"project": @.project
|
||||
"reloadEpics": @._onCreateEpic.bind(this)
|
||||
"onCreateEpic": @._onCreateEpic.bind(this)
|
||||
})
|
||||
|
||||
module.controller("EpicsDashboardCtrl", EpicsDashboardController)
|
||||
|
|
|
@ -20,7 +20,8 @@ div.wrapper(
|
|||
|
||||
.detail-header-container
|
||||
tg-color-selector(
|
||||
color="epic.color",
|
||||
is-required="true"
|
||||
init-color="epic.color"
|
||||
on-select-color="ctrl.onSelectColor(color)"
|
||||
)
|
||||
tg-detail-header(
|
||||
|
|
Loading…
Reference in New Issue