Home Explore Help
Sign In
bux
/
tracim_v2
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

refacor for proper color management + moved tinymce init and custom event management in specific files

Skylsmoi 5 years ago
parent
cd23a38e4c
commit
edf29b5058
15 changed files with 207 additions and 479 deletions
Split View Show Diff Stats
  1. 72 0
      dist/appInterface.js
  2. 29 153
      dist/index.html
  3. 81 0
      dist/tinymceInit.js
  4. 1 1
      src/appFactory.js
  5. 2 0
      src/component/Footer.jsx
  6. 8 3
      src/component/Sidebar/WorkspaceListItem.jsx
  7. 1 1
      src/component/Workspace/OpenCreateContentApp.jsx
  8. 2 3
      src/container/Sidebar.jsx
  9. 0 4
      src/container/Tracim.jsx
  10. 2 2
      src/container/WorkspaceContent.jsx
  11. 0 276
      src/css/File.styl
  12. 1 0
      src/css/Footer.styl
  13. 6 32
      src/css/Sidebar.styl
  14. 0 2
      src/css/index.styl
  15. 2 2
      src/helper.js

+ 72 - 0
dist/appInterface.js View File 

@@ -0,0 +1,72 @@
1 
+(function () {
2 
+  let prevSelectedApp = {name: ''}
3 
+
4 
+  getSelectedApp = name => {
5 
+    switch (name) {
6 
+      case 'html-documents':
7 
+        return appHtmlDocument
8 
+      case 'thread':
9 
+        return appThread
10 
+      case 'file':
11 
+        return appFile
12 
+      default:
13 
+        return null
14 
+    }
15 
+  }
16 
+
17 
+  //@TODO make a file action.tracimCustomEvent.js that will contains all customEvent that tracim_frontend call
18 
+
19 
+  GLOBAL_renderApp = app => { //@TODO renderAppFull
20 
+    console.log('%cGLOBAL_renderApp', 'color: #5cebeb', app)
21 
+
22 
+    const selectedApp = getSelectedApp(app.config.slug)
23 
+
24 
+    if (selectedApp.isRendered) {
25 
+      GLOBAL_dispatchEvent({type: `${app.config.slug}_showApp`, data: app}) // handled by html-documents:src/container/HtmlDocument.jsx
26 
+    } else {
27 
+      selectedApp.renderApp(app)
28 
+      selectedApp.isRendered = true
29 
+      prevSelectedApp.isRendered = false
30 
+      prevSelectedApp = selectedApp
31 
+    }
32 
+  }
33 
+
34 
+  GLOBAL_renderCreateContentApp = app => { //@TODO renderAppPopupCreation
35 
+    console.log('%cGLOBAL_renderCreateContentApp', 'color: #5cebeb', app)
36 
+
37 
+    const selectedApp = getSelectedApp(app.config.slug)
38 
+
39 
+    if (!selectedApp) {
40 
+      console.log('Error in GLOBAL_renderCreateContentApp, selectedApp is undefined', app)
41 
+      return
42 
+    }
43 
+
44 
+    getSelectedApp(app.config.slug).renderPopupCreation(app)
45 
+  }
46 
+
47 
+  GLOBAL_dispatchEvent = ({type, data}) => {
48 
+    console.log('%cGLOBAL_dispatchEvent', 'color: #fff', type, data)
49 
+
50 
+    const event = new CustomEvent('appCustomEvent', {detail: {type, data}})
51 
+    document.dispatchEvent(event)
52 
+  }
53 
+
54 
+  GLOBAL_eventReducer = ({detail: {type, data}}) => {
55 
+    switch (type) {
56 
+      case 'hide_popupCreateContent':
57 
+        console.log('%cGLOBAL_eventReducer Custom Event', 'color: #28a745', type, data)
58 
+        getSelectedApp(data.name).unmountApp('popupCreateContentContainer')
59 
+        break
60 
+      case 'unmount_app':
61 
+        console.log('%cGLOBAL_eventReducer Custom Event', 'color: #28a745', type, data)
62 
+        if (prevSelectedApp.name === '') return
63 
+
64 
+        prevSelectedApp.unmountApp('appContainer')
65 
+        prevSelectedApp.unmountApp('popupCreateContentContainer')
66 
+        prevSelectedApp.isRendered = false
67 
+        break
68 
+    }
69 
+  }
70 
+
71 
+  document.addEventListener('appCustomEvent', GLOBAL_eventReducer)
72 
+})()

+ 29 - 153
dist/index.html View File 

@@ -13,6 +13,33 @@
13 13 
     -->
14 14 
     <link rel="stylesheet" type="text/css" href="/asset/hamburger/hamburgers.min.css">
15 15 
     <link rel="stylesheet" type="text/css" href="/dev/bootstrap-4.0.0-beta.css">
16 
+
17 
+    <style>
18 
+      /* code bellow will be generated by backend */
19 
+      .primaryColorFont { color: #7d4e24; }
20 
+      .primaryColorFontDarken { color: #572800; }
21 
+      .primaryColorFontLighten { color: #a3744a; }
22 
+
23 
+      .primaryColorFontHover:hover { color: #7d4e24; }
24 
+      .primaryColorFontDarkenHover:hover { color: #572800; }
25 
+      .primaryColorFontLightenHover:hover { color: #a3744a; }
26 
+
27 
+      .primaryColorBg { background-color: #7d4e24; }
28 
+      .primaryColorBgDarken { background-color: #572800; }
29 
+      .primaryColorBgLighten { background-color: #a3744a; }
30 
+
31 
+      .primaryColorBgHover:hover { background-color: #7d4e24; }
32 
+      .primaryColorBgDarkenHover:hover { background-color: #572800; }
33 
+      .primaryColorBgLightenHover:hover { background-color: #a3744a; }
34 
+
35 
+      .primaryColorBorder { border-color: #7d4e24; }
36 
+      .primaryColorBorderDarken { border-color: #572800; }
37 
+      .primaryColorBorderLighten { border-color: #a3744a; }
38 
+
39 
+      .primaryColorBorderHover:hover { border-color: #7d4e24; }
40 
+      .primaryColorBorderDarkenHover:hover { border-color: #572800; }
41 
+      .primaryColorBorderLightenHover:hover { border-color: #a3744a; }
42 
+    </style>
16 43 
   </head>
17 44 
   <body>
18 45 
     <div id='content'></div>
 
@@ -31,158 +58,7 @@
31 58 
     <script type="text/javascript" src="/asset/tinymce/js/tinymce/jquery.tinymce.min.js"></script>
32 59 
     <script type="text/javascript" src="/asset/tinymce/js/tinymce/tinymce.min.js"></script>
33 60
34 
-    <script type='text/javascript'>
35 
-      let prevSelectedApp = {name: ''} // default value
36 
-
37 
-      getSelectedApp = name => {
38 
-        switch (name) {
39 
-          case 'html-documents':
40 
-            return appHtmlDocument
41 
-          case 'thread':
42 
-            return appThread
43 
-          case 'file':
44 
-            return appFile
45 
-          default:
46 
-            return null
47 
-        }
48 
-      }
49 
-
50 
-      GLOBAL_renderApp = app => {
51 
-        console.log('%cGLOBAL_renderApp', 'color: #5cebeb', app)
52 
-
53 
-        const selectedApp = getSelectedApp(app.config.slug)
54 
-
55 
-        if (selectedApp.isRendered) {
56 
-          GLOBAL_dispatchEvent({type: `${app.config.slug}_showApp`, data: app}) // handled by html-documents:src/container/HtmlDocument.jsx
57 
-        } else {
58 
-          selectedApp.renderApp(app)
59 
-          selectedApp.isRendered = true
60 
-          prevSelectedApp.isRendered = false
61 
-          prevSelectedApp = selectedApp
62 
-        }
63 
-      }
64 
-
65 
-      GLOBAL_renderCreateContentApp = app => {
66 
-        console.log('%cGLOBAL_renderCreateContentApp', 'color: #5cebeb', app)
67 
-
68 
-        const selectedApp = getSelectedApp(app.config.slug)
69 
-
70 
-        if (!selectedApp) {
71 
-          console.log('Error in GLOBAL_renderCreateContentApp, selectedApp is undefined', app)
72 
-          return
73 
-        }
74 
-
75 
-        getSelectedApp(app.config.slug).renderPopupCreation(app)
76 
-      }
77 
-
78 
-      GLOBAL_dispatchEvent = ({ type, data }) => {
79 
-        console.log('%cGLOBAL_dispatchEvent', 'color: #fff', type, data)
80 
-
81 
-        const event = new CustomEvent('appCustomEvent', { detail: { type, data } })
82 
-        document.dispatchEvent(event)
83 
-      }
84 
-
85 
-      GLOBAL_eventReducer = ({ detail: { type, data } }) => {
86 
-        switch (type) {
87 
-          case 'hide_popupCreateContent':
88 
-            console.log('%cGLOBAL_eventReducer Custom Event', 'color: #28a745', type, data)
89 
-            getSelectedApp(data.name).unmountApp('popupCreateContentContainer')
90 
-            break
91 
-          case 'unmount_app':
92 
-            console.log('%cGLOBAL_eventReducer Custom Event', 'color: #28a745', type, data)
93 
-            if (prevSelectedApp.name === '') return
94 
-
95 
-            prevSelectedApp.unmountApp('appContainer')
96 
-            prevSelectedApp.unmountApp('popupCreateContentContainer')
97 
-            prevSelectedApp.isRendered = false
98 
-            break
99 
-        }
100 
-      }
101 
-      document.addEventListener('appCustomEvent', GLOBAL_eventReducer)
102 
-    </script>
103 
-
104 
-    <script type='text/javascript'>
105 
-      (function () {
106 
-        wysiwyg = function (selector, handleOnChange) {
107 
-          function base64EncodeAndTinyMceInsert (files) {
108 
-            for (var i = 0; i < files.length; i++) {
109 
-              if (files[i].size > 1000000)
110 
-                files[i].allowed = confirm(files[i].name + " fait plus de 1mo et peut prendre du temps à insérer, voulez-vous continuer ?")
111 
-            }
112 
-
113 
-            for (var i = 0; i < files.length; i++) {
114 
-              if (files[i].allowed !== false && files[i].type.match('image.*')) {
115 
-                var img = document.createElement('img')
116 
-
117 
-                var fr = new FileReader()
118 
-
119 
-                fr.readAsDataURL(files[i])
120 
-
121 
-                fr.onloadend = function (e) {
122 
-                  img.src = e.target.result
123 
-                  tinymce.activeEditor.execCommand('mceInsertContent', false, img.outerHTML)
124 
-                }
125 
-              }
126 
-            }
127 
-          }
128 
-
129 
-          // HACK: The tiny mce source code modal contain a textarea, but we
130 
-          // can't edit it (like it's readonly). The following solution
131 
-          // solve the bug: https://stackoverflow.com/questions/36952148/tinymce-code-editor-is-readonly-in-jtable-grid
132 
-          $(document).on('focusin', function(e) {
133 
-            if ($(e.target).closest(".mce-window").length) {
134 
-              e.stopImmediatePropagation();
135 
-            }
136 
-          });
137 
-
138 
-          tinymce.init({
139 
-            selector: selector,
140 
-            menubar: false,
141 
-            resize: false,
142 
-            skin: "lightgray",
143 
-            plugins:'advlist autolink lists link image charmap print preview anchor textcolor searchreplace visualblocks code fullscreen insertdatetime media table contextmenu paste code help',
144 
-            toolbar: 'insert | formatselect | bold italic underline strikethrough forecolor backcolor | link | alignleft aligncenter alignright alignjustify  | numlist bullist outdent indent  | table | code ',
145 
-            content_style: "div {height: 100%;}",
146 
-            setup: function ($editor) {
147 
-              $editor.on('change', function(e) {
148 
-                handleOnChange({target: {value: $editor.getContent()}}) // target.value to emulate a js event so the react handler can expect one
149 
-              })
150 
-
151 
-              //////////////////////////////////////////////
152 
-              // add custom btn to handle image by selecting them with system explorer
153 
-              $editor.addButton('customInsertImage', {
154 
-                icon: 'mce-ico mce-i-image',
155 
-                title: 'Image',
156 
-                onclick: function () {
157 
-                  if ($('#hidden_tinymce_fileinput').length > 0) $('#hidden_tinymce_fileinput').remove()
158 
-
159 
-                  fileTag = document.createElement('input')
160 
-                  fileTag.id = 'hidden_tinymce_fileinput'
161 
-                  fileTag.type = 'file'
162 
-                  $('body').append(fileTag)
163 
-
164 
-                  $('#hidden_tinymce_fileinput').on('change', function () {
165 
-                    base64EncodeAndTinyMceInsert($(this)[0].files)
166 
-                  })
167 
-
168 
-                  $('#hidden_tinymce_fileinput').click()
169 
-                }
170 
-              })
171 
-
172 
-              //////////////////////////////////////////////
173 
-              // Handle drag & drop image into TinyMce by encoding them in base64 (to avoid uploading them somewhere and keep saving comment in string format)
174 
-              $editor
175 
-                .on('drag dragstart dragend dragover dragenter dragleave drop', function (e) {
176 
-                  e.preventDefault()
177 
-                  e.stopPropagation()
178 
-                })
179 
-                .on('drop', function(e) {
180 
-                  base64EncodeAndTinyMceInsert(e.dataTransfer.files)
181 
-                })
182 
-            }
183 
-          })
184 
-        }
185 
-      })()
186 
-    </script>
61 
+    <script type='text/javascript' src='/appInterface.js'></script>
62 
+    <script type='text/javascript' src='/tinymceInit.js'></script>
187 63 
   </body>
188 64 
 </html>

+ 81 - 0
dist/tinymceInit.js View File 

@@ -0,0 +1,81 @@
1 
+(function () {
2 
+  wysiwyg = function (selector, handleOnChange) {
3 
+    function base64EncodeAndTinyMceInsert (files) { // @todo move this function out of wysiwyg = { ... }
4 
+      for (var i = 0; i < files.length; i++) {
5 
+        if (files[i].size > 1000000)
6 
+          files[i].allowed = confirm(files[i].name + " fait plus de 1mo et peut prendre du temps à insérer, voulez-vous continuer ?")
7 
+      }
8 
+
9 
+      for (var i = 0; i < files.length; i++) {
10 
+        if (files[i].allowed !== false && files[i].type.match('image.*')) {
11 
+          var img = document.createElement('img')
12 
+
13 
+          var fr = new FileReader()
14 
+
15 
+          fr.readAsDataURL(files[i])
16 
+
17 
+          fr.onloadend = function (e) {
18 
+            img.src = e.target.result
19 
+            tinymce.activeEditor.execCommand('mceInsertContent', false, img.outerHTML)
20 
+          }
21 
+        }
22 
+      }
23 
+    }
24 
+
25 
+    // HACK: The tiny mce source code modal contain a textarea, but we
26 
+    // can't edit it (like it's readonly). The following solution
27 
+    // solve the bug: https://stackoverflow.com/questions/36952148/tinymce-code-editor-is-readonly-in-jtable-grid
28 
+    $(document).on('focusin', function(e) {
29 
+      if ($(e.target).closest(".mce-window").length) {
30 
+        e.stopImmediatePropagation();
31 
+      }
32 
+    });
33 
+
34 
+    tinymce.init({
35 
+      selector: selector,
36 
+      menubar: false,
37 
+      resize: false,
38 
+      skin: "lightgray",
39 
+      plugins:'advlist autolink lists link image charmap print preview anchor textcolor searchreplace visualblocks code fullscreen insertdatetime media table contextmenu paste code help',
40 
+      toolbar: 'insert | formatselect | bold italic underline strikethrough forecolor backcolor | link | alignleft aligncenter alignright alignjustify  | numlist bullist outdent indent  | table | code ',
41 
+      content_style: "div {height: 100%;}",
42 
+      setup: function ($editor) {
43 
+        $editor.on('change', function(e) {
44 
+          handleOnChange({target: {value: $editor.getContent()}}) // target.value to emulate a js event so the react handler can expect one
45 
+        })
46 
+
47 
+        //////////////////////////////////////////////
48 
+        // add custom btn to handle image by selecting them with system explorer
49 
+        $editor.addButton('customInsertImage', {
50 
+          icon: 'mce-ico mce-i-image',
51 
+          title: 'Image',
52 
+          onclick: function () {
53 
+            if ($('#hidden_tinymce_fileinput').length > 0) $('#hidden_tinymce_fileinput').remove()
54 
+
55 
+            fileTag = document.createElement('input')
56 
+            fileTag.id = 'hidden_tinymce_fileinput'
57 
+            fileTag.type = 'file'
58 
+            $('body').append(fileTag)
59 
+
60 
+            $('#hidden_tinymce_fileinput').on('change', function () {
61 
+              base64EncodeAndTinyMceInsert($(this)[0].files)
62 
+            })
63 
+
64 
+            $('#hidden_tinymce_fileinput').click()
65 
+          }
66 
+        })
67 
+
68 
+        //////////////////////////////////////////////
69 
+        // Handle drag & drop image into TinyMce by encoding them in base64 (to avoid uploading them somewhere and keep saving comment in string format)
70 
+        $editor
71 
+          .on('drag dragstart dragend dragover dragenter dragleave drop', function (e) {
72 
+            e.preventDefault()
73 
+            e.stopPropagation()
74 
+          })
75 
+          .on('drop', function(e) {
76 
+            base64EncodeAndTinyMceInsert(e.dataTransfer.files)
77 
+          })
78 
+      }
79 
+    })
80 
+  }
81 
+})()

+ 1 - 1
src/appFactory.js View File 

@@ -22,7 +22,7 @@ export function appFactory (WrappedComponent) {
22 22 
         domContainer: 'popupCreateContentContainer',
23 23 
         apiUrl: FETCH_CONFIG.apiUrl,
24 24 
         mockApiUrl: FETCH_CONFIG.mockApiUrl,
25 
-        apiHeader: FETCH_CONFIG.headers
25 
+        apiHeader: FETCH_CONFIG.headers // should this be used by app ? right now, apps have their own headers
26 26 
       },
27 27 
       idWorkspace,
28 28 
       idFolder

+ 2 - 0
src/component/Footer.jsx View File 

@@ -2,6 +2,7 @@ import React from 'react'
2 2 
 import { translate } from 'react-i18next'
3 3 
 import logoFooter from '../img/logoFooter.svg'
4 4
5 
+// @fixme: Côme - 2018/07/16 - component deprecated since footer is now inside sidebarleft
5 6 
 const Footer = ({ t }) => {
6 7 
   return (
7 8 
     <footer className='footer text-right'>
 
@@ -12,4 +13,5 @@ const Footer = ({ t }) => {
12 13 
     </footer>
13 14 
   )
14 15 
 }
16 
+
15 17 
 export default translate()(Footer)

+ 8 - 3
src/component/Sidebar/WorkspaceListItem.jsx View File 

@@ -8,7 +8,10 @@ import { Link } from 'react-router-dom'
8 8 
 const WorkspaceListItem = props => {
9 9 
   return (
10 10 
     <li className='sidebar__navigation__workspace__item'>
11 
-      <div className='sidebar__navigation__workspace__item__wrapper' onClick={props.onClickTitle}>
11 
+      <div
12 
+        className='sidebar__navigation__workspace__item__wrapper primaryColorBg primaryColorBgDarkenHover primaryColorBorder'
13 
+        onClick={props.onClickTitle}
14 
+      >
12 15 
         <div className='sidebar__navigation__workspace__item__number'>
13 16 
           {props.label.substring(0, 2).toUpperCase()}
14 17 
         </div>
 
@@ -33,13 +36,15 @@ const WorkspaceListItem = props => {
33 36 
               key={aa.slug}
34 37 
             >
35 38 
               <Link to={aa.route}>
36 
-                <div className={classnames('sidebar__navigation__workspace__item__submenu__dropdown', {'activeFilter': props.activeFilterList.includes(aa.slug)})}>
39 
+                <div className={classnames(
40 
+                  'sidebar__navigation__workspace__item__submenu__dropdown primaryColorBgLighten primaryColorBgHover primaryColorBorderDarken',
41 
+                  {'activeFilter': props.activeFilterList.includes(aa.slug)}
42 
+                )}>
37 43 
                   <div className='dropdown__icon'>
38 44 
                     <i className={classnames(`fa fa-${aa.faIcon}`)} style={{backgroudColor: aa.hexcolor}} />
39 45 
                   </div>
40 46
41 47 
                   <div className='sidebar__navigation__workspace__item__submenu__dropdown__showdropdown'>
42 
-
43 48 
                     <div className='dropdown__title' id='navbarDropdown'>
44 49 
                       <div className='dropdown__title__text'>
45 50 
                         {aa.label/* [props.lang.id] */}

+ 1 - 1
src/component/Workspace/OpenCreateContentApp.jsx View File 

@@ -7,7 +7,7 @@ const qs = require('query-string')
7 7
8 8 
 export class OpenCreateContentApp extends React.Component {
9 9 
   openCreateContentApp = () => {
10 
-    const { idWorkspace, appOpenedType, user, contentType, renderCreateContentApp, match, location } = this.props
10 
+    const { idWorkspace, user, contentType, renderCreateContentApp, match, location } = this.props
11 11
12 12 
     if (isNaN(idWorkspace) || idWorkspace === -1) return
13 13

+ 2 - 3
src/container/Sidebar.jsx View File 

@@ -43,7 +43,6 @@ class Sidebar extends React.Component {
43 43
44 44 
     const newFilter = workspace.filter.includes(filter) ? [] : [filter] // use an array to allow multiple filters (NYI)
45 45
46 
-    console.log('wtf')
47 46 
     history.push(`${PAGE.WORKSPACE.CONTENT_LIST(idWs)}?type=${newFilter.join(';')}`) // workspace.filter gets updated on react redraw from match.params
48 47
49 48 
     // obviously, it's ugly to use custom event to tell WorkspaceContent to refresh, but since WorkspaceContent
 
@@ -58,9 +57,9 @@ class Sidebar extends React.Component {
58 57 
     const { activeLang, workspaceList, t } = this.props
59 58
60 59 
     return (
61 
-      <div className={classnames('sidebar', {'sidebarclose': sidebarClose})}>
60 
+      <div className={classnames('sidebar primaryColorBgDarken', {'sidebarclose': sidebarClose})}>
62 61 
         <div className='sidebarSticky'>
63 
-          <div className='sidebar__expand' onClick={this.handleClickToggleSidebar}>
62 
+          <div className='sidebar__expand primaryColorBg.darken' onClick={this.handleClickToggleSidebar}>
64 63 
             <i className={classnames('fa fa-chevron-left', {'fa-chevron-right': sidebarClose, 'fa-chevron-left': !sidebarClose})} />
65 64 
           </div>
66 65

+ 0 - 4
src/container/Tracim.jsx View File 

@@ -1,7 +1,6 @@
1 1 
 import React from 'react'
2 2 
 import { connect } from 'react-redux'
3 3 
 import { translate } from 'react-i18next'
4 
-import Footer from '../component/Footer.jsx'
5 4 
 import Header from './Header.jsx'
6 5 
 import Login from './Login.jsx'
7 6 
 import Dashboard from './Dashboard.jsx'
 
@@ -71,9 +70,6 @@ class Tracim extends React.Component {
71 70
72 71 
           <PrivateRoute path={PAGE.ACCOUNT} component={Account} />
73 72 
           <PrivateRoute path={'/wip/:cp'} component={WIPcomponent} /> {/* for testing purpose only */}
74 
-
75 
-          {/* <Footer /> */}
76 
-
77 73 
         </div>
78 74
79 75 
       </div>

+ 2 - 2
src/container/WorkspaceContent.jsx View File 

@@ -40,7 +40,7 @@ class WorkspaceContent extends React.Component {
40 40 
         type: undefined,
41 41 
         folder: undefined
42 42 
       },
43 
-      workspaceIdInUrl: props.match.params.idws ? parseInt(props.match.params.idws) : null, // this is used to avoid handling the parseInt everytime
43 
+      workspaceIdInUrl: props.match.params.idws ? parseInt(props.match.params.idws) : null, // this is used to avoid handling the parseInt every time
44 44 
       appOpenedType: false
45 45 
     }
46 46 
 
@@ -74,7 +74,7 @@ class WorkspaceContent extends React.Component {
74 74
75 75 
     console.log('%c<WorkspaceContent> componentDidMount', 'color: #c17838')
76 76
77 
-    if (app.length === 0) {
77 
+    if (app.length === 0) { // @fixme shouldn't this be done by <Sidebar> ?
78 78 
       const fetchGetAppList = await dispatch(getAppList(user))
79 79 
       if (fetchGetAppList.status === 200) dispatch(setAppList(fetchGetAppList.json))
80 80 
     }

+ 0 - 276
src/css/File.styl View File 

@@ -1,276 +0,0 @@
1 
-// @Côme - this file is deprecated as its associated jsx file is deprecated
2 
-.wsFileFile
3 
-  width 1200px
4 
-  height calc(100% - 85px)
5 
-  &__header
6 
-    background-color fileColor
7 
-    &__editionmode
8 
-      display none
9 
-    .fa-file-image-o
10 
-      color white
11 
-  &__option
12 
-    &__menu
13 
-      display flex
14 
-      &__addversion
15 
-        padding 8px 15px
16 
-        border 1px solid fileColor
17 
-        border-radius 5px
18 
-        background-color transparent
19 
-        color fileColor
20 
-        cursor pointer
21 
-        & > i
22 
-          margin-left 10px
23 
-        &:hover
24 
-          background-color fileColor
25 
-          border none
26 
-          color white
27 
-  &__contentpage
28 
-    display flex
29 
-    height 100%
30 
-    &__preview
31 
-      position relative
32 
-      margin 10px
33 
-      border-radius 10px
34 
-      width 60%
35 
-      height calc(100% - 150px) // margin + height of header and option
36 
-      background-color off-white
37 
-      &__sidebar
38 
-        display flex
39 
-        position absolute
40 
-        top 0
41 
-        right 0
42 
-        height 100%
43 
-        &__button
44 
-          display flex
45 
-          flex-direction column
46 
-          align-items center
47 
-          width 50px
48 
-          height 100%
49 
-          background-color grey
50 
-          cursor pointer
51 
-          &:hover
52 
-            background-color fileColor
53 
-          &__icon
54 
-            justify-content flex-start
55 
-            font-size 30px
56 
-            color white
57 
-          &__title
58 
-            margin-top 45px
59 
-            color white
60 
-            transform rotate(-90deg)
61 
-        &__property
62 
-          width 0
63 
-          overflow-X hidden
64 
-          background-color off-white
65 
-          transition width 0.5s
66 
-          &__detail
67 
-            padding 20px
68 
-            width 410px
69 
-            &__size
70 
-              margin-bottom 20px
71 
-            &__description
72 
-              &__editiondesc
73 
-                display none
74 
-                margin 20px 0
75 
-                textarea
76 
-                  width 100%
77 
-                  height 250px
78 
-                &__validate
79 
-                  margin 30px auto
80 
-                  width 150px
81 
-            &__btndesc
82 
-              display block
83 
-              margin 15px 0
84 
-              width 200px
85 
-      &__dloption
86 
-        display flex
87 
-        justify-content center
88 
-        padding-top 10px
89 
-        &__icon
90 
-          margin-right 20px
91 
-          font-size 20px
92 
-          cursor pointer
93 
-          &:hover , &:focus
94 
-            color fileColor
95 
-      &__slider
96 
-        display flex
97 
-        align-items center
98 
-        width calc(100% - 50px) // 50px => width of sidebar
99 
-        height calc(100% - 40px) // 40px => height of dloption
100 
-        &__fileimg
101 
-          display flex
102 
-          flex-direction column
103 
-          justify-content center
104 
-          padding 30px
105 
-          width 100%
106 
-          height 100%
107 
-          & > img
108 
-            max-height 100%
109 
-            max-width 100%
110 
-        &__icon
111 
-          margin 0 5px
112 
-          font-size 20px
113 
-          cursor pointer
114 
-    &__wrapper
115 
-      width 40%
116 
-      height calc(100% - 150px) // margin + height of header and option
117 
-      overflow-Y auto
118 
-      .timeline
119 
-        &__messagelist
120 
-          min-height 300px
121 
-          &__version
122 
-            &__btn
123 
-              background-color fileColor
124 
-              &:hover , &:focus
125 
-                background-color lightFileColor
126 
-        &__texteditor
127 
-          &__simpletext
128 
-            &__input
129 
-              &:focus
130 
-                color fileColor
131 
-                border-color fileColor
132 
-          &__submit
133 
-            &__btn
134 
-              border-color fileColor
135 
-              background-color fileColor
136 
-              color white
137 
-              &:hover , &:focus
138 
-                border-color fileColor
139 
-                background-color fileColor
140 
-
141 
-/***** SENDER RECEIVER *****/
142 
-
143 
-.received
144 
-  .wsFileFile__contentpage__messagelist__item__content
145 
-      background-color fileColor
146 
-
147 
-/***** ACTIVE SIDEBAR *****/
148 
-
149 
-.activesidebar
150 
-  .wsFileFile__contentpage__preview
151 
-    &__sidebar
152 
-      border-radius 0 10px 10px 0
153 
-      &__button
154 
-        background-color fileColor
155 
-      &__property
156 
-        width 450px
157 
-        overflow-Y auto
158 
-        color fileColor
159 
-
160 
-.activeEditionTitle
161 
-  .wsFileFile__header
162 
-    &__editionmode
163 
-      display block
164 
-    &__title
165 
-      display none
166 
-
167 
-.activeEditionDesc
168 
-  .wsFileFile__contentpage__preview__sidebar__property__detail
169 
-    &__description
170 
-      &__editiondesc
171 
-        display block
172 
-    &__btndesc
173 
-      display none
174 
-
175 
-/****** MEDIA QUERIES ********/
176 
-
177 
-// Regroup the common css rules mediaqueries into a single media to lighten the code
178 
-
179 
-@media (min-width: max-xs) and (max-width: max-lg)
180 
-
181 
-  .wsFileFile
182 
-    overflow-Y auto
183 
-    &__contentpage
184 
-      display block
185 
-      &__preview
186 
-        display flex
187 
-        flex-direction column
188 
-        width calc(100% - 30px) // 30px => margin
189 
-      &__wrapper
190 
-        width calc(100% - 30px) // 30px => margin
191 
-        .timeline
192 
-          &__texteditor
193 
-            &__simpletext
194 
-              display inline-flex
195 
-              width 60%
196 
-            &__submit
197 
-              display inline-flex
198 
-              margin 10px 0
199 
-              &__btn
200 
-                display flex
201 
-                margin-left 35px
202 
-                &__icon
203 
-                  margin-left 15px
204 
-
205 
-// /**** MEDIA 992px & 1199px ****/
206 
-
207 
-// @media (min-width: min-lg) and (max-width: max-lg)
208 
-
209 
-//   .wsFileFile
210 
-//     width 900px
211 
-//     overflow-Y auto
212 
-
213 
-// /******************************/
214 
-
215 
-// /**** MEDIA 768px & 991px ****/
216 
-
217 
-// @media (min-width: min-md) and (max-width: max-md)
218 
-
219 
-//   .wsFileFile
220 
-//     width 100%
221 
-
222 
-// /******************************/
223 
-
224 
-// /**** MEDIA 576px & 767px ****/
225 
-
226 
-// @media (min-width: min-sm) and (max-width: max-sm)
227 
-
228 
-//   .wsFileFile
229 
-//     top 69px
230 
-//     width 100%
231 
-//     height calc(100% - 69px) // 69px => top rules
232 
-//     overflow-Y scroll
233 
-
234 
-// /******************************/
235 
-
236 
-// /**** MEDIA 575px ****/
237 
-
238 
-// @media (max-width: max-xs)
239 
-
240 
-//   .activesidebar
241 
-//     .wsFileFile__contentpage__preview
242 
-//       &__sidebar
243 
-//         &__property
244 
-//           width 300px
245 
-
246 
-//   .wsFileFile
247 
-//     top 69px
248 
-//     width 100%
249 
-//     height calc(100% - 69px) // 69px => top rules
250 
-//     overflow-Y scroll
251 
-//     &__option__menu__addversion
252 
-//         padding 8px 5px
253 
-//         & > i
254 
-//           display none
255 
-//     &__contentpage
256 
-//       display block
257 
-//       &__preview
258 
-//         display flex
259 
-//         flex-direction column
260 
-//         width calc(100% - 30px) // 30px => margin
261 
-//       &__wrapper
262 
-//         width calc(100% - 30px) // 30px => margin
263 
-//         .timeline
264 
-//           &__texteditor
265 
-//             &__simpletext
266 
-//               display inline-flex
267 
-//               width 60%
268 
-//               margin-right 0
269 
-//             &__submit
270 
-//               display inline-flex
271 
-//               margin 10px 0
272 
-//               &__btn
273 
-//                 display flex
274 
-//                 margin-left 10px
275 
-//                 &__icon
276 
-//                   margin-left 15px

+ 1 - 0
src/css/Footer.styl View File 

@@ -1,3 +1,4 @@
1 
+// file deprecated since footer is now in sidebar
1 2 
 .footer
2 3 
   border-top 1px solid grey
3 4 
   width 100%

+ 6 - 32
src/css/Sidebar.styl View File 

@@ -1,26 +1,3 @@
1 
-.sidebar-expandbar
2 
-  position absolute
3 
-  left 0
4 
-  display none
5 
-  border 1px solid thirdColor
6 
-  border-top-width 2px
7 
-  padding 11px 15px
8 
-  background-color blue
9 
-  z-index 5
10 
-  &__icon
11 
-    font-size 18px
12 
-    text-align center
13 
-    cursor pointer
14 
-    &:hover
15 
-      color white
16 
-
17 
-.sidebar
18 
-  min-height 100%
19 
-  background-color secondColor
20 
-  background-image url('../img/applat.png')
21 
-  background-repeat repeat
22 
-  z-index 1
23 
-
24 1 
 sidebar-width = 280px
25 2 
 sidebar-animate-speed = 0.5s
26 3 
 
@@ -41,6 +18,9 @@ leftside()
41 18 
   position relative
42 19 
   transition all sidebar-animate-speed
43 20 
   width sidebar-width
21 
+  min-height 100%
22 
+  background-image url('../img/applat.png')
23 
+  background-repeat repeat
44 24 
   z-index 5
45 25 
   &.sidebarclose
46 26 
     width 0
 
@@ -55,7 +35,6 @@ leftside()
55 35 
     border-bottom-right-radius 15px
56 36 
     padding 8px 15px
57 37 
     cursor pointer
58 
-    background-color thirdColor
59 38 
     color white
60 39 
     transition all sidebar-animate-speed
61 40 
   &__btnnewworkspace
 
@@ -80,13 +59,10 @@ leftside()
80 59 
         &__wrapper
81 60 
           display flex
82 61 
           align-items center
83 
-          border-bottom 1px solid secondColor
62 
+          border-bottom 1px solid
84 63 
           width 100%
85 64 
           height 100%
86 
-          background-color thirdColor
87 65 
           cursor pointer
88 
-          &:hover
89 
-            background-color fifthColor
90 66 
         &__number
91 67 
           display flex
92 68 
           leftside()
 
@@ -107,17 +83,14 @@ leftside()
107 83 
           margin 0
108 84 
           padding 0
109 85 
           width 100%
110 
-          background-color fourthColor
111 86 
           overflow hidden
112 87 
           & > li
113 88 
             display block
114 89 
           &__dropdown
115 90 
             display flex
116 91 
             align-items center
117 
-            border-bottom 1px solid secondColor
92 
+            border-bottom 1px solid
118 93 
             cursor pointer
119 
-            &:hover
120 
-              background-color thirdColor
121 94 
             &__showdropdown
122 95 
               display flex
123 96 
               justify-content space-between
 
@@ -132,6 +105,7 @@ leftside()
132 105 
               white-space nowrap
133 106 
               overflow hidden
134 107 
               text-overflow ellipsis
108 
+              // color off-white
135 109 
             &.activeFilter
136 110 
               .dropdown__icon
137 111 
                 background-color rgba(253, 253, 253, 0.8)

+ 0 - 2
src/css/index.styl View File 

@@ -18,8 +18,6 @@ html, body, #content
18 18 
 @import 'ContentItemHeader.styl'
19 19 
 @import 'Folder.styl'
20 20
21 
-@import 'File.styl'
22 
-
23 21 
 @import 'Dashboard.styl'
24 22 
 @import 'AccountPage.styl'
25 23

+ 2 - 2
src/helper.js View File 

@@ -4,7 +4,7 @@ export const FETCH_CONFIG = {
4 4 
     'Content-Type': 'application/json'
5 5 
   },
6 6 
   apiUrl: 'http://localhost:6543/api/v2',
7 
-  mockApiUrl: 'http://localhost:3001'
7 
+  mockApiUrl: 'http://localhost:3001' // @todo: better to use one url only and use proxy on mock api to point to real api (if implemented)
8 8 
 }
9 9
10 10 
 export const COOKIE = {
 
@@ -19,7 +19,7 @@ export const PAGE = {
19 19 
     NEW: (idws, type) => `/workspaces/${idws}/${type}/new`,
20 20 
     CALENDAR: (idws = ':idws') => `/workspaces/${idws}/calendar`,
21 21 
     CONTENT_LIST: (idws = ':idws') => `/workspaces/${idws}/contents`,
22 
-    CONTENT: (idws = ':idws', type = ':type?', idcts = ':idcts?') => `/workspaces/${idws}/${type}/${idcts}`,
22 
+    CONTENT: (idws = ':idws', type = ':type?', idcts = ':idcts?') => `/workspaces/${idws}/${type}/${idcts}`, // @TODO add /contents/ in url and remove <Switch> in <Tracim>
23 23 
     // CONTENT_NEW: (idws = ':idws', ctstype = ':ctstype') => `/workspaces/${idws}/contents/${ctstype}/new`,
24 24 
     // CONTENT_EDIT: (idws = ':idws', idcts = ':idcts') => `/workspaces/${idws}/contents/${idcts}/edit`,
25 25 
     // CONTENT_TITLE_EDIT: (idws = ':idws', idcts = ':idcts') => `/workspaces/${idws}/contents/${idcts}/title/edit`,