TheDude
/
openproject
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add to LSG different states of upload notification

Browse Source
pull/3245/head
Vadim Costin 9 years ago committed by Florian Kraft
parent 22d448dc77
commit a0b7e89a1d
2 changed files with 140 additions and 26 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 84
      app/assets/stylesheets/content/_notifications.lsg
  2. 58
      app/assets/stylesheets/content/_notifications.sass

84
app/assets/stylesheets/content/_notifications.lsg
Unescape View File

@ -119,11 +119,81 @@
``` ```
<div class="notification-box -upload"> <div class="notification-box -upload">
<div class="notification-box--content"><span class="notification-box--upload-status">Uploading files ...</span> <div class="notification-box--content">
<div class="notification-box--toggle-message"> Here goes the toggle message, when more than 5 files are uploaded at <p class="notification-box--upload-status">Uploading files ...</p>
once <div>
<div>
<div class="notification-box--toggle-message">
<a href="#"><i class="icon-arrow-right5-2"></i></a> 2 of 3 files finished
</div>
<div class="notification-box--uploads-wrapper">
<ul class="notification-box--uploads">
<li class="notification-box--uploads-element"><span class="filename">Awesome_Landscape1.png</span>
<progress max="100" value="20">20%</progress>
</li>
<li class="notification-box--uploads-element"><span class="filename">Awesome_Landscape2.png</span>
<progress max="100" value="50">50%</progress>
</li>
<li class="notification-box--uploads-element"><span class="filename">Awesome_Landscape3.png</span>
<progress max="100" value="100">100%</progress>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
```
### Upload progress done
```
<div class="notification-box -upload">
<div class="notification-box--content">
<p class="notification-box--upload-status">Uploading files ...</p>
<div>
<div>
<div class="notification-box--toggle-message">
<a href="#"><i class="icon-arrow-right5-2"></i></a> 5 of 5 files finished
</div> </div>
<div class="notification-box--uploads-wrapper"> <div class="notification-box--uploads-wrapper">
<ul class="notification-box--uploads">
<li class="notification-box--uploads-element">
<span class="filename">Awesome_Landscape1.png</span><i class="icon-yes -success"></i>
</li>
<li class="notification-box--uploads-element">
<span class="filename">Awesome_Landscape2.png</span><i class="icon-close -error"></i>
<p class="notification-box--notice -error">Something went wrong!...</p>
</li>
<li class="notification-box--uploads-element">
<span class="filename">Awesome_Landscape3.png</span><i class="icon-yes -success"></i>
</li>
<li class="notification-box--uploads-element">
<span class="filename">Awesome_Landscape3.png</span><i class="icon-yes -success"></i>
</li>
<li class="notification-box--uploads-element">
<span class="filename">Awesome_Landscape3.png</span><i class="icon-yes -success"></i>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
```
### Upload progress more then five files simultaneously
```
<div class="notification-box -upload">
<div class="notification-box--content">
<p class="notification-box--upload-status">Uploading files ...</p>
<div>
<div>
<div class="notification-box--toggle-message">
<a href="#"><i class="icon-arrow-right5"></i></a> 3 of 5 files finished
</div>
<div class="notification-box--uploads-wrapper hide">
<ul class="notification-box--uploads"> <ul class="notification-box--uploads">
<li class="notification-box--uploads-element"><span class="filename">Awesome_Landscape1.png</span> <li class="notification-box--uploads-element"><span class="filename">Awesome_Landscape1.png</span>
<progress max="100" value="20">20%</progress> <progress max="100" value="20">20%</progress>
@ -134,8 +204,16 @@
<li class="notification-box--uploads-element"><span class="filename">Awesome_Landscape3.png</span> <li class="notification-box--uploads-element"><span class="filename">Awesome_Landscape3.png</span>
<progress max="100" value="100">100%</progress> <progress max="100" value="100">100%</progress>
</li> </li>
<li class="notification-box--uploads-element"><span class="filename">Awesome_Landscape4.png</span>
<progress max="100" value="100">100%</progress>
</li>
<li class="notification-box--uploads-element"><span class="filename">Awesome_Landscape5.png</span>
<progress max="100" value="100">100%</progress>
</li>
</ul> </ul>
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
``` ```

58
app/assets/stylesheets/content/_notifications.sass
Unescape View File

@ -59,6 +59,9 @@ $nm-pb-regress-color: whiteSmoke
$nm-pb-border-radius: rem-calc(6) $nm-pb-border-radius: rem-calc(6)
$nm-pb-height: rem-calc(20) $nm-pb-height: rem-calc(20)
$nm-upload-status-font-size: rem-calc(18)
$nm-upload-file-status-icon-size: rem-calc(12)
$nm-upload-box-padding: rem-calc(15) rem-calc(25) $nm-upload-box-padding: rem-calc(15) rem-calc(25)
%nm-icon-error %nm-icon-error
@ -73,6 +76,18 @@ $nm-upload-box-padding: rem-calc(15) rem-calc(25)
@extend .icon-attention1:before @extend .icon-attention1:before
color: $nm-color-warning-icon color: $nm-color-warning-icon
%error-placeholder
background-color: $nm-color-error-background
border-color: $nm-color-error-border
%success-placeholder
background-color: $nm-color-success-background
border-color: $nm-color-success-border
%warning-placeholder
background-color: $nm-color-warning-background
border-color: $nm-color-warning-border
@mixin messages-icon($top:rem-calc(11), $left:rem-calc(10), $size:rem-calc(18)) @mixin messages-icon($top:rem-calc(11), $left:rem-calc(10), $size:rem-calc(18))
@include icon-common @include icon-common
@ -114,30 +129,29 @@ $nm-upload-box-padding: rem-calc(15) rem-calc(25)
padding: $nm-box-padding padding: $nm-box-padding
&.-error &.-error
background-color: $nm-color-error-background @extend %error-placeholder
border-color: $nm-color-error-border
&::before &::before
@include messages-icon @include messages-icon
@extend %nm-icon-error @extend %nm-icon-error
&.-success &.-success
background-color: $nm-color-success-background @extend %success-placeholder
border-color: $nm-color-success-border
&::before &::before
@include messages-icon @include messages-icon
@extend %nm-icon-success @extend %nm-icon-success
&.-warning &.-warning
background-color: $nm-color-warning-background @extend %warning-placeholder
border-color: $nm-color-warning-border
&::before &::before
@include messages-icon @include messages-icon
@extend %nm-icon-warning @extend %nm-icon-warning
&.-severe &.-severe
background-color: $nm-color-error-background background-color: $nm-color-error-background
border-color: $nm-color-error-border border-color: $nm-color-error-border
&.-upload
padding: $nm-upload-box-padding
//@hack adapting to provided styles //@hack adapting to provided styles
//messy I dont have all the details for a magic resolve, this might change //messy I dont have all the details for a magic resolve, this might change
& p, & ul & p, & ul
@ -145,6 +159,15 @@ $nm-upload-box-padding: rem-calc(15) rem-calc(25)
& p, & ul>li, & .button & p, & ul>li, & .button
font-size: $nm-font-size font-size: $nm-font-size
[class^="icon-"]
&.-error
color: $nm-color-error-icon
&.-success
color: $nm-color-success-icon
&.-warning
color: $nm-color-warning-icon
.notification-box--wrapper .notification-box--wrapper
position: absolute position: absolute
top: rem-calc(52px) //this value probably will change top: rem-calc(52px) //this value probably will change
@ -193,12 +216,12 @@ $nm-upload-box-padding: rem-calc(15) rem-calc(25)
margin: rem-calc(5 0) margin: rem-calc(5 0)
.filename .filename
font-weight: bold font-weight: bold
[class^="icon-"]
font-size: $nm-upload-file-status-icon-size
.notification-box--upload-status .notification-box--upload-status
font-size: rem-calc(18) font-size: $nm-upload-status-font-size !important
line-height: $nm-upload-status-font-size !important
.notification-box.-upload
padding: $nm-upload-box-padding
.notification-box--content .notification-box--content
width: 100% width: 100%
@ -211,3 +234,16 @@ $nm-upload-box-padding: rem-calc(15) rem-calc(25)
border-radius: $nm-pb-border-radius border-radius: $nm-pb-border-radius
&::-webkit-progress-value &::-webkit-progress-value
border-radius: $nm-pb-border-radius border-radius: $nm-pb-border-radius
.notification-box--notice
border-radius: $nm-border-radius
border-style: solid
border-width: rem-calc(1)
padding: rem-calc(5)
margin: rem-calc(5 0)
&.-error
@extend %error-placeholder
&.-success
@extend %success-placeholder
&.-warning
@extend %warning-placeholder

Write Preview
Loading…
Cancel
Save