首頁 探索 說明
登入
bux
/
tracim_v2
關註 1
收藏 0
複製 0
程式碼 問題管理 0 合併請求 0 版本發佈 0 Wiki Activity
瀏覽代碼

dashboard update according to the last mockup

AlexiCauvin 6 年之前
父節點
d884d2d359
當前提交
20c8662715
共有 2 個文件被更改，包括 169 次插入 和 56 次删除
分割檢視 顯示文件統計
  1. 93 28
      src/container/Dashboard.jsx
  2. 76 28
      src/css/Dashboard.styl

+ 93 - 28
src/container/Dashboard.jsx 查看文件 

@@ -10,9 +10,17 @@ class Dashboard extends Component {
10 10
11 11 
         <div className='dashboard'>
12 12 
           <div className='container-fluid nopadding'>
13 
-            <div className='pageTitleGeneric'>
14 
-              <div className='pageTitleGeneric__title dashboard__title'>
15 
-                Dashboard
13 
+            <div className='dashboard__header mb-5'>
14 
+              <div className='pageTitleGeneric dashboard__header__title d-flex align-items-center'>
15 
+                <div className='pageTitleGeneric__title dashboard__header__title__text mr-3'>
16 
+                  Dashboard
17 
+                </div>
18 
+                <div className='dashboard__header__acces'>
19 
+                  (privé)
20 
+                </div>
21 
+              </div>
22 
+              <div className='dashboard__header__advancedmode mr-3'>
23 
+                <button type='button' className='btn btn-primary'>Activé édition avancé</button>
16 24 
               </div>
17 25 
             </div>
18 26 
 
@@ -47,12 +55,12 @@ class Dashboard extends Component {
47 55 
                   <div className='dashboard__userstatut__notification__text'>
48 56 
                     Vous êtes abonné(e) aux notifications de ce workspace
49 57 
                   </div>
50 
-                  <div className='dashboard__userstatut__notification__btn btn btn-primary'>
58 
+                  <div className='dashboard__userstatut__notification__btn btn btn-outline-primary'>
51 59 
                     Changer de statut
52 60 
                   </div>
53 61
54 62 
                   <div className='dashboard__userstatut__notification__subscribe dropdown'>
55 
-                    <button className='dashboard__userstatut__notification__subscribe__btn btn btn-primary dropdown-toggle' type='button' id='dropdownMenuButton' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
63 
+                    <button className='dashboard__userstatut__notification__subscribe__btn btn btn-outline-primary dropdown-toggle' type='button' id='dropdownMenuButton' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
56 64 
                       Abonné(e)
57 65 
                     </button>
58 66 
                     <div className='dashboard__userstatut__notification__subscribe__submenu dropdown-menu'>
 
@@ -100,6 +108,17 @@ class Dashboard extends Component {
100 108 
                 </div>
101 109 
               </div>
102 110
111 
+              <div className='dashboard__calltoaction__button btnaction visioconf'>
112 
+                <div className='dashboard__calltoaction__button__text'>
113 
+                  <div className='dashboard__calltoaction__button__text__icon'>
114 
+                    <i className='fa fa-video-camera' />
115 
+                  </div>
116 
+                  <div className='dashboard__calltoaction__button__text__title'>
117 
+                    débuter une visioconférence
118 
+                  </div>
119 
+                </div>
120 
+              </div>
121 
+
103 122 
               <div className='dashboard__calltoaction__button btnaction calendar'>
104 123 
                 <div className='dashboard__calltoaction__button__text'>
105 124 
                   <div className='dashboard__calltoaction__button__text__icon'>
 
@@ -130,7 +149,7 @@ class Dashboard extends Component {
130 149 
                     Activité récente
131 150 
                   </div>
132 151
133 
-                  <div className='dashboard__activity__header__allread btn btn-primary'>
152 
+                  <div className='dashboard__activity__header__allread btn btn-outline-primary'>
134 153 
                     Tout marquer comme lu
135 154 
                   </div>
136 155 
                 </div>
 
@@ -190,7 +209,7 @@ class Dashboard extends Component {
190 209 
                   </div>
191 210
192 211 
                   <div className='dashboard__activity__more d-flex flex-row-reverse'>
193 
-                    <div className='dashboard__activity__more__btn btn btn-primary'>
212 
+                    <div className='dashboard__activity__more__btn btn btn-outline-primary'>
194 213 
                       Voir plus
195 214 
                     </div>
196 215 
                   </div>
 
@@ -209,7 +228,7 @@ class Dashboard extends Component {
209 228 
                       <div className='dashboard__memberlist__list__item__avatar'>
210 229 
                         <img src={imgProfil} alt='avatar' />
211 230 
                       </div>
212 
-                      <div className='dashboard__memberlist__list__item__info'>
231 
+                      <div className='dashboard__memberlist__list__item__info mr-auto'>
213 232 
                         <div className='dashboard__memberlist__list__item__info__name'>
214 233 
                           Jean Dupont
215 234 
                         </div>
 
@@ -217,13 +236,16 @@ class Dashboard extends Component {
217 236 
                           Responsable
218 237 
                         </div>
219 238 
                       </div>
239 
+                      <div className='dashboard__memberlist__list__item__delete d-flex justify-content-end'>
240 
+                        <i className='fa fa-trash-o' />
241 
+                      </div>
220 242 
                     </li>
221 243
222 244 
                     <li className='dashboard__memberlist__list__item'>
223 245 
                       <div className='dashboard__memberlist__list__item__avatar'>
224 246 
                         <img src={imgProfil} alt='avatar' />
225 247 
                       </div>
226 
-                      <div className='dashboard__memberlist__list__item__info'>
248 
+                      <div className='dashboard__memberlist__list__item__info mr-auto'>
227 249 
                         <div className='dashboard__memberlist__list__item__info__name'>
228 250 
                           Aldwin Vinel
229 251 
                         </div>
 
@@ -231,13 +253,16 @@ class Dashboard extends Component {
231 253 
                           lecteur
232 254 
                         </div>
233 255 
                       </div>
256 
+                      <div className='dashboard__memberlist__list__item__delete d-flex justify-content-end'>
257 
+                        <i className='fa fa-trash-o' />
258 
+                      </div>
234 259 
                     </li>
235 260
236 261 
                     <li className='dashboard__memberlist__list__item'>
237 262 
                       <div className='dashboard__memberlist__list__item__avatar'>
238 263 
                         <img src={imgProfil} alt='avatar' />
239 264 
                       </div>
240 
-                      <div className='dashboard__memberlist__list__item__info'>
265 
+                      <div className='dashboard__memberlist__list__item__info mr-auto'>
241 266 
                         <div className='dashboard__memberlist__list__item__info__name'>
242 267 
                           William Himme
243 268 
                         </div>
 
@@ -245,13 +270,16 @@ class Dashboard extends Component {
245 270 
                           contributeur
246 271 
                         </div>
247 272 
                       </div>
273 
+                      <div className='dashboard__memberlist__list__item__delete d-flex justify-content-end'>
274 
+                        <i className='fa fa-trash-o' />
275 
+                      </div>
248 276 
                     </li>
249 277
250 278 
                     <li className='dashboard__memberlist__list__item'>
251 279 
                       <div className='dashboard__memberlist__list__item__avatar'>
252 280 
                         <img src={imgProfil} alt='avatar' />
253 281 
                       </div>
254 
-                      <div className='dashboard__memberlist__list__item__info'>
282 
+                      <div className='dashboard__memberlist__list__item__info mr-auto'>
255 283 
                         <div className='dashboard__memberlist__list__item__info__name'>
256 284 
                           Yacine Lite
257 285 
                         </div>
 
@@ -259,13 +287,16 @@ class Dashboard extends Component {
259 287 
                           Gestionnaire de contenu
260 288 
                         </div>
261 289 
                       </div>
290 
+                      <div className='dashboard__memberlist__list__item__delete d-flex justify-content-end'>
291 
+                        <i className='fa fa-trash-o' />
292 
+                      </div>
262 293 
                     </li>
263 294
264 295 
                     <li className='dashboard__memberlist__list__item'>
265 296 
                       <div className='dashboard__memberlist__list__item__avatar'>
266 297 
                         <img src={imgProfil} alt='avatar' />
267 298 
                       </div>
268 
-                      <div className='dashboard__memberlist__list__item__info'>
299 
+                      <div className='dashboard__memberlist__list__item__info mr-auto'>
269 300 
                         <div className='dashboard__memberlist__list__item__info__name'>
270 301 
                           Yacine Lite
271 302 
                         </div>
 
@@ -273,13 +304,16 @@ class Dashboard extends Component {
273 304 
                           Gestionnaire de contenu
274 305 
                         </div>
275 306 
                       </div>
307 
+                      <div className='dashboard__memberlist__list__item__delete d-flex justify-content-end'>
308 
+                        <i className='fa fa-trash-o' />
309 
+                      </div>
276 310 
                     </li>
277 311
278 312 
                     <li className='dashboard__memberlist__list__item'>
279 313 
                       <div className='dashboard__memberlist__list__item__avatar'>
280 314 
                         <img src={imgProfil} alt='avatar' />
281 315 
                       </div>
282 
-                      <div className='dashboard__memberlist__list__item__info'>
316 
+                      <div className='dashboard__memberlist__list__item__info mr-auto'>
283 317 
                         <div className='dashboard__memberlist__list__item__info__name'>
284 318 
                           Yacine Lite
285 319 
                         </div>
 
@@ -287,6 +321,9 @@ class Dashboard extends Component {
287 321 
                           Gestionnaire de contenu
288 322 
                         </div>
289 323 
                       </div>
324 
+                      <div className='dashboard__memberlist__list__item__delete d-flex justify-content-end'>
325 
+                        <i className='fa fa-trash-o' />
326 
+                      </div>
290 327 
                     </li>
291 328
292 329 
                   </ul>
 
@@ -304,11 +341,14 @@ class Dashboard extends Component {
304 341 
                   </div>
305 342
306 343 
                   <form className='dashboard__memberlist__addmember'>
307 
-                    <label className='dashboard__memberlist__addmember__label' for='addmember'>Indiquer le nom de l'utilisateur</label>
344 
+                    <div className='dashboard__memberlist__addmember__close d-flex justify-content-end'>
345 
+                      <i className='fa fa-times' />
346 
+                    </div>
347 
+                    <label className='dashboard__memberlist__addmember__label' htmlFor='addmember'>Indiquer le nom de l'utilisateur</label>
308 348 
                     <input type='text' id='addmember' className='dashboard__memberlist__addmember__name form-control' placeholder='Name' />
309 349 
                     <div className='dashboard__memberlist__addmember__role'>
310 350 
                       <div className='dashboard__memberlist__addmember__role__dropdown dropdown'>
311 
-                        <button className='dashboard__memberlist__addmember__role__dropdown__button btn btn-primary dropdown-toggle' type='button' id='dropdownMenuButton' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
351 
+                        <button className='dashboard__memberlist__addmember__role__dropdown__button btn btn-outline-primary dropdown-toggle' type='button' id='dropdownMenuButton' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
312 352 
                           Rôle du membre
313 353 
                         </button>
314 354 
                         <div className='dashboard__memberlist__addmember__role__dropdown__submenu dropdown-menu'>
 
@@ -339,35 +379,60 @@ class Dashboard extends Component {
339 379 
                         </div>
340 380 
                       </div>
341 381 
                     </div>
342 
-                    <input type='submit' className='dashboard__memberlist__addmember__submitbtn' />
382 
+                    <div className='dashboard__memberlist__addmember__submitbtn'>
383 
+                      <button type='submit' className='btn btn-outline-primary'>Valider</button>
384 
+                    </div>
343 385 
                   </form>
344 386
345 387 
                 </div>
346 388 
               </div>
347 389 
             </div>
348 390
349 
-            <div className='dashboard__webdav genericWebdav'>
391 
+            <div className='dashboard__moreinfo'>
392 
+              <div className='dashboard__moreinfo__webdav genericBtnInfoDashboard mr-5'>
393 
+
394 
+                <div className='dashboard__moreinfo__webdav__btn genericBtnInfoDashboard__btn'>
395 
+                  <div className='dashboard__moreinfo__webdav__btn__icon genericBtnInfoDashboard__btn__icon'>
396 
+                    <i className='fa fa-windows' />
397 
+                  </div>
350 398
351 
-              <div className='dashboard__webdav__btn genericWebdav__btn'>
352 
-                <div className='dashboard__webdav__btn__icon genericWebdav__btn__icon'>
353 
-                  <i className='fa fa-windows' />
399 
+                  <div className='dashboard__moreinfo__webdav__btn__text genericBtnInfoDashboard__btn__text'>
400 
+                    Implémenter Tracim dans votre explorateur
401 
+                  </div>
354 402 
                 </div>
355 403
356 
-                <div className='dashboard__webdav__btn__text genericWebdav__btn__text'>
357 
-                  Implémenter Tracim dans votre explorateur
404 
+                <div className='dashboard__moreinfo__webdav__information genericBtnInfoDashboard__info'>
405 
+                  <div className='dashboard__moreinfo__webdav__information__text genericBtnInfoDashboard__info__text'>
406 
+                    Lorem ipsum dolore dolore laborum exercitation et deserunt ad ullamco nostrud dolore magna in proident elit amet do eu ut officia anim magna dolore adipisicing aliqua qui reprehenderit laborum labore tempor consectetur ut pariatur deserunt nostrud.
407 
+                  </div>
408 
+
409 
+                  <div className='dashboard__moreinfo__webdav__information__link genericBtnInfoDashboard__info__link'>
410 
+                    http://algoo.trac.im/webdav/
411 
+                  </div>
358 412 
                 </div>
359 413 
               </div>
414 
+              <div className='dashboard__moreinfo__calendar genericBtnInfoDashboard'>
360 415
361 
-              <div className='dashboard__webdav__information genericWebdav__info'>
362 
-                <div className='dashboard__webdav__information__text genericWebdav__info__text'>
363 
-                  Lorem ipsum dolore dolore laborum exercitation et deserunt ad ullamco nostrud dolore magna in proident elit amet do eu ut officia anim magna dolore adipisicing aliqua qui reprehenderit laborum labore tempor consectetur ut pariatur deserunt nostrud.
416 
+                <div className='dashboard__moreinfo__calendar__btn genericBtnInfoDashboard__btn'>
417 
+                  <div className='dashboard__moreinfo__calendar__btn__icon genericBtnInfoDashboard__btn__icon'>
418 
+                    <i className='fa fa-calendar' />
419 
+                  </div>
420 
+
421 
+                  <div className='dashboard__moreinfo__calendar__btn__text genericBtnInfoDashboard__btn__text'>
422 
+                    Calendrier de l'espace de travail
423 
+                  </div>
364 424 
                 </div>
365 425
366 
-                <div className='dashboard__webdav__information__link genericWebdav__info__link'>
367 
-                  http://algoo.trac.im/webdav/
426 
+                <div className='dashboard__moreinfo__calendar__information genericBtnInfoDashboard__info'>
427 
+                  <div className='dashboard__moreinfo__calendar__information__text genericBtnInfoDashboard__info__text'>
428 
+                    Lorem ipsum dolore dolore laborum exercitation et deserunt ad ullamco nostrud dolore magna in proident elit amet do eu ut officia anim magna dolore adipisicing aliqua qui reprehenderit laborum labore tempor consectetur ut pariatur deserunt nostrud.
429 
+                  </div>
430 
+
431 
+                  <div className='dashboard__moreinfo__calendar__information__link genericBtnInfoDashboard__info__link'>
432 
+                    http://algoo.trac.im/calendar/
433 
+                  </div>
368 434 
                 </div>
369 435 
               </div>
370 
-
371 436 
             </div>
372 437 
           </div>
373 438 
         </div>

+ 76 - 28
src/css/Dashboard.styl 查看文件 

@@ -17,8 +17,16 @@ bgandcolor()
17 17
18 18 
 .dashboard
19 19 
   margin-left 20px
20 
-  &__title
21 
-    margin 0
20 
+  &__header
21 
+    flexwrap()
22 
+    align-items center
23 
+    justify-content space-between
24 
+    &__title
25 
+      width auto
26 
+      &__text
27 
+        margin 0
28 
+    &__advancedmode
29 
+      cursor pointer
22 30 
   &__wkswrapper
23 31 
     flexwrap()
24 32 
   &__workspace
 
@@ -60,14 +68,14 @@ bgandcolor()
60 68 
             padding 10px
61 69 
   &__calltoaction
62 70 
     flexwrap()
63 
-    margin 50px 0
71 
+    margin 100px 0
64 72 
     &__button
65 73 
       &:active
66 74 
         box-shadow inset 0px 0px 5px 2px #656565
67 75 
       &__text
68 76 
         &__icon
69 77 
           font-size 30px
70 
-          .fa-comments-o, .fa-paperclip, .fa-calendar, .fa-file-text-o, .fa-folder-open-o
78 
+          .fa-comments-o, .fa-paperclip, .fa-calendar, .fa-file-text-o, .fa-folder-open-o, .fa-video-camera
71 79 
               color white
72 80 
         &__title
73 81 
           font-size 18px
 
@@ -78,12 +86,15 @@ bgandcolor()
78 86 
       background-color writefile
79 87 
     .importfile
80 88 
       background-color importfile
89 
+    .visioconf
90 
+      background-color grey-hover
81 91 
     .calendar
82 92 
       background-color calendar
83 93 
     .explore
84 94 
       background-color explore
85 95 
   &__wksinfo
86 96 
     flexwrap()
97 
+    margin-top 150px
87 98 
   &__activity
88 99 
     margin 0 35px 50px 0
89 100 
     width 60%
 
@@ -108,6 +119,10 @@ bgandcolor()
108 119 
       cursor pointer
109 120 
       &:hover
110 121 
         background-color folder-hover
122 
+      &:nth-child(even)
123 
+        background-color grey-hover
124 
+        &:hover
125 
+          background-color folder-hover
111 126 
       &__icon
112 127 
         margin 0 25px
113 128 
         font-size 25px
 
@@ -142,8 +157,14 @@ bgandcolor()
142 157 
         display flex
143 158 
         border-bottom 1px solid grey
144 159 
         padding 10px 15px
160 
+        &:hover
161 
+          background-color folder-hover
145 162 
         &:nth-last-child(1)
146 163 
           border-bottom 0
164 
+        &:nth-child(even)
165 
+          background-color grey-hover
166 
+          &:hover
167 
+            background-color folder-hover
147 168 
         &__avatar
148 169 
           margin-right 20px
149 170 
           width 50px
 
@@ -153,6 +174,10 @@ bgandcolor()
153 174 
             font-size 20px
154 175 
           &__role
155 176 
             font-size 18px
177 
+        &__delete
178 
+          font-size 20px
179 
+          color blue
180 
+          cursor pointer
156 181 
     &__btnadd
157 182 
       border-top 1px solid grey
158 183 
       padding 15px
 
@@ -180,29 +205,37 @@ bgandcolor()
180 205 
       position absolute
181 206 
       top 0
182 207 
       display none
208 
+      padding 15px
183 209 
       flex-direction column
184 
-      justify-content center
185 
-      align-items center
186 210 
       height 100%
187 211 
       width 100%
188 212 
       background-color off-white
213 
+      &__close
214 
+        font-size 20px
215 
+        cursor pointer
216 
+      &__label
217 
+        margin-top 80px
189 218 
       &__name
190 219 
         margin-bottom 20px
191 220 
         border 1px solid grey
192 221 
         border-radius 10px
193 222 
         padding 10px 25px
194 
-        width auto
223 
+        width 300px
195 224 
       &__role
196 225 
         margin-bottom 90px
197 226 
         &__dropdown
198 227 
           &__button
228 
+            display flex
229 
+            justify-content flex-start
199 230 
             border 1px solid blue
200 231 
             border-radius 10px
201 232 
             padding 10px 25px
233 
+            width 300px
202 234 
             &::after
203 
-              margin 10px 0 0 20px
235 
+              margin 10px 0 0 120px
204 236 
           &__submenu
205 237 
             padding 0
238 
+            width 300px
206 239 
             &__item
207 240 
               display flex
208 241 
               padding 10px
 
@@ -211,20 +244,28 @@ bgandcolor()
211 244 
               &__icon
212 245 
                 margin-right 15px
213 246 
       &__submitbtn
214 
-        border 1px solid blue
215 
-        border-radius 5px
216 
-        padding 5px 35px
217 
-        bgandcolor()
218 
-        cursor pointer
219 
-        &:hover, &:focus
220 
-          hoverfocus()
221 
-  &__webdav
222 
-    margin-bottom 100px
223 
-    &__btn
224 
-      width 300px
225 
-    &__information
226 
-      display none
227 
-      width 600px
247 
+        display flex
248 
+        justify-content flex-end
249 
+        & > button
250 
+          padding 8px 30px
251 
+          cursor pointer
252 
+  &__moreinfo
253 
+    display flex
254 
+    flexwrap wrap
255 
+    &__webdav
256 
+      margin-bottom 40px
257 
+      &__btn
258 
+        width 300px
259 
+      &__information
260 
+        display none
261 
+        width 600px
262 
+    &__calendar
263 
+      margin-bottom 100px
264 
+      &__btn
265 
+        width 300px
266 
+      &__information
267 
+        display none
268 
+        width 600px
228 269
229 270 
 /****** CLASS ACTIVE *******/
230 271 
 
@@ -246,7 +287,13 @@ bgandcolor()
246 287 
 /*** active webdav ***/
247 288
248 289 
 .activewebdav
249 
-  .dashboard__webdav__information
290 
+  .dashboard__moreinfo__webdav__information
291 
+    display block
292 
+
293 
+/*** active calendar ***/
294 
+
295 
+.activecalendar
296 
+  .dashboard__moreinfo__calendar__information
250 297 
     display block
251 298
252 299 
 /**** MEDIAQUERIES *****/
 
@@ -294,7 +341,7 @@ bgandcolor()
294 341 
     &__memberlist
295 342 
       margin 50px 0
296 343 
       width 90%
297 
-    &__webdav__information
344 
+    &__moreinfo__webdav__information
298 345 
       width 500px
299 346
300 347 
 /**** MEDIA 575px ****/
 
@@ -340,7 +387,8 @@ bgandcolor()
340 387 
           border-bottom 1px solid grey
341 388 
       &__btnadd
342 389 
         border-top 0
343 
-    &__webdav
344 
-      margin-left 10px
345 
-      &__information
346 
-        width 350px
390 
+    &__moreinfo
391 
+      &__webdav
392 
+        margin-left 10px
393 
+        &__information
394 
+          width 350px