Attachment styles
Xavier Julián
parent
c1f07bf8c3
commit
5a2492f6f1
|
|
@ -43,8 +43,9 @@ AttachmentsDirective = ($repo, $rs) ->
|
|||
items: "div.single-attachment"
|
||||
handle: "a.settings.icon.icon-drag-v"
|
||||
dropOnEmpty: true
|
||||
revert: false # '400' if we fix the strange effects
|
||||
revert: 400
|
||||
axis: "y"
|
||||
placeholder: "sortable-placeholder single-attachment"
|
||||
})
|
||||
|
||||
tdom.on "sortstop", (event, ui) ->
|
||||
|
|
@ -160,7 +161,7 @@ AttachmentDirective = ($log, $repo, $confirm) ->
|
|||
</a>
|
||||
</div>
|
||||
<div class="attachment-size">
|
||||
<span class="attachment-size"><%- size %></span>
|
||||
<span><%- size %></span>
|
||||
</div>
|
||||
<div class="attachment-comments">
|
||||
<span class="deprecated-file hidden">(deprecated)</span>
|
||||
|
|
@ -179,10 +180,10 @@ AttachmentDirective = ($log, $repo, $confirm) ->
|
|||
<a href="<%- url %>" title="<%- name %>" target="_blank"><%- name %></a>
|
||||
</div>
|
||||
<div class="attachment-size">
|
||||
<span class="attachment-size"><%- size %></span>
|
||||
<span><%- size %></span>
|
||||
</div>
|
||||
<div class="editable editable-attachment-comment">
|
||||
<input type="text" name="description"
|
||||
<input type="text" name="description" maxlength="140"
|
||||
value="<%- description %>""
|
||||
placeholder="Type a short description" />
|
||||
</div>
|
||||
|
|
@ -192,8 +193,8 @@ AttachmentDirective = ($log, $repo, $confirm) ->
|
|||
<label for="attach-<%- id %>-is-deprecated">Deprecated?</label>
|
||||
</div>
|
||||
<div class="attachment-settings">
|
||||
<a class="editable icon icon-floppy" href="" title="Save"></a>
|
||||
<a class="editable icon icon-delete" href="" title="Cancel"></a>
|
||||
<a class="editable-settings icon icon-floppy" href="" title="Save"></a>
|
||||
<a class="editable-settings icon icon-delete" href="" title="Cancel"></a>
|
||||
</div>
|
||||
""") # TODO: i18n
|
||||
|
||||
|
|
@ -261,11 +262,11 @@ AttachmentDirective = ($log, $repo, $confirm) ->
|
|||
###########
|
||||
## Actions (on edit mode)
|
||||
###########
|
||||
$el.on "click", "a.editable.icon-delete", (event) ->
|
||||
$el.on "click", "a.editable-settings.icon-delete", (event) ->
|
||||
event.preventDefault()
|
||||
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()
|
||||
newIsDeprecated = $el.find("input[name='is-deprecated']").prop("checked")
|
||||
|
||||
|
|
|
|||
|
|
@ -41,15 +41,23 @@ section.attachments(tg-attachments, ng-model=attachModel)
|
|||
//- a.editable.icon.icon-floppy(href="#", "Save")
|
||||
//- 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.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 }}%
|
||||
//-END_TODO
|
||||
a(href="", title="{{ file.name }}") {{ file.name }}
|
||||
div.attachment-size
|
||||
span.attachment-size {{ file.size }}
|
||||
div.attachment-comments
|
||||
span {{ file.progressMessage }}
|
||||
div.percentage(style="width: {{ file.progressPercent }}%")
|
||||
div.attachment-settings
|
||||
|
||||
a.hidden.more-attachments(href="", title="show deprecated atachments")
|
||||
span.text + show deprecated atachments
|
||||
|
|
|
|||
|
|
@ -48,6 +48,10 @@
|
|||
color: $gray-light;
|
||||
}
|
||||
}
|
||||
&.sortable-placeholder {
|
||||
background: $whitish;
|
||||
height: 55px;
|
||||
}
|
||||
.attachment-name {
|
||||
@include ellipsis(200px);
|
||||
@include table-flex-child(1, 300px);
|
||||
|
|
@ -67,18 +71,26 @@
|
|||
}
|
||||
.attachment-settings {
|
||||
@include table-flex-child(1, 100px);
|
||||
.settings {
|
||||
.settings,
|
||||
.editable-settings {
|
||||
@extend %large;
|
||||
color: $gray-light;
|
||||
display: block;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
&:hover {
|
||||
color: $green-taiga;
|
||||
}
|
||||
}
|
||||
.icon-edit {
|
||||
.settings {
|
||||
opacity: 0;
|
||||
top: 1rem;
|
||||
}
|
||||
.editable-settings {
|
||||
opacity: 1;
|
||||
top: 1.5rem;
|
||||
}
|
||||
.icon-edit,
|
||||
.icon-floppy {
|
||||
right: 4rem;
|
||||
}
|
||||
.icon-delete {
|
||||
|
|
@ -92,13 +104,9 @@
|
|||
right: 0;
|
||||
}
|
||||
}
|
||||
// REFACTOR //
|
||||
.editable {
|
||||
@include table-flex-child(10, 300px);
|
||||
}
|
||||
.attachment-delete {
|
||||
@include table-flex-child(1, 10px);
|
||||
}
|
||||
.icon-delete {
|
||||
@extend %large;
|
||||
color: $gray-light;
|
||||
|
|
@ -111,8 +119,9 @@
|
|||
span {
|
||||
color: $gray-light;
|
||||
}
|
||||
input {
|
||||
margin-right: .5rem;
|
||||
input[type="checkbox"] {
|
||||
margin-right: .2rem;
|
||||
vertical-align: middle;
|
||||
&:checked {
|
||||
+ span {
|
||||
color: $grayer;
|
||||
|
|
@ -120,21 +129,15 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
.editable-attachment-comment {
|
||||
input {
|
||||
color: $white;
|
||||
.percentage {
|
||||
background: rgba($green-taiga, .1);
|
||||
bottom: 0;
|
||||
height: 55px;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 45%;
|
||||
}
|
||||
}
|
||||
&.edit {
|
||||
.settings,
|
||||
.attachment-comment {
|
||||
display: none;
|
||||
}
|
||||
.editable {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.more-attachments {
|
||||
|
|
|
|||
Loading…
Reference in New Issue