首页 探索 帮助
登录
bux
/
tracim_v2
关注 1
点赞 0
派生 0
代码 工单 0 合并请求 0 版本发布 0 百科 动态
浏览代码

fixe of the integration of account's page

AlexiCauvin 7 年前
父节点
6f1881c9a9
当前提交
11b6d23b83
共有 11 个文件被更改，包括 365 次插入 和 404 次删除
分列视图 显示文件统计
  1. 13 8
      src/component/Sidebar/WorkspaceListItem.jsx
  2. 19 0
      src/component/common/Input/BtnSwitch.jsx
  3. 161 247
      src/container/AccountPage.jsx
  4. 21 16
      src/container/Sidebar.jsx
  5. 64 70
      src/css/AccountPage.styl
  6. 35 2
      src/css/Generic.styl
  7. 1 1
      src/css/Header.styl
  8. 37 57
      src/css/Sidebar.styl
  9. 3 1
      src/css/Variable.styl
  10. 8 2
      src/css/btnSwtich.styl
  11. 3 0
      src/css/index.styl

+ 13 - 8
src/component/Sidebar/WorkspaceListItem.jsx 查看文件 

@@ -29,16 +29,21 @@ const WorkspaceListItem = props => {
29 29 
       className='sidebar__navigation__workspace__item nav-item dropdown'
30 30 
       onClick={handleClickTitle}
31 31 
     >
32 
-      <div className='sidebar__navigation__workspace__item__number'>
33 
-        {pad(props.number)}
34 
-      </div>
35 32
36 
-      <div className='sidebar__navigation__workspace__item__name' title={props.name}>
37 
-        {props.name}
38 
-      </div>
33 
+      <div className='sidebar__navigation__workspace__item__wrapper'>
34 
+
35 
+        <div className='sidebar__navigation__workspace__item__number'>
36 
+          {pad(props.number)}
37 
+        </div>
38 
+
39 
+        <div className='sidebar__navigation__workspace__item__name' title={props.name}>
40 
+          {props.name}
41 
+        </div>
42 
+
43 
+        <div className='sidebar__navigation__workspace__item__icon'>
44 
+          <i className='fa fa-chevron-down' />
45 
+        </div>
39 46
40 
-      <div className='sidebar__navigation__workspace__item__icon'>
41 
-        <i className='fa fa-chevron-down' />
42 47 
       </div>
43 48
44 49 
       <ul

+ 19 - 0
src/component/common/Input/BtnSwitch.jsx 查看文件 

@@ -0,0 +1,19 @@
1 
+import React, { Component } from 'react'
2 
+
3 
+class BtnSwitch extends Component {
4 
+  render () {
5 
+    return (
6 
+      <div className='btnswitch'>
7 
+        <label className='switch nomarginlabel'>
8 
+          <input type='checkbox' />
9 
+          <span className='slider round' />
10 
+        </label>
11 
+        <div className='btnswitch__text'>
12 
+          On
13 
+        </div>
14 
+      </div>
15 
+    )
16 
+  }
17 
+}
18 
+
19 
+export default BtnSwitch

+ 161 - 247
src/container/AccountPage.jsx 查看文件 

@@ -1,13 +1,16 @@
1 1 
 import React, { Component } from 'react'
2 2 
 import imgProfil from '../img/imgProfil.png'
3 
+import BtnSwitch from '../component/common/input/BtnSwitch.jsx'
3 4
4 5 
 class AccountPage extends Component {
5 6 
   render () {
6 7 
     return (
7 
-      <div className='container-fluid nopadding'>
8 
-        <div className='account'>
9 
-          <div className='account__title ml-5'>
10 
-            Mon Compte
8 
+      <div className='account'>
9 
+        <div className='container-fluid nopadding'>
10 
+          <div className='pageTitleGeneric'>
11 
+            <div className='pageTitleGeneric__title'>
12 
+              Mon Compte
13 
+            </div>
11 14 
           </div>
12 15
13 16 
           <div className='account__userinformation mr-5 ml-5 mb-5'>
 
@@ -18,42 +21,39 @@ class AccountPage extends Component {
18 21 
               <div className='account__userinformation__name mb-3'>
19 22 
                 Alexi Cauvin
20 23 
               </div>
21 
-              <div className='account__userinformation__email mb-3'>
24 
+              <a href='mailto:contact@contact.fr' className='account__userinformation__email mb-3'>
22 25 
                 alexi.cauvin@algoo.fr
23 
-              </div>
26 
+              </a>
24 27 
               <div className='account__userinformation__role mb-3'>
25 28 
                 Utilisateur
26 29 
               </div>
27 30 
               <div className='account__userinformation__job mb-3'>
28 31 
                 Integrateur | Webdesigner
29 32 
               </div>
30 
-              <div className='account__userinformation__company'>
33 
+              <a href='www.algoo.fr' className='account__userinformation__company'>
31 34 
                 Algoo
32 
-              </div>
35 
+              </a>
33 36 
             </div>
34 37 
           </div>
35 38
36 
-          <div className='account__delimiteur' />
39 
+          <div className='account__delimiter GenericDelimiter' />
37 40
38 41 
           <div className='account__userpreference'>
39 42
40 43 
             <nav className='account__userpreference__menu navbar d-flex align-items-start'>
41 44
42 45 
               <div className='account__userpreference__menu__responsive d-lg-none'>
43 
-                <div className='account__userpreference__menu__responsive__burger' />
44 
-                <div className='account__userpreference__menu__responsive__burger' />
45 
-                <div className='account__userpreference__menu__responsive__burger' />
46 
+                <i className='fa fa-bars' />
46 47 
               </div>
47 48
48 
-
49 49 
               <ul className='account__userpreference__menu__list nav flex-column'>
50 50
51 
-                <div className='account__userpreference__menu__list__close nav-link'>
51 
+                <li className='account__userpreference__menu__list__close nav-link'>
52 52 
                   <i className='fa fa-times' />
53 
-                </div>
53 
+                </li>
54 54
55 
-                <div className='account__userpreference__menu__list__disabled'>Menu
56 
-                </div>
55 
+                <li className='account__userpreference__menu__list__disabled'>Menu
56 
+                </li>
57 57 
                 <li className='account__userpreference__menu__list__item nav-item'>
58 58 
                   <div className='account__userpreference__menu__list__item__link nav-link'>Informations Compte</div>
59 59 
                 </li>
 
@@ -69,33 +69,33 @@ class AccountPage extends Component {
69 69 
             <div className='account__userpreference__setting'>
70 70
71 71 
               <div className='account__userpreference__setting__personaldata d-none'>
72 
-                <div className='account__userpreference__setting__personaldata__title'>
72 
+                <div className='account__userpreference__setting__personaldata__title subTitle ml-2 ml-sm-0'>
73 73 
                   Mes informations personnelles
74 74 
                 </div>
75 75
76 
-                <div className='account__userpreference__setting__personaldata__text'>
76 
+                <div className='account__userpreference__setting__personaldata__text ml-2 ml-sm-0'>
77 77 
                   Ut consectetur dolor et sunt nisi officia ut magna. Ut consectetur dolor et sunt nisi officia ut magna.
78 78 
                   Ut consectetur dolor et sunt nisi officia ut magna.
79 79 
                 </div>
80 80
81 81 
                 <div className='account__userpreference__setting__personaldata__changeinfo'>
82 
-                  <div className='account__userpreference__setting__personaldata__changeinfo__subtitle'>
82 
+                  <div className='account__userpreference__setting__personaldata__changeinfo__infotitle'>
83 83 
                     Changer le mot de passe :
84 84 
                   </div>
85 
-                  <input className='account__userpreference__setting__personaldata__changeinfo__txtinput' type='password' placeholder='Ancien mot de passe' />
86 
-                  <input className='account__userpreference__setting__personaldata__changeinfo__txtinput' type='password' placeholder='Nouveau mot de passe' />
87 
-                  <div className='account__userpreference__setting__personaldata__changeinfo__button btn'>
85 
+                  <input className='account__userpreference__setting__personaldata__changeinfo__txtinput form-control' type='password' placeholder='Ancien mot de passe' />
86 
+                  <input className='account__userpreference__setting__personaldata__changeinfo__txtinput form-control' type='password' placeholder='Nouveau mot de passe' />
87 
+                  <div className='account__userpreference__setting__personaldata__changeinfo__button btn btn-primary'>
88 88 
                     Envoyer
89 89 
                   </div>
90 90 
                 </div>
91 91
92 92 
                 <div className='account__userpreference__setting__personaldata__changeinfo'>
93 
-                  <div className='account__userpreference__setting__personaldata__changeinfo__subtitle'>
93 
+                  <div className='account__userpreference__setting__personaldata__changeinfo__infotitle'>
94 94 
                     Changer d'adresse mail :
95 95 
                   </div>
96 
-                  <input className='account__userpreference__setting__personaldata__changeinfo__txtinput' type='email' placeholder='Ancienne adresse mail' />
97 
-                  <input className='account__userpreference__setting__personaldata__changeinfo__txtinput' type='email' placeholder='Nouvelle adresse mail' />
98 
-                  <div className='account__userpreference__setting__personaldata__changeinfo__button btn'>
96 
+                  <input className='account__userpreference__setting__personaldata__changeinfo__txtinput form-control' type='email' placeholder='Ancienne adresse mail' />
97 
+                  <input className='account__userpreference__setting__personaldata__changeinfo__txtinput form-control' type='email' placeholder='Nouvelle adresse mail' />
98 
+                  <div className='account__userpreference__setting__personaldata__changeinfo__button btn btn-primary'>
99 99 
                     Envoyer
100 100 
                   </div>
101 101 
                 </div>
 
@@ -103,23 +103,23 @@ class AccountPage extends Component {
103 103
104 104 
               <div className='account__userpreference__setting__calendar d-none'>
105 105
106 
-                <div className='account__userpreference__setting__calendar__title'>
106 
+                <div className='account__userpreference__setting__calendar__title subTitle ml-2 ml-sm-0'>
107 107 
                   Calendrier
108 108 
                 </div>
109 109
110 
-                <div className='account__userpreference__setting__calendar__text'>
110 
+                <div className='account__userpreference__setting__calendar__text ml-2 ml-sm-0'>
111 111 
                   Ut consectetur dolor et sunt nisi officia ut magna. Ut consectetur dolor et sunt nisi officia ut magna.
112 112 
                   Ut consectetur dolor et sunt nisi officia ut magna.
113 113 
                 </div>
114 114
115 
-                <div className='account__userpreference__setting__calendar__subtitle'>
115 
+                <div className='account__userpreference__setting__calendar__infotitle'>
116 116 
                   Accèder à votre Calendrier personnel
117 117 
                 </div>
118 118 
                 <div className='account__userpreference__setting__calendar__link'>
119 119 
                   http://algoo.trac.im/caldav/user/262.ics/
120 120 
                 </div>
121 121
122 
-                <div className='account__userpreference__setting__calendar__subtitle'>
122 
+                <div className='account__userpreference__setting__calendar__infotitle'>
123 123 
                   Changer de Fuseau Horaire :
124 124 
                 </div>
125 125 
 
@@ -138,270 +138,184 @@ class AccountPage extends Component {
138 138
139 139 
               <div className='account__userpreference__setting__notification'>
140 140
141 
-                <div className='account__userpreference__setting__notification__title'>
141 
+                <div className='account__userpreference__setting__notification__title subTitle ml-2 ml-sm-0'>
142 142 
                   Mes Espaces de Travail
143 143 
                 </div>
144 144
145 
-                <div className='account__userpreference__setting__notification__text'>
145 
+                <div className='account__userpreference__setting__notification__text ml-2 ml-sm-0'>
146 146 
                   Ut consectetur dolor et sunt nisi officia ut magna. Ut consectetur dolor et sunt nisi officia ut magna.
147 147 
                   Ut consectetur dolor et sunt nisi officia ut magna.
148 148 
                 </div>
149 149
150 
-                <div className='container-fluid'>
151 
-                  <div className='account__userpreference__setting__notification__table'>
152 
-                    <div className='account__userpreference__setting__notification__table__header'>
153 
-                      <div className='row'>
154 
-                        <div className='col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4'>
155 
-                          <div className='account__userpreference__setting__notification__table__workspace'>
156 
-                            Espace de Travail
157 
-                          </div>
158 
-                        </div>
159 
-                        <div className='col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4'>
160 
-                          <div className='account__userpreference__setting__notification__table__role justify-content-center'>
161 
-                            Role
162 
-                          </div>
163 
-                        </div>
164 
-                        <div className='col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4'>
165 
-                          <div className='account__userpreference__setting__notification__table__btnswitch text-right'>
166 
-                            Notifiaction
150 
+                <div className='account__userpreference__setting__notification__tableau'>
151 
+                  <table className='table'>
152 
+                    <thead>
153 
+                      <tr>
154 
+                        <th>Espace de travail</th>
155 
+                        <th>Role</th>
156 
+                        <th>Notification</th>
157 
+                      </tr>
158 
+                    </thead>
159 
+                    <tbody>
160 
+                      <tr>
161 
+                        <td>
162 
+                          <div className='account__userpreference__setting__notification__tableau__wksname'>
163 
+                            Nouvelle ligne directrice du nouveau design de Tracim v2 en date du 10 Octobre 2017
167 164 
                           </div>
168 
-                        </div>
169 
-                      </div>
170 
-                    </div>
171 
-
172 
-                    <div className='account__userpreference__setting__notification__table__line'>
173 
-                      <div className='row'>
174 
-                        <div className='col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4'>
175 
-                          <div className='account__userpreference__setting__notification__table__workspace'>
176 
-                            Workspace 1
177 
-                          </div>
178 
-                        </div>
179 
-                        <div className='col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4'>
180 
-                          <div className='account__userpreference__setting__notification__table__role justify-content-sm-center'>
181 
-                            <div className='account__userpreference__setting__notification__table__role__icon'>
165 
+                        </td>
166 
+                        <td>
167 
+                          <div className='account__userpreference__setting__notification__tableau__role'>
168 
+                            <div className='account__userpreference__setting__notification__tableau__role__icon'>
182 169 
                               <i className='fa fa-graduation-cap' />
183 170 
                             </div>
184 
-                            <div className='account__userpreference__setting__notification__table__role__text'>
185 
-                              Gestionnaire de contenu
171 
+                            <div className='account__userpreference__setting__notification__tableau__role__text'>
172 
+                              Gestionnaire de Contenu
186 173 
                             </div>
187 174 
                           </div>
188 
-                        </div>
189 
-                        <div className='col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4'>
190 
-                          <div className='account__userpreference__setting__notification__table__btnswitch d-flex justify-content-sm-end'>
191 
-                            <div className='account__userpreference__setting__notification__table__btnswitch__switcher'>
192 
-                              <label className='switch nomarginlabel'>
193 
-                                <input type='checkbox' />
194 
-                                <span className='slider round' />
195 
-                              </label>
196 
-                              <div className='account__userpreference__setting__notification__table__btnswitch__switcher__text'>
197 
-                                On
198 
-                              </div>
199 
-                            </div>
175 
+                        </td>
176 
+                        <td>
177 
+                          <div className='account__userpreference__setting__notification__tableau__btnswitch'>
178 
+                            <BtnSwitch />
200 179 
                           </div>
201 
-                        </div>
202 
-                      </div>
203 
-                    </div>
204 
-
205 
-                    <div className='account__userpreference__setting__notification__table__line'>
206 
-                      <div className='row'>
207 
-                        <div className='col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4'>
208 
-                          <div className='account__userpreference__setting__notification__table__workspace'>
209 
-                            Workspace 1
180 
+                        </td>
181 
+                      </tr>
182 
+                      <tr>
183 
+                        <td>
184 
+                          <div className='account__userpreference__setting__notification__tableau__wksname'>
185 
+                            Nouvelle ligne directrice du nouveau design de Tracim v2 en date du 10 Octobre 2017
210 186 
                           </div>
211 
-                        </div>
212 
-                        <div className='col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4'>
213 
-                          <div className='account__userpreference__setting__notification__table__role justify-content-sm-center'>
214 
-                            <div className='account__userpreference__setting__notification__table__role__icon'>
215 
-                              <i className='fa fa-graduation-cap' />
187 
+                        </td>
188 
+                        <td>
189 
+                          <div className='account__userpreference__setting__notification__tableau__role'>
190 
+                            <div className='account__userpreference__setting__notification__tableau__role__icon'>
191 
+                              <i className='fa fa-eye' />
216 192 
                             </div>
217 
-                            <div className='account__userpreference__setting__notification__table__role__text'>
218 
-                              Gestionnaire de contenu
193 
+                            <div className='account__userpreference__setting__notification__tableau__role__text'>
194 
+                              Lecteur
219 195 
                             </div>
220 196 
                           </div>
221 
-                        </div>
222 
-                        <div className='col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4'>
223 
-                          <div className='account__userpreference__setting__notification__table__btnswitch d-flex justify-content-sm-end'>
224 
-                            <div className='account__userpreference__setting__notification__table__btnswitch__switcher'>
225 
-                              <label className='switch nomarginlabel'>
226 
-                                <input type='checkbox' />
227 
-                                <span className='slider round' />
228 
-                              </label>
229 
-                              <div className='account__userpreference__setting__notification__table__btnswitch__switcher__text'>
230 
-                                On
231 
-                              </div>
232 
-                            </div>
197 
+                        </td>
198 
+                        <td>
199 
+                          <div className='account__userpreference__setting__notification__tableau__btnswitch'>
200 
+                            <BtnSwitch />
233 201 
                           </div>
234 
-                        </div>
235 
-                      </div>
236 
-                    </div>
237 
-
238 
-                    <div className='account__userpreference__setting__notification__table__line'>
239 
-                      <div className='row'>
240 
-                        <div className='col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4'>
241 
-                          <div className='account__userpreference__setting__notification__table__workspace'>
242 
-                            Workspace 1
202 
+                        </td>
203 
+                      </tr>
204 
+                      <tr>
205 
+                        <td>
206 
+                          <div className='account__userpreference__setting__notification__tableau__wksname'>
207 
+                            Nouvelle ligne directrice du nouveau design de Tracim v2 en date du 10 Octobre 2017
243 208 
                           </div>
244 
-                        </div>
245 
-                        <div className='col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4'>
246 
-                          <div className='account__userpreference__setting__notification__table__role justify-content-sm-center'>
247 
-                            <div className='account__userpreference__setting__notification__table__role__icon'>
248 
-                              <i className='fa fa-graduation-cap' />
209 
+                        </td>
210 
+                        <td>
211 
+                          <div className='account__userpreference__setting__notification__tableau__role'>
212 
+                            <div className='account__userpreference__setting__notification__tableau__role__icon'>
213 
+                              <i className='fa fa-pencil' />
249 214 
                             </div>
250 
-                            <div className='account__userpreference__setting__notification__table__role__text'>
251 
-                              Gestionnaire de contenu
215 
+                            <div className='account__userpreference__setting__notification__tableau__role__text'>
216 
+                              Contributeur
252 217 
                             </div>
253 218 
                           </div>
254 
-                        </div>
255 
-                        <div className='col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4'>
256 
-                          <div className='account__userpreference__setting__notification__table__btnswitch d-flex justify-content-sm-end'>
257 
-                            <div className='account__userpreference__setting__notification__table__btnswitch__switcher'>
258 
-                              <label className='switch nomarginlabel'>
259 
-                                <input type='checkbox' />
260 
-                                <span className='slider round' />
261 
-                              </label>
262 
-                              <div className='account__userpreference__setting__notification__table__btnswitch__switcher__text'>
263 
-                                On
264 
-                              </div>
265 
-                            </div>
219 
+                        </td>
220 
+                        <td>
221 
+                          <div className='account__userpreference__setting__notification__tableau__btnswitch'>
222 
+                            <BtnSwitch />
266 223 
                           </div>
267 
-                        </div>
268 
-                      </div>
269 
-                    </div>
270 
-
271 
-                    <div className='account__userpreference__setting__notification__table__line'>
272 
-                      <div className='row'>
273 
-                        <div className='col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4'>
274 
-                          <div className='account__userpreference__setting__notification__table__workspace'>
275 
-                            Workspace 1
224 
+                        </td>
225 
+                      </tr>
226 
+                      <tr>
227 
+                        <td>
228 
+                          <div className='account__userpreference__setting__notification__tableau__wksname'>
229 
+                            Nouvelle ligne directrice du nouveau design de Tracim v2 en date du 10 Octobre 2017
276 230 
                           </div>
277 
-                        </div>
278 
-                        <div className='col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4'>
279 
-                          <div className='account__userpreference__setting__notification__table__role justify-content-sm-center'>
280 
-                            <div className='account__userpreference__setting__notification__table__role__icon'>
281 
-                              <i className='fa fa-graduation-cap' />
231 
+                        </td>
232 
+                        <td>
233 
+                          <div className='account__userpreference__setting__notification__tableau__role'>
234 
+                            <div className='account__userpreference__setting__notification__tableau__role__icon'>
235 
+                              <i className='fa fa-gavel' />
282 236 
                             </div>
283 
-                            <div className='account__userpreference__setting__notification__table__role__text'>
284 
-                              Gestionnaire de contenu
237 
+                            <div className='account__userpreference__setting__notification__tableau__role__text'>
238 
+                              Responsable
285 239 
                             </div>
286 240 
                           </div>
287 
-                        </div>
288 
-                        <div className='col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4'>
289 
-                          <div className='account__userpreference__setting__notification__table__btnswitch d-flex justify-content-sm-end'>
290 
-                            <div className='account__userpreference__setting__notification__table__btnswitch__switcher'>
291 
-                              <label className='switch nomarginlabel'>
292 
-                                <input type='checkbox' />
293 
-                                <span className='slider round' />
294 
-                              </label>
295 
-                              <div className='account__userpreference__setting__notification__table__btnswitch__switcher__text'>
296 
-                                On
297 
-                              </div>
298 
-                            </div>
241 
+                        </td>
242 
+                        <td>
243 
+                          <div className='account__userpreference__setting__notification__tableau__btnswitch'>
244 
+                            <BtnSwitch />
299 245 
                           </div>
300 
-                        </div>
301 
-                      </div>
302 
-                    </div>
303 
-
304 
-                    <div className='account__userpreference__setting__notification__table__line'>
305 
-                      <div className='row'>
306 
-                        <div className='col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4'>
307 
-                          <div className='account__userpreference__setting__notification__table__workspace'>
308 
-                            Workspace 1
246 
+                        </td>
247 
+                      </tr>
248 
+                      <tr>
249 
+                        <td>
250 
+                          <div className='account__userpreference__setting__notification__tableau__wksname'>
251 
+                            Nouvelle ligne directrice du nouveau design de Tracim v2 en date du 10 Octobre 2017
309 252 
                           </div>
310 
-                        </div>
311 
-                        <div className='col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4'>
312 
-                          <div className='account__userpreference__setting__notification__table__role justify-content-sm-center'>
313 
-                            <div className='account__userpreference__setting__notification__table__role__icon'>
253 
+                        </td>
254 
+                        <td>
255 
+                          <div className='account__userpreference__setting__notification__tableau__role'>
256 
+                            <div className='account__userpreference__setting__notification__tableau__role__icon'>
314 257 
                               <i className='fa fa-graduation-cap' />
315 258 
                             </div>
316 
-                            <div className='account__userpreference__setting__notification__table__role__text'>
317 
-                              Gestionnaire de contenu
259 
+                            <div className='account__userpreference__setting__notification__tableau__role__text'>
260 
+                              Gestionnaire de Contenu
318 261 
                             </div>
319 262 
                           </div>
320 
-                        </div>
321 
-                        <div className='col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4'>
322 
-                          <div className='account__userpreference__setting__notification__table__btnswitch d-flex justify-content-sm-end'>
323 
-                            <div className='account__userpreference__setting__notification__table__btnswitch__switcher'>
324 
-                              <label className='switch nomarginlabel'>
325 
-                                <input type='checkbox' />
326 
-                                <span className='slider round' />
327 
-                              </label>
328 
-                              <div className='account__userpreference__setting__notification__table__btnswitch__switcher__text'>
329 
-                                On
330 
-                              </div>
331 
-                            </div>
263 
+                        </td>
264 
+                        <td>
265 
+                          <div className='account__userpreference__setting__notification__tableau__btnswitch'>
266 
+                            <BtnSwitch />
332 267 
                           </div>
333 
-                        </div>
334 
-                      </div>
335 
-                    </div>
336 
-
337 
-                    <div className='account__userpreference__setting__notification__table__line'>
338 
-                      <div className='row'>
339 
-                        <div className='col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4'>
340 
-                          <div className='account__userpreference__setting__notification__table__workspace'>
341 
-                            Workspace 1
268 
+                        </td>
269 
+                      </tr>
270 
+                      <tr>
271 
+                        <td>
272 
+                          <div className='account__userpreference__setting__notification__tableau__wksname'>
273 
+                            Nouvelle ligne directrice du nouveau design de Tracim v2 en date du 10 Octobre 2017
342 274 
                           </div>
343 
-                        </div>
344 
-                        <div className='col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4'>
345 
-                          <div className='account__userpreference__setting__notification__table__role justify-content-sm-center'>
346 
-                            <div className='account__userpreference__setting__notification__table__role__icon'>
275 
+                        </td>
276 
+                        <td>
277 
+                          <div className='account__userpreference__setting__notification__tableau__role'>
278 
+                            <div className='account__userpreference__setting__notification__tableau__role__icon'>
347 279 
                               <i className='fa fa-graduation-cap' />
348 280 
                             </div>
349 
-                            <div className='account__userpreference__setting__notification__table__role__text'>
350 
-                              Gestionnaire de contenu
281 
+                            <div className='account__userpreference__setting__notification__tableau__role__text'>
282 
+                              Gestionnaire de Contenu
351 283 
                             </div>
352 284 
                           </div>
353 
-                        </div>
354 
-                        <div className='col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4'>
355 
-                          <div className='account__userpreference__setting__notification__table__btnswitch d-flex justify-content-sm-end'>
356 
-                            <div className='account__userpreference__setting__notification__table__btnswitch__switcher'>
357 
-                              <label className='switch nomarginlabel'>
358 
-                                <input type='checkbox' />
359 
-                                <span className='slider round' />
360 
-                              </label>
361 
-                              <div className='account__userpreference__setting__notification__table__btnswitch__switcher__text'>
362 
-                                On
363 
-                              </div>
364 
-                            </div>
285 
+                        </td>
286 
+                        <td>
287 
+                          <div className='account__userpreference__setting__notification__tableau__btnswitch'>
288 
+                            <BtnSwitch />
365 289 
                           </div>
366 
-                        </div>
367 
-                      </div>
368 
-                    </div>
369 
-
370 
-                    <div className='account__userpreference__setting__notification__table__line'>
371 
-                      <div className='row'>
372 
-                        <div className='col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4'>
373 
-                          <div className='account__userpreference__setting__notification__table__workspace'>
374 
-                            Workspace 1
290 
+                        </td>
291 
+                      </tr>
292 
+                      <tr>
293 
+                        <td>
294 
+                          <div className='account__userpreference__setting__notification__tableau__wksname'>
295 
+                            Nouvelle ligne directrice du nouveau design de Tracim v2 en date du 10 Octobre 2017
375 296 
                           </div>
376 
-                        </div>
377 
-                        <div className='col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4'>
378 
-                          <div className='account__userpreference__setting__notification__table__role justify-content-sm-center'>
379 
-                            <div className='account__userpreference__setting__notification__table__role__icon'>
297 
+                        </td>
298 
+                        <td>
299 
+                          <div className='account__userpreference__setting__notification__tableau__role'>
300 
+                            <div className='account__userpreference__setting__notification__tableau__role__icon'>
380 301 
                               <i className='fa fa-graduation-cap' />
381 302 
                             </div>
382 
-                            <div className='account__userpreference__setting__notification__table__role__text'>
383 
-                              Gestionnaire de contenu
303 
+                            <div className='account__userpreference__setting__notification__tableau__role__text'>
304 
+                              Gestionnaire de Contenu
384 305 
                             </div>
385 306 
                           </div>
386 
-                        </div>
387 
-                        <div className='col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4'>
388 
-                          <div className='account__userpreference__setting__notification__table__btnswitch d-flex justify-content-sm-end'>
389 
-                            <div className='account__userpreference__setting__notification__table__btnswitch__switcher'>
390 
-                              <label className='switch nomarginlabel'>
391 
-                                <input type='checkbox' />
392 
-                                <span className='slider round' />
393 
-                              </label>
394 
-                              <div className='account__userpreference__setting__notification__table__btnswitch__switcher__text'>
395 
-                                On
396 
-                              </div>
397 
-                            </div>
307 
+                        </td>
308 
+                        <td>
309 
+                          <div className='account__userpreference__setting__notification__tableau__btnswitch'>
310 
+                            <BtnSwitch />
398 311 
                           </div>
399 
-                        </div>
400 
-                      </div>
401 
-                    </div>
402 
-                  </div>
312 
+                        </td>
313 
+                      </tr>
314 
+                    </tbody>
315 
+                  </table>
403 316 
                 </div>
404 317 
               </div>
318 
+
405 319 
             </div>
406 320 
           </div>
407 321 
         </div>

+ 21 - 16
src/container/Sidebar.jsx 查看文件 

@@ -32,30 +32,35 @@ class Sidebar extends React.Component {
32 32 
             />
33 33
34 34 
             <li className='sidebar__navigation__workspace__item nav-item dropdown'>
35 
-              <div className='sidebar__navigation__workspace__item__number'>
36 
-                02
37 
-              </div>
38 
-              <div className='sidebar__navigation__workspace__item__name'>
39 
-                Workspace 2
40 
-              </div>
35 
+              <div className='sidebar__navigation__workspace__item__wrapper'>
36 
+                <div className='sidebar__navigation__workspace__item__number'>
37 
+                  02
38 
+                </div>
39 
+                <div className='sidebar__navigation__workspace__item__name'>
40 
+                  Workspace 2
41 
+                </div>
41 42
42 
-              <div className='sidebar__navigation__workspace__item__icon'>
43 
-                <i className='fa fa-chevron-down' />
43 
+                <div className='sidebar__navigation__workspace__item__icon'>
44 
+                  <i className='fa fa-chevron-down' />
45 
+                </div>
44 46 
               </div>
45 47 
             </li>
46 48
47 49 
             <li className='sidebar__navigation__workspace__item nav-item dropdown'>
48 
-              <div className='sidebar__navigation__workspace__item__number'>
49 
-                03
50 
-              </div>
51 
-              <div className='sidebar__navigation__workspace__item__name'>
52 
-                Workspace 3
53 
-              </div>
50 
+              <div className='sidebar__navigation__workspace__item__wrapper'>
51 
+                <div className='sidebar__navigation__workspace__item__number'>
52 
+                  03
53 
+                </div>
54 
+                <div className='sidebar__navigation__workspace__item__name'>
55 
+                  Workspace 3
56 
+                </div>
54 57
55 
-              <div className='sidebar__navigation__workspace__item__icon'>
56 
-                <i className='fa fa-chevron-down' />
58 
+                <div className='sidebar__navigation__workspace__item__icon'>
59 
+                  <i className='fa fa-chevron-down' />
60 
+                </div>
57 61 
               </div>
58 62 
             </li>
63 
+
59 64 
           </ul>
60 65 
         </nav>
61 66

+ 64 - 70
src/css/AccountPage.styl 查看文件 

@@ -1,23 +1,11 @@
1 
-.nopadding
2 
-  padding 0
3 
-
4 1 
 .nomarginlabel
5 2 
   margin-bottom 0
6 3
7 
-settingTitle()
8 
-  margin 15px 0 15px 15px
9 
-  font-size 20px
10 
-  font-weight 500
11 
-  color blue
12 
-
13 4 
 settingText()
14 
-  margin 15px 0 15px 15px
5 
+  margin 15px 0
15 6 
   font-size 18px
16 7
17 8 
 .account
18 
-  &__title
19 
-    margin 20px 0
20 
-    font-size 35px
21 9 
   &__userinformation
22 10 
     display flex
23 11 
     justify-content center
 
@@ -40,14 +28,11 @@ settingText()
40 28 
     &__company
41 29 
       font-size 20px
42 30 
       color blue
43 
-  &__delimiteur
31 
+  &__delimiter
44 32 
     position relative
45 33 
     top 3px
46 
-    left calc(50% - 250px) // 250px => width / 2
47 
-    border-radius 10px
48 
-    width 500px
49 
-    height 5px
50 
-    background-color blue
34 
+    margin auto
35 
+    z-index 3
51 36 
   &__userpreference
52 37 
     display flex
53 38 
     padding 25px
 
@@ -58,16 +43,9 @@ settingText()
58 43 
       border-radius 10px
59 44 
       padding 0
60 45 
       width 20%
61 
-      min-height 600px
62 46 
       background-color off-white
63 47 
       &__responsive
64 
-        &__burger
65 
-          margin-bottom 3px
66 
-          border-radius 10px
67 
-          width 35px
68 
-          height 4px
69 
-          background-color blue
70 
-          cursor pointer
48 
+        font-size 20px
71 49 
       &__list
72 50 
         width 100%
73 51 
         margin-bottom 20px
 
@@ -78,11 +56,12 @@ settingText()
78 56 
           font-size 20px
79 57 
           cursor pointer
80 58 
         &__disabled
81 
-          margin 10px 0 0 15px
59 
+          padding 25px 20px 20px 20px
82 60 
           color grey
83 61 
           font-size 18px
84 62 
         &__item
85 63 
           margin-top 10px
64 
+          padding-left 5px
86 65 
           font-weight 500
87 66 
           font-size 18px
88 67 
           cursor pointer
 
@@ -91,20 +70,21 @@ settingText()
91 70 
             color white
92 71 
     &__setting
93 72 
       border-radius 10px
73 
+      padding 20px
94 74 
       width 80%
95 
-      min-height 600px
96 75 
       background-color off-white
97 76 
       &__personaldata
98 
-        &__title
99 
-          settingTitle()
100 77 
         &__text
101 78 
           settingText()
102 79 
         &__changeinfo
103 
-          margin 25px 0 25px 15px
104 
-          &__subtitle
80 
+          margin 25px 0
81 
+          &__infotitle
105 82 
             margin-bottom 15px
106 83 
             font-size 18px
107 84 
           &__txtinput
85 
+            display inline-flex
86 
+            display ms-inline-flex
87 
+            width auto
108 88 
             margin 0 15px 15px 0
109 89 
             border 1px solid blue
110 90 
             border-radius 10px
 
@@ -113,7 +93,10 @@ settingText()
113 93 
             vertical-align top
114 94 
             border 1px solid blue
115 95 
             border-radius 10px
116 
-            padding 10px 25px
96 
+            padding 8px 25px
97 
+            background-color transparent
98 
+            color blue
99 
+            cursor pointer
117 100 
             &:hover, &:focus
118 101 
               background-color blue
119 102 
               color white
 
@@ -122,17 +105,16 @@ settingText()
122 105 
           settingTitle()
123 106 
         &__text
124 107 
           settingText()
125 
-        &__subtitle
126 
-          margin 15px 0 15px 15px
108 
+        &__infotitle
109 
+          margin 15px 0
127 110 
           font-size 18px
128 111 
         &__link
129 
-          margin-left 15px
112 
+          display inline-block
130 113 
           border 1px solid grey
131 114 
           border-radius 10px
132 
-          width 400px
133 115 
           padding 10px 25px
134 116 
         &__timezone
135 
-          margin 15px 0 30px 15px
117 
+          margin 15px 0 30px 0
136 118 
           &__btn
137 119 
             border 1px solid blue
138 120 
             border-radius 10px
 
@@ -145,6 +127,7 @@ settingText()
145 127 
               background-color blue
146 128 
               color white
147 129 
           &__submenu
130 
+            width 203px
148 131 
             max-height 300px
149 132 
             overflow-Y auto
150 133 
             &__item
 
@@ -152,36 +135,27 @@ settingText()
152 135 
                 background-color blue
153 136 
                 color white
154 137 
       &__notification
155 
-        margin 15px 15px 35px 15px
156 138 
         &__title
157 139 
           settingTitle()
158 140 
         &__text
159 141 
           settingText()
160 142 
           margin-bottom 30px
161 
-        &__table
162 
-          border 1px solid grey
163 
-          &__header
164 
-            border-bottom 1px solid grey
165 
-            padding 10px 20px
166 
-          &__line
167 
-            border-bottom 1px solid grey
168 
-            padding 10px 20px
169 
-          &__workspace
170 
-            font-size 18px
171 
-            white-space nowrap
172 
-            overflow hidden
173 
-            text-overflow ellipsis
143 
+        &__tableau
144 
+          border 1px solid lightGrey
174 145 
           &__role
175 146 
             display flex
176 
-            font-size 18px
147 
+            align-items center
177 148 
             &__icon
178 149 
               margin-right 10px
179 
-              color gestionnaire
180 
-          &__btnswitch
181 
-            &__switcher
182 
-              display flex
183 
-              &__text
184 
-                margin 5px 0 0 15px
150 
+              .fa-graduation-cap
151 
+                color gestionnaire
152 
+              .fa-pencil
153 
+                color contributeur
154 
+              .fa-gavel
155 
+                color responsable
156 
+              .fa-eye
157 
+                color lecteur
158 
+
185 159
186 160 
 .account__userpreference__setting__notification__table__line:nth-last-child(1)
187 161 
   border-bottom 0
 
@@ -237,6 +211,8 @@ settingText()
237 211 
             width 300px
238 212 
             &__close
239 213 
               display flex
214 
+            &__disabled
215 
+              padding 0 20px
240 216
241 217 
 /***** MEDIA LG *****/
242 218 
 
@@ -249,6 +225,22 @@ settingText()
249 225 
         margin-right 15px
250 226 
         width 25%
251 227
228 
+/**** MEDIA SM ****/
229 
+
230 
+@media (min-width: min-sm) and (max-width: max-sm)
231 
+
232 
+  .account
233 
+    &__userpreference
234 
+      padding 25px 0
235 
+      &__menu
236 
+        margin-left 15px
237 
+      &__setting
238 
+        padding 30px 15px
239 
+
240 
+  .activemenu
241 
+    .account__userpreference__menu
242 
+      margin-left 0
243 
+
252 244 
 /***** MEDIA XS *****/
253 245
254 246 
 @media (max-width: max-xs)
 
@@ -280,17 +272,16 @@ settingText()
280 272 
         &__calendar
281 273 
           &__link
282 274 
             padding 10px 15px
283 
-            width 345px
284 275 
         &__notification
285 
-          &__table
286 
-            &__header
287 
-              display none
288 
-            &__workspace
289 
-              margin-bottom 20px
290 
-            &__role
291 
-              margin-bottom 20px
292 
-            &__btnswitch
293 
-              margin-bottom 20px
276 
+          &__tableau
277 
+            &__wksname
278 
+              text-overflow ellipsis
279 
+              white-space nowrap
280 
+              overflow hidden
281 
+              width 100px
282 
+              &:focus
283 
+                overflow visible
284 
+                width auto
294 285
295 286 
   .activemenu
296 287 
     .account
 
@@ -300,6 +291,7 @@ settingText()
300 291 
           position absolute
301 292 
           top 0
302 293 
           left 0
294 
+          margin-left 0
303 295 
           border-radius 10px
304 296 
           width 100%
305 297 
           height 100%
 
@@ -315,3 +307,5 @@ settingText()
315 307 
             width 300px
316 308 
             &__close
317 309 
               display flex
310 
+            &__disabled
311 
+              padding 0 20px

+ 35 - 2
src/css/Generic.styl 查看文件 

@@ -1,8 +1,14 @@
1 
+/*** SIDEBAR ***/
2 
+
1 3 
 .sidebarpagecontainer
2 4 
   display flex
3 5 
   min-height calc(100% - 50px)
4 6 
   padding-top 85px
5 7
8 
+/********************/
9 
+
10 
+/*** ELEMENTS ON ALL PAGE ***/
11 
+
6 12 
 .pageWrapperGeneric
7 13 
   width 100%
8 14 
   &__header
 
@@ -38,6 +44,8 @@
38 44 
     &__content
39 45 
       margin 0
40 46
47 
+.nopadding
48 
+  padding 0
41 49
42 50 
 .pageTitleGeneric
43 51 
   display flex
 
@@ -54,7 +62,6 @@
54 62 
 .pageContentGeneric
55 63 
   margin 10px 10px 120px 10px
56 64
57 
-
58 65 
 .dropdownCreateBtn
59 66 
   &__label
60 67 
     padding 10px 65px
 
@@ -73,7 +80,6 @@
73 80 
     .setting__link
74 81 
       padding 5px 65px 5px 10px
75 82
76 
-
77 83 
 .fa-file-image-o
78 84 
   color previewColor
79 85 
 
@@ -92,6 +98,33 @@
92 98 
 .fa-ticket
93 99 
   color issueColor
94 100
101 
+.subTitle
102 
+  font-size 20px
103 
+  font-weight 500
104 
+  color blue
105 
+
106 
+.GenericDelimiter
107 
+  border-radius 10px
108 
+  width 50%
109 
+  height 5px
110 
+  background-color blue
111 
+
112 
+.btnaction
113 
+  display flex
114 
+  flex-direction column
115 
+  justify-content center
116 
+  margin 20px 30px 20px 0
117 
+  border-radius 10px
118 
+  padding 15px
119 
+  width 250px
120 
+  height 200px
121 
+  box-shadow shadow-all
122 
+  text-align center
123 
+  cursor pointer
124 
+
125 
+/********************/
126 
+
127 
+/*** PAGE FILE, THREAD, HTML, MARKDOWN, ISSUE ***/
95 128
96 129 
 .wsFileGeneric
97 130 
   position fixed

+ 1 - 1
src/css/Header.styl 查看文件 

@@ -3,7 +3,7 @@
3 3 
   width 100%
4 4 
   box-shadow shadow-bottom
5 5 
   background mainColor
6 
-  z-index 3
6 
+  z-index 4
7 7 
   &__logo
8 8 
     &__img
9 9 
       margin-left 40px

+ 37 - 57
src/css/Sidebar.styl 查看文件 

@@ -25,6 +25,12 @@ sidebar-width = 300px
25 25 
   .sidebar-expandbar
26 26 
     left sidebar-width
27 27
28 
+leftside()
29 
+  flex-grow 0
30 
+  height 100%
31 
+  font-size 18px
32 
+  background-color rgba(253,253,253,0.3)
33 
+
28 34 
 .sidebar
29 35 
   &__btnnewworkspace
30 36 
     margin-top 40px
 
@@ -37,82 +43,56 @@ sidebar-width = 300px
37 43 
   &__navigation
38 44 
     padding 0
39 45 
     &__workspace
40 
-      flex-direction column
41 46 
       &__item
42 
-        position relative
43 
-        margin-top 2px
44 47 
         width sidebar-width
45 
-        background-color thirdColor
46 
-        cursor pointer
48 
+        &__wrapper
49 
+          display flex
50 
+          align-items center
51 
+          border-bottom 1px solid darkBlue
52 
+          width 100%
53 
+          height 100%
54 
+          background-color blue
55 
+          cursor pointer
47 56 
         &__number
48 
-          display inline-block
49 
-          padding 10px 0
50 
-          width 50px
51 
-          font-size 20px
57 
+          leftside()
58 
+          padding 12px
59 
+          min-width 50px
52 60 
           letter-spacing 2px
53 
-          text-align center
54 
-          background-color rgba(253,253,253,0.3)
55 61 
         &__name
56 
-          display inline-block
57 
-          vertical-align top
58 
-          padding 10px 5px
59 
-          width 220px
62 
+          flex-grow 2
63 
+          padding 10px
60 64 
           font-size 20px
61 
-          color white
65 
+          color off-white
62 66 
           white-space nowrap
63 67 
           overflow hidden
64 68 
           text-overflow ellipsis
65 69 
         &__icon
66 
-          display inline-block
70 
+          flex-grow 0
71 
+          padding 10px
67 72 
           color white
68 73 
         &__submenu
69 
-          margin-bottom 0
70 
-          padding-left 0
71 
-          height 0 // height is handled is js
72 
-          list-style none
74 
+          margin 0
75 
+          padding 0
76 
+          width 100%
73 77 
           background-color fourthColor
78 
+          height 0 // height is handled is js
74 79 
           overflow hidden
75 80 
           transition height 0.5s
76 81 
           &__dropdown
82 
+            display flex
83 
+            align-items center
77 84 
             border-top 1px solid darkBlue
85 
+            &:nth-last-child(1)
86 
+              border-bottom 1px solid darkBlue
78 87 
             &:hover
79 88 
               background-color lightBlue
80 89 
             &__showdropdown
81 
-              display inline-block
82 
-              padding 10px 15px
90 
+              display flex
91 
+              justify-content space-between
92 
+              align-items center
93 
+              padding 0 10px
94 
+              width 100%
83 95 
             .dropdown__icon
84 
-              display inline-block
85 96 
               padding 10px 15px
86 
-              width 50px
87 
-              text-align center
88 
-              background-color rgba(253,253,253,0.3)
89 
-              font-size 20px
90 
-            .dropdown__title
91 
-              position relative
92 
-              display inline-block
93 
-              font-size 18px
94 
-              font-weight 400
95 
-              color darkGrey
96 
-              cursor pointer
97 
-              &::after //bootstrap override
98 
-                position absolute
99 
-                top 10px
100 
-                left 100%
101 
-              &__text
102 
-                display inline-block
103 
-                width 200px
104 
-            .dropdown__subdropdown
105 
-              margin 0
106 
-              border-radius 0
107 
-              padding 0
108 
-              .alignname
109 
-                display inline-block
110 
-                font-size 18px
111 
-              &__item
112 
-                cursor pointer
113 
-                border-top 1px solid darkBlue
114 
-                padding 13px 0
115 
-                &__iconfile
116 
-                  padding-left 18px
117 
-                &__textfile
118 
-                  margin-left 38px
97 
+              min-width 50px
98 
+              leftside()

+ 3 - 1
src/css/Variable.styl 查看文件 

@@ -23,6 +23,8 @@ darkBlue = #215e8e
23 23 
 blue = #2571fe
24 24 
 lightBlue = #569EDE
25 25
26 
+red = #f63434
27 
+
26 28 
 // c2a btn color in general context ; meaning every context but specific one related to file type (file, pageHtml, issues, threads ...)
27 29 
 btnCallAction = #28a745
28 30 
 btnCallAction-hover = darken(btnCallAction, 15%)
 
@@ -50,7 +52,7 @@ responsable = #ED0007
50 52 
 /** Btn call to action dashboard **/
51 53 
 writefile = #a738ed
52 54 
 importfile = #ff8400
53 
-calendar = #f63434
55 
+calendar = red
54 56 
 explore = #87d04c
55 57
56 58

+ 8 - 2
src/css/btnSwtich.styl 查看文件 

@@ -1,3 +1,9 @@
1 
+.btnswitch
2 
+  display flex
3 
+  align-items center
4 
+  &__text
5 
+    margin-left 10px
6 
+
1 7 
 .switch
2 8 
   position relative
3 9 
   display inline-block
 
@@ -30,10 +36,10 @@
30 36 
   transition .4s
31 37
32 38 
 input:checked + .slider
33 
-  background-color #2196F3
39 
+  background-color blue
34 40
35 41 
 input:focus + .slider
36 
-  box-shadow 0 0 1px #2196F3
42 
+  box-shadow 0 0 1px blue
37 43
38 44 
 input:checked + .slider:before
39 45 
   -webkit-transform translateX(26px)

+ 3 - 0
src/css/index.styl 查看文件 

@@ -25,3 +25,6 @@ html, body, #content, #content > div
25 25 
 @import 'Dashboard'
26 26 
 @import 'AccountPage'
27 27 
 @import 'btnSwtich'
28 
+
29 
+@import 'UploadPopup'
30 
+@import 'ProgressBar'