Browse Source

change the status display on lg and xl display and add Color on the status

AlexiCauvin 6 years ago
parent
commit
6fb3ed33a0
2 changed files with 54 additions and 8 deletions
  1. 37 6
      src/component/Workspace/FileItem.jsx
  2. 17 2
      src/css/FileItem.styl

+ 37 - 6
src/component/Workspace/FileItem.jsx View File

6
   const iconStatus = (() => {
6
   const iconStatus = (() => {
7
     switch (props.status) {
7
     switch (props.status) {
8
       case 'current':
8
       case 'current':
9
-        return 'fa fa-cogs current-color'
9
+        return 'fa fa-cogs'
10
       case 'validated':
10
       case 'validated':
11
-        return 'fa fa-check validated-color'
11
+        return 'fa fa-check'
12
       case 'canceled':
12
       case 'canceled':
13
-        return 'fa fa-ban canceled-color'
13
+        return 'fa fa-times'
14
       case 'outdated':
14
       case 'outdated':
15
-        return '' // @TODO
15
+        return 'fa fa-ban'
16
+    }
17
+  })()
18
+
19
+  const textStatus = (() => {
20
+    switch (props.status) {
21
+      case 'current':
22
+        return 'En cours'
23
+      case 'validated':
24
+        return 'Validé'
25
+      case 'canceled':
26
+        return 'Annulé'
27
+      case 'outdated':
28
+        return 'Obsolète'
29
+    }
30
+  })()
31
+
32
+  const colorStatus = (() => {
33
+    switch (props.status) {
34
+      case 'current':
35
+        return ' currentColor'
36
+      case 'validated':
37
+        return ' validateColor'
38
+      case 'canceled':
39
+        return ' cancelColor'
40
+      case 'outdated':
41
+        return ' outdateColor'
16
     }
42
     }
17
   })()
43
   })()
18
 
44
 
44
       </div>
70
       </div>
45
 
71
 
46
       <div className='col-2 col-sm-2 col-md-2 col-lg-2 col-xl-1'>
72
       <div className='col-2 col-sm-2 col-md-2 col-lg-2 col-xl-1'>
47
-        <div className='file__status'>
48
-          <i className={iconStatus} />
73
+        <div className={classnames('file__status') + colorStatus}>
74
+          <div className='file__status__text d-none d-lg-block text-center'>
75
+            {textStatus}
76
+          </div>
77
+          <div className='file__status__icon d-block d-lg-none text-center'>
78
+            <i className={iconStatus} />
79
+          </div>
49
         </div>
80
         </div>
50
       </div>
81
       </div>
51
     </div>
82
     </div>

+ 17 - 2
src/css/FileItem.styl View File

3
   margin-right 10px
3
   margin-right 10px
4
   font-size 20px
4
   font-size 20px
5
 
5
 
6
+.currentColor
7
+  color currentColor
8
+
9
+.validateColor
10
+  color validateColor
11
+
12
+.cancelColor
13
+  color cancelColor
14
+
15
+.outdateColor
16
+  color outdateColor
17
+
6
 .file
18
 .file
7
   display flex
19
   display flex
8
   padding 10px 0
20
   padding 10px 0
34
         &:hover, &:focus
46
         &:hover, &:focus
35
           color blue
47
           color blue
36
   &__status
48
   &__status
37
-    font-size 30px
38
-    text-align center
49
+    &__text
50
+      font-size 20px
51
+    &__icon
52
+      font-size 30px
53
+
39
 
54
 
40
 @media (min-width: max-xs) and (max-width: max-lg)
55
 @media (min-width: max-xs) and (max-width: max-lg)
41
   .file
56
   .file