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

Attachment styles

stable
Xavier Julián 2014-08-01 13:49:23 +02:00
parent c1f07bf8c3
commit 5a2492f6f1
3 changed files with 51 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
app/coffee/modules/common/attachments.coffee
View File

@ -43,8 +43,9 @@ AttachmentsDirective = ($repo, $rs) ->
items: "div.single-attachment" items: "div.single-attachment"
handle: "a.settings.icon.icon-drag-v" handle: "a.settings.icon.icon-drag-v"
dropOnEmpty: true dropOnEmpty: true
revert: false # '400' if we fix the strange effects revert: 400
axis: "y" axis: "y"
placeholder: "sortable-placeholder single-attachment"
}) })
tdom.on "sortstop", (event, ui) -> tdom.on "sortstop", (event, ui) ->
@ -160,7 +161,7 @@ AttachmentDirective = ($log, $repo, $confirm) ->
</a> </a>
</div> </div>
<div class="attachment-size"> <div class="attachment-size">
<span class="attachment-size"><%- size %></span> <span><%- size %></span>
</div> </div>
<div class="attachment-comments"> <div class="attachment-comments">
<span class="deprecated-file hidden">(deprecated)</span> <span class="deprecated-file hidden">(deprecated)</span>
@ -179,10 +180,10 @@ AttachmentDirective = ($log, $repo, $confirm) ->
<a href="<%- url %>" title="<%- name %>" target="_blank"><%- name %></a> <a href="<%- url %>" title="<%- name %>" target="_blank"><%- name %></a>
</div> </div>
<div class="attachment-size"> <div class="attachment-size">
<span class="attachment-size"><%- size %></span> <span><%- size %></span>
</div> </div>
<div class="editable editable-attachment-comment"> <div class="editable editable-attachment-comment">
<input type="text" name="description" <input type="text" name="description" maxlength="140"
value="<%- description %>"" value="<%- description %>""
placeholder="Type a short description" /> placeholder="Type a short description" />
</div> </div>
@ -192,8 +193,8 @@ AttachmentDirective = ($log, $repo, $confirm) ->
<label for="attach-<%- id %>-is-deprecated">Deprecated?</label> <label for="attach-<%- id %>-is-deprecated">Deprecated?</label>
</div> </div>
<div class="attachment-settings"> <div class="attachment-settings">
<a class="editable icon icon-floppy" href="" title="Save"></a> <a class="editable-settings icon icon-floppy" href="" title="Save"></a>
<a class="editable icon icon-delete" href="" title="Cancel"></a> <a class="editable-settings icon icon-delete" href="" title="Cancel"></a>
</div> </div>
""") # TODO: i18n """) # TODO: i18n
@ -261,11 +262,11 @@ AttachmentDirective = ($log, $repo, $confirm) ->
########### ###########
## Actions (on edit mode) ## Actions (on edit mode)
########### ###########
$el.on "click", "a.editable.icon-delete", (event) -> $el.on "click", "a.editable-settings.icon-delete", (event) ->
event.preventDefault() event.preventDefault()
render(attachment) render(attachment)
$el.on "click", "a.editable.icon-floppy", (event) -> $el.on "click", "a.editable-settings.icon-floppy", (event) ->
newDescription = $el.find("input[name='description']").val() newDescription = $el.find("input[name='description']").val()
newIsDeprecated = $el.find("input[name='is-deprecated']").prop("checked") newIsDeprecated = $el.find("input[name='is-deprecated']").prop("checked")

22
app/partials/views/modules/attachments.jade
View File

@ -41,15 +41,23 @@ section.attachments(tg-attachments, ng-model=attachModel)
//- a.editable.icon.icon-floppy(href="#", "Save") //- a.editable.icon.icon-floppy(href="#", "Save")
//- a.editable.icon.icon-delete(href="#", "Cancel") //- a.editable.icon.icon-delete(href="#", "Cancel")
//-TODO: XAVI, FIX ME :-) //- div.single-attachment(ng-repeat="file in uploadingFiles")
//- div.attachment-name
//- span
//- a(href="", title="{{ file.name }}") file.name
//- div.attachment-comment
//- span.attachment-size ({{ file.size }})
//- span(ng-if="file.progressMessage", style="color:#72a114; font-weight: bold;") {{ file.progressMessage }} | {{ file.progressPercent }}%
div.single-attachment(ng-repeat="file in uploadingFiles") div.single-attachment(ng-repeat="file in uploadingFiles")
div.attachment-name div.attachment-name
span a(href="", title="{{ file.name }}") {{ file.name }}
a(href="", title="{{ file.name }}") file.name div.attachment-size
div.attachment-comment span.attachment-size {{ file.size }}
span.attachment-size ({{ file.size }}) div.attachment-comments
span(ng-if="file.progressMessage", style="color:#72a114; font-weight: bold;") {{ file.progressMessage }} | {{ file.progressPercent }}% span {{ file.progressMessage }}
//-END_TODO div.percentage(style="width: {{ file.progressPercent }}%")
div.attachment-settings
a.hidden.more-attachments(href="", title="show deprecated atachments") a.hidden.more-attachments(href="", title="show deprecated atachments")
span.text + show deprecated atachments span.text + show deprecated atachments

51
app/styles/modules/common/attachments.scss
View File

@ -48,6 +48,10 @@
color: $gray-light; color: $gray-light;
} }
} }
&.sortable-placeholder {
background: $whitish;
height: 55px;
}
.attachment-name { .attachment-name {
@include ellipsis(200px); @include ellipsis(200px);
@include table-flex-child(1, 300px); @include table-flex-child(1, 300px);
@ -67,18 +71,26 @@
} }
.attachment-settings { .attachment-settings {
@include table-flex-child(1, 100px); @include table-flex-child(1, 100px);
.settings { .settings,
.editable-settings {
@extend %large; @extend %large;
color: $gray-light; color: $gray-light;
display: block; display: block;
opacity: 0;
position: absolute; position: absolute;
top: 1rem;
&:hover { &:hover {
color: $green-taiga; color: $green-taiga;
} }
} }
.icon-edit { .settings {
opacity: 0;
top: 1rem;
}
.editable-settings {
opacity: 1;
top: 1.5rem;
}
.icon-edit,
.icon-floppy {
right: 4rem; right: 4rem;
} }
.icon-delete { .icon-delete {
@ -92,13 +104,9 @@
right: 0; right: 0;
} }
} }
// REFACTOR //
.editable { .editable {
@include table-flex-child(10, 300px); @include table-flex-child(10, 300px);
} }
.attachment-delete {
@include table-flex-child(1, 10px);
}
.icon-delete { .icon-delete {
@extend %large; @extend %large;
color: $gray-light; color: $gray-light;
@ -111,8 +119,9 @@
span { span {
color: $gray-light; color: $gray-light;
} }
input { input[type="checkbox"] {
margin-right: .5rem; margin-right: .2rem;
vertical-align: middle;
&:checked { &:checked {
+ span { + span {
color: $grayer; color: $grayer;
@ -120,21 +129,15 @@
} }
} }
} }
.editable-attachment-comment { .percentage {
input { background: rgba($green-taiga, .1);
color: $white; bottom: 0;
height: 55px;
left: 0;
position: absolute;
top: 0;
width: 45%;
} }
}
&.edit {
.settings,
.attachment-comment {
display: none;
}
.editable {
display: block;
}
}
} }
.more-attachments { .more-attachments {