taiga
/
taiga-front
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Edition hover effect on description

stable
Xavier Julián 2014-10-22 12:08:29 +02:00 committed by David Barragán Merino
parent 7893ac77a4
commit 8a5e8219f3
2 changed files with 34 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/coffee/modules/common/components.coffee
View File

@ -519,10 +519,12 @@ EditableDescriptionDirective = ($rootscope, $repo, $confirm, $compile, $loading)
$scope.$on "$destroy", -> $scope.$on "$destroy", ->
$el.off() $el.off()
$el.on "click", ".edit", -> $el.on "click", ".view-description", (event) ->
$el.find('div.edit-description').show() target = angular.element(event.currentTarget)
$el.find('div.view-description').hide() if target.not('a')
$el.find('textarea').focus() $el.find('div.edit-description').show()
$el.find('div.view-description').hide()
$el.find('textarea').focus()
$el.on "click", ".save", -> $el.on "click", ".save", ->
$model.$modelValue.description = $scope.item.description $model.$modelValue.description = $scope.item.description

29
app/styles/layout/us-detail.scss
View File

@ -58,7 +58,7 @@
margin-bottom: 0; margin-bottom: 0;
max-width: 94%; max-width: 94%;
&:hover { &:hover {
.edit { .icon-edit {
@include transition(opacity .3s linear); @include transition(opacity .3s linear);
opacity: 1; opacity: 1;
} }
@ -93,6 +93,8 @@
@extend %large; @extend %large;
color: $gray-light; color: $gray-light;
margin-left: .5rem; margin-left: .5rem;
}
.icon-edit {
opacity: 0; opacity: 0;
} }
.us-related-task { .us-related-task {
@ -168,11 +170,36 @@
.duty-content { .duty-content {
position: relative; position: relative;
&:hover {
cursor: pointer;
p {
@include transition(background .2s linear);
background: $whitish;
}
.edit {
@include transition(all .2s linear);
opacity: 1;
top: -1.5rem;
}
}
&.wysiwyg {
overflow: visible;
}
textarea { textarea {
background: $white; background: $white;
height: 10rem; height: 10rem;
margin-bottom: 2rem; margin-bottom: 2rem;
} }
.edit {
@include transition(all .2s linear);
background: $whitish;
color: $grayer;
left: 0;
opacity: 0;
padding: .2rem .5rem;
position: absolute;
top: -0;
}
a.save { a.save {
color: $blackish; color: $blackish;
opacity: .8; opacity: .8;