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. 108
      app/assets/stylesheets/content/_notifications.lsg
  2. 58
      app/assets/stylesheets/content/_notifications.sass

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

@ -119,22 +119,100 @@
```
<div class="notification-box -upload">
<div class="notification-box--content"><span class="notification-box--upload-status">Uploading files ...</span>
<div class="notification-box--toggle-message"> Here goes the toggle message, when more than 5 files are uploaded at
once
<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> 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 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 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>
```
### 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">
<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>
<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>
</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-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-icon-error
@ -73,6 +76,18 @@ $nm-upload-box-padding: rem-calc(15) rem-calc(25)
@extend .icon-attention1:before
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))
@include icon-common
@ -114,30 +129,29 @@ $nm-upload-box-padding: rem-calc(15) rem-calc(25)
padding: $nm-box-padding
&.-error
background-color: $nm-color-error-background
border-color: $nm-color-error-border
@extend %error-placeholder
&::before
@include messages-icon
@extend %nm-icon-error
&.-success
background-color: $nm-color-success-background
border-color: $nm-color-success-border
@extend %success-placeholder
&::before
@include messages-icon
@extend %nm-icon-success
&.-warning
background-color: $nm-color-warning-background
border-color: $nm-color-warning-border
@extend %warning-placeholder
&::before
@include messages-icon
@extend %nm-icon-warning
&.-severe
background-color: $nm-color-error-background
border-color: $nm-color-error-border
&.-upload
padding: $nm-upload-box-padding
//@hack adapting to provided styles
//messy I dont have all the details for a magic resolve, this might change
& p, & ul
@ -145,6 +159,15 @@ $nm-upload-box-padding: rem-calc(15) rem-calc(25)
& p, & ul>li, & .button
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
position: absolute
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)
.filename
font-weight: bold
[class^="icon-"]
font-size: $nm-upload-file-status-icon-size
.notification-box--upload-status
font-size: rem-calc(18)
.notification-box.-upload
padding: $nm-upload-box-padding
font-size: $nm-upload-status-font-size !important
line-height: $nm-upload-status-font-size !important
.notification-box--content
width: 100%
@ -211,3 +234,16 @@ $nm-upload-box-padding: rem-calc(15) rem-calc(25)
border-radius: $nm-pb-border-radius
&::-webkit-progress-value
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