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

integration of thread

Skylsmoi 6 years ago
parent
2f44faf1e7
commit
3ed87a3cd2
7 changed files with 267 additions and 171 deletions
Split View Show Diff Stats
  1. 4 4
      .gitignore
  2. 13 7
      dist/index.html
  3. 1 1
      package.json
  4. 185 5
      src/component/Thread.jsx
  5. 11 11
      src/container/Thread.jsx
  6. 53 143
      src/css/index.styl
  7. BIN
      src/img/imgProfil.png

+ 4 - 4
.gitignore View File 

@@ -2,7 +2,7 @@
2 2 
 .idea/
3 3 
 .git/
4 4 
 node_modules/
5 
-dist/pageHtml.app.js
6 
-dist/pageHtml.app.js.map
7 
-dist/pageHtml.app.dev.js
8 
-dist/pageHtml.app.dev.js.map
5 
+dist/thread.app.js
6 
+dist/thread.app.js.map
7 
+dist/thread.app.dev.js
8 
+dist/thread.app.dev.js.map

+ 13 - 7
dist/index.html View File 

@@ -3,7 +3,7 @@
3 3 
 <head>
4 4 
   <meta charset='utf-8' />
5 5 
   <meta name="viewport" content="width=device-width, user-scalable=no" />
6 
-  <title>Tracim App PageHtml</title>
6 
+  <title>Thread App Tracim</title>
7 7 
   <link rel='shortcut icon' href='favicon.ico'>
8 8
9 9 
   <link rel="stylesheet" type="text/css" href="./font/font-awesome-4.7.0/css/font-awesome.css">
 
@@ -17,13 +17,15 @@
17 17
18 18 
   <div id='content'></div>
19 19
20 
-  <script src='./pageHtml.app.dev.js'></script>
20 
+  <script src='./thread.app.dev.js'></script>
21 21
22 22 
   <script type='text/javascript'>
23 23 
     GLOBAL_renderApp = appName => {
24 
-      if (appName === 'PageHtml') {
25 
-        appPageHtml.renderApp('appContainer')
26 
-        console.log('app pagehtml rendered')
24 
+      switch (appName) {
25 
+        case 'PageHtml':
26 
+          appPageHtml.renderApp('appContainer'); break
27 
+        case 'Thread':
28 
+          appThread.renderApp('appContainer'); break
27 29 
       }
28 30 
     }
29 31 
 
@@ -33,8 +35,12 @@
33 35 
     }
34 36
35 37 
     GLOBAL_unmountApp = () => {
36 
-      console.log('btn close clicked')
37 
-      appPageHtml.hideApp('appContainer')
38 
+      switch (appName) {
39 
+        case 'PageHtml':
40 
+          appPageHtml.hideApp('appContainer'); break
41 
+        case 'Thread':
42 
+          appThread.hideApp('appContainer'); break
43 
+      }
38 44 
     }
39 45
40 46 
     // only usefull if app doesn't handle fileContent himself

+ 1 - 1
package.json View File 

@@ -1,5 +1,5 @@
1 1 
 {
2 
-  "name": "tracim_plugin_pagehtml",
2 
+  "name": "tracim_app_thread",
3 3 
   "version": "1.1.2",
4 4 
   "description": "",
5 5 
   "main": "index.js",

+ 185 - 5
src/component/Thread.jsx View File 

@@ -1,13 +1,193 @@
1 1 
 import React from 'react'
2 
-import { TextAreaApp } from 'tracim_lib'
2 
+// import classnames from 'classnames'
3 
+import imgProfil from '../img/imgProfil.png'
3 4
4 5 
 const PageHtml = props => {
5 6 
   return (
6 
-    <div className='wsFilePageHtml__contentpage__textnote'>
7 
-      <div className='wsFilePageHtml__contentpage__textnote__latestversion' dangerouslySetInnerHTML={{__html: props.version}} />
8 
-      <div className='wsFilePageHtml__contentpage__textnote__text' dangerouslySetInnerHTML={{__html: props.text}} />
7 
+    <div className='wsFileThread wsFileGeneric'>
8 
+      <div className='wsFileThread__header wsFileGeneric__header'>
9 
+        <div className='wsFileGeneric__header__icon'>
10 
+          <i className='fa fa-comments' />
11 
+        </div>
9 12
10 
-      <TextAreaApp customClass={'wsFilePageHtml'} />
13 
+        <div className='wsFileGeneric__header__text mr-auto'>
14 
+          Discussions à propos du nouveau système de facturation
15 
+        </div>
16 
+
17 
+        <div className='wsFileGeneric__header__close'>
18 
+          <i className='fa fa-times' />
19 
+        </div>
20 
+      </div>
21 
+
22 
+      <div className='wsFileGeneric__option'>
23 
+        <div className='wsFileGeneric__option__menu'>
24 
+          <div className='wsFileGeneric__option__menu__action'>
25 
+            <i className='fa fa-pencil' />
26 
+          </div>
27 
+
28 
+          <div className='wsFileGeneric__option__menu__action'>
29 
+            <i className='fa fa-archive' />
30 
+          </div>
31 
+
32 
+          <div className='wsFileGeneric__option__menu__action'>
33 
+            <i className='fa fa-trash' />
34 
+          </div>
35 
+        </div>
36 
+      </div>
37 
+
38 
+      <div className='wsFileThread__wrapper wsFileGeneric__wrapper'>
39 
+        <ul className='wsFileThread__messagelist wsFileGeneric__messagelist'>
40 
+
41 
+          <li className='wsFileThread__messagelist__item wsFileGeneric__messagelist__item sended'>
42 
+            <div className='wsFileGeneric__messagelist__item__avatar'>
43 
+              <img src={imgProfil} alt='avatar' />
44 
+            </div>
45 
+
46 
+            <div className='wsFileGeneric__messagelist__item__createhour'>
47 
+              27/11/17 à 11h45
48 
+            </div>
49 
+
50 
+            <div className='wsFileThread__messagelist__item__content wsFileGeneric__messagelist__item__content'>
51 
+              Proident esse laboris in sed officia exercitation ut anim ea.
52 
+            </div>
53 
+          </li>
54 
+
55 
+          <li className='wsFileGeneric__messagelist__item received'>
56 
+            <div className='wsFileGeneric__messagelist__item__avatar'>
57 
+              <img src={imgProfil} alt='avatar' />
58 
+            </div>
59 
+            <div className='wsFileGeneric__messagelist__item__createhour'>
60 
+              27/11/17 à 11h47
61 
+            </div>
62 
+            <div className='wsFileThread__messagelist__item__content wsFileGeneric__messagelist__item__content'>
63 
+              Proident esse laboris in sed officia exercitation ut anim ea.
64 
+              Proident esse laboris in sed officia exercitation ut anim ea.
65 
+              Proident esse laboris in sed officia exercitation ut anim ea.
66 
+              Proident esse laboris in sed officia exercitation ut anim ea.
67 
+              Proident esse laboris in sed officia exercitation ut anim ea.
68 
+            </div>
69 
+          </li>
70 
+
71 
+          <li className='wsFileGeneric__messagelist__item sended'>
72 
+            <div className='wsFileGeneric__messagelist__item__avatar'>
73 
+              <img src={imgProfil} alt='avatar' />
74 
+            </div>
75 
+            <div className='wsFileGeneric__messagelist__item__createhour'>
76 
+              27/11/17 à 11h45
77 
+            </div>
78 
+            <div className='wsFileThread__messagelist__item__content wsFileGeneric__messagelist__item__content'>
79 
+              Proident esse laboris in sed officia exercitation ut anim ea.
80 
+            </div>
81 
+          </li>
82 
+
83 
+          <li className='wsFileGeneric__messagelist__item sended'>
84 
+            <div className='wsFileGeneric__messagelist__item__avatar'>
85 
+              <img src={imgProfil} alt='avatar' />
86 
+            </div>
87 
+            <div className='wsFileGeneric__messagelist__item__createhour'>
88 
+              27/11/17 à 11h45
89 
+            </div>
90 
+            <div className='wsFileThread__messagelist__item__content wsFileGeneric__messagelist__item__content'>
91 
+              Proident esse laboris in sed officia exercitation ut anim ea.
92 
+            </div>
93 
+          </li>
94 
+
95 
+          <li className='wsFileGeneric__messagelist__item received'>
96 
+            <div className='wsFileGeneric__messagelist__item__avatar'>
97 
+              <img src={imgProfil} alt='avatar' />
98 
+            </div>
99 
+            <div className='wsFileGeneric__messagelist__item__createhour'>
100 
+              27/11/17 à 11h47
101 
+            </div>
102 
+            <div className='wsFileThread__messagelist__item__content wsFileGeneric__messagelist__item__content'>
103 
+              Proident esse laboris in sed officia exercitation ut anim ea.
104 
+              Proident esse laboris in sed officia exercitation ut anim ea.
105 
+              Proident esse laboris in sed officia exercitation ut anim ea.
106 
+              Proident esse laboris in sed officia exercitation ut anim ea.
107 
+              Proident esse laboris in sed officia exercitation ut anim ea.
108 
+            </div>
109 
+          </li>
110 
+
111 
+          <li className='wsFileGeneric__messagelist__item received'>
112 
+            <div className='wsFileGeneric__messagelist__item__avatar'>
113 
+              <img src={imgProfil} alt='avatar' />
114 
+            </div>
115 
+            <div className='wsFileGeneric__messagelist__item__createhour'>
116 
+              27/11/17 à 11h47
117 
+            </div>
118 
+            <div className='wsFileThread__messagelist__item__content wsFileGeneric__messagelist__item__content'>
119 
+              Proident esse laboris in sed officia exercitation ut anim ea.
120 
+              Proident esse laboris in sed officia exercitation ut anim ea.
121 
+              Proident esse laboris in sed officia exercitation ut anim ea.
122 
+              Proident esse laboris in sed officia exercitation ut anim ea.
123 
+              Proident esse laboris in sed officia exercitation ut anim ea.
124 
+            </div>
125 
+          </li>
126 
+
127 
+          <li className='wsFileGeneric__messagelist__item sended'>
128 
+            <div className='wsFileGeneric__messagelist__item__avatar'>
129 
+              <img src={imgProfil} alt='avatar' />
130 
+            </div>
131 
+            <div className='wsFileGeneric__messagelist__item__createhour'>
132 
+              27/11/17 à 11h45
133 
+            </div>
134 
+            <div className='wsFileThread__messagelist__item__content wsFileGeneric__messagelist__item__content'>
135 
+              Proident esse laboris in sed officia exercitation ut anim ea.
136 
+            </div>
137 
+          </li>
138 
+
139 
+          <li className='wsFileGeneric__messagelist__item received'>
140 
+            <div className='wsFileGeneric__messagelist__item__avatar'>
141 
+              <img src={imgProfil} alt='avatar' />
142 
+            </div>
143 
+            <div className='wsFileGeneric__messagelist__item__createhour'>
144 
+              27/11/17 à 11h47
145 
+            </div>
146 
+            <div className='wsFileThread__messagelist__item__content wsFileGeneric__messagelist__item__content'>
147 
+              Proident esse laboris in sed officia exercitation ut anim ea.
148 
+              Proident esse laboris in sed officia exercitation ut anim ea.
149 
+              Proident esse laboris in sed officia exercitation ut anim ea.
150 
+              Proident esse laboris in sed officia exercitation ut anim ea.
151 
+              Proident esse laboris in sed officia exercitation ut anim ea.
152 
+            </div>
153 
+          </li>
154 
+
155 
+          <li className='wsFileGeneric__messagelist__item sended'>
156 
+            <div className='wsFileGeneric__messagelist__item__avatar'>
157 
+              <img src={imgProfil} alt='avatar' />
158 
+            </div>
159 
+            <div className='wsFileGeneric__messagelist__item__createhour'>
160 
+              27/11/17 à 11h45
161 
+            </div>
162 
+            <div className='wsFileThread__messagelist__item__content wsFileGeneric__messagelist__item__content'>
163 
+              Proident esse laboris in sed officia exercitation ut anim ea.
164 
+            </div>
165 
+          </li>
166 
+        </ul>
167 
+
168 
+        <form className='wsFileThread__texteditor wsFileGeneric__texteditor'>
169 
+          <div className='wsFileThread__texteditor__simpletext wsFileGeneric__texteditor__simpletext input-group'>
170 
+            <input type='text' className='wsFileThread__texteditor__simpletext__input wsFileGeneric__texteditor__simpletext__input form-control' placeholder='...' />
171 
+
172 
+            <div className='wsFileThread__texteditor__simpletext__icon wsFileGeneric__texteditor__simpletext__icon input-group-addon'>
173 
+              <i className='fa fa-font' />
174 
+            </div>
175 
+          </div>
176 
+
177 
+          <div className='wsFileGeneric__texteditor__wysiwyg d-none d-xl-block'>
178 
+            <textarea />
179 
+          </div>
180 
+
181 
+          <div className='wsFileThread__texteditor__submit wsFileGeneric__texteditor__submit d-xl-flex justify-content-xl-center'>
182 
+            <button type='submit' className='wsFileThread__texteditor__submit__btn wsFileGeneric__texteditor__submit__btn btn btn-primary'>
183 
+              Envoyer
184 
+              <div className='wsFileThread__texteditor__submit__btn__icon wsFileGeneric__texteditor__submit__btn__icon'>
185 
+                <i className='fa fa-paper-plane-o' />
186 
+              </div>
187 
+            </button>
188 
+          </div>
189 
+        </form>
190 
+      </div>
11 191 
     </div>
12 192 
   )
13 193 
 }

+ 11 - 11
src/container/Thread.jsx View File 

@@ -1,5 +1,5 @@
1 1 
 import React from 'react'
2 
-import PageHtmlComponent from '../component/Thread.jsx'
2 
+import ThreadComponent from '../component/Thread.jsx'
3 3 
 import {
4 4 
   PopinFixed,
5 5 
   PopinFixedHeader,
 
@@ -12,7 +12,7 @@ class pageHtml extends React.Component {
12 12 
   constructor (props) {
13 13 
     super(props)
14 14 
     this.state = {
15 
-      appName: 'PageHtml',
15 
+      appName: 'Thread',
16 16 
       data: props.data
17 17 
         ? props.data
18 18 
         : { // for debugg purpose
 
@@ -21,11 +21,11 @@ class pageHtml extends React.Component {
21 21 
             text: 'Bonjour ?'
22 22 
           },
23 23 
           appData: {
24 
-            name: 'PageHtml',
25 
-            componentLeft: 'PageHtml',
26 
-            componentRight: 'Timeline',
27 
-            customClass: 'wsFilePageHtml',
28 
-            icon: 'fa fa-file-word-o'
24 
+            name: 'Thread',
25 
+            componentLeft: 'Thread',
26 
+            componentRight: undefined,
27 
+            customClass: 'wsFileThread',
28 
+            icon: 'fa fa-comments-o'
29 29 
           }
30 30 
         }
31 31 
     }
 
@@ -35,7 +35,7 @@ class pageHtml extends React.Component {
35 35
36 36 
   customEventReducer = ({detail}) => {
37 37 
     switch (detail.type) {
38 
-      case 'PageHtml_showMsg': // unused for now, for testing purpose
38 
+      case 'Thread_showMsg': // unused for now, for testing purpose
39 39 
         this.setState({inputText: detail.content})
40 40 
         break
41 41 
     }
 
@@ -60,9 +60,9 @@ class pageHtml extends React.Component {
60 60 
         <PopinFixedOption customClass={`${appData.customClass}`} />
61 61
62 62 
         <PopinFixedContent customClass={`${appData.customClass}__contentpage`}>
63 
-          <PageHtmlComponent
64 
-            version={file.version}
65 
-            text={file.text}
63 
+          <ThreadComponent
64 
+            // version={file.version}
65 
+            // text={file.text}
66 66 
             key={'PageHtml'}
67 67 
           />
68 68

+ 53 - 143
src/css/index.styl View File 

@@ -1,161 +1,71 @@
1 1 
 @import "../../node_modules/tracim_lib/src/css/Variable.styl"
2 2
3 
-.wsFilePageHtml
3 
+.wsContentThread
4 
+  width 550px
4 5 
   &__header
5 
-    background-color htmlColor
6 
+    color white
7 
+    background-color threadColor
6 8 
     &__editionmode
7 9 
       display none
8 10 
     &__icon
9 
-      .fa-file-word-o
11 
+      .fa-comments-o
10 12 
         color white
11 
-  &__contentpage
12 
-    &__textnote
13 
-      margin 10px
14 
-      border-radius 10px
15 
-      padding 25px
16 
-      height 100%
17 
-      background-color off-white
18 
-      &__latestversion
19 
-        text-align right
20 
-        opacity 0.7
21 
-      &__text
22 
-        font-size 14px
23 
-      &__edition
24 
-        display none
25 
-    &__messagelist
26 
-      min-height 300px
27 
-      &__item
28 
-        &__content
29 
-          color darkGrey
30 
-      &__version
31 
-        margin-top 40px
32 
-        background-color grey-hover
33 
-        &__btn
34 
-          padding 5px 25px
35 
-          border-radius 5px
36 
-          width 145px
37 
-          color white
38 
-          font-size 17px
39 
-          background-color htmlColor
40 
-          & > i
41 
-            margin-right 10px
42 
-            color darkGrey
43 
-            font-size 22px
44 
-          &:hover
45 
-            background-color darkHtmlColor
46 
-          &:focus
47 
-            background-color darkHtmlColor
48 
-        &__date
49 
-          color fontColor
50 
-          font-size 17px
51 
-    &__texteditor
52 
-      &__simpletext
53 
-        &__input
54 
-          &:focus
55 
-            color htmlColor
56 
-            border-color htmlColor
57 
-      &__submit
58 
-        &__btn
59 
-          border-color htmlColor
60 
-          background-color htmlColor
61 
-          color white
62 
-          &:hover
63 
-            border-color htmlColor
64 
-            background-color htmlColor
65 
-          &:focus
66 
-            border-color htmlColor
67 
-            background-color htmlColor
68 
-
69 
-.messagelistOpen
70 
-  .wsFilePageHtml__contentpage__messagelist
71 
-    flex 0
72 
-    min-height 0
13 
+  &__wrapper
14 
+    height calc(100% - 209px) /* height of chat__header + height of option + top of chat */
15 
+  &__messagelist
16 
+    padding 15px 35px
17 
+    &__item
18 
+      &__content
19 
+        color darkBlue
20 
+  &__texteditor
21 
+    &__simpletext
22 
+      &__input
23 
+        &:focus
24 
+          color darkBlue
25 
+          border-color darkBlue
26 
+    &__submit
27 
+      &__btn
28 
+        color darkBlue
73 29
74 30 
 .received
75 
-  .wsFilePageHtml__contentpage__messagelist__item__content
76 
-    background-color htmlColor
77 
-
78 
-@media (min-width: max-xs) and (max-width: max-lg)
79 
-  .wsFilePageHtml
80 
-    &__contentpage
81 
-      display block
82 
-      overflow-Y scroll
83 
-      &__textnote
84 
-        margin-right 10px
85 
-        padding 10px 20px
86 
-        width auto
87 
-        overflow-Y hidden
88 
-        &__latestversion
89 
-          padding-top 10px
90 
-      &__wrapper
91 
-        width auto
92 
-      &__texteditor
93 
-        &__simpletext
94 
-          display inline-flex
95 
-          width 60%
96 
-        &__submit
97 
-          display inline-flex
98 
-          margin 10px 0
99 
-          &__btn
100 
-            display flex
101 
-            margin-left 35px
102 
-            &__icon
103 
-              margin-left 15px
31 
+  .wsContentThread__messagelist__item__content
32 
+    background-color darkBlue
33 
+    color white
104 34
105 
-@media (min-width: min-lg) and (max-width: max-lg)
106 
-  .wsFilePageHtml
107 
-    width 692px
108 
-    &__contentpage__texteditor__simpletext
109 
-      margin-left 15px
35 
+.activeEditionTitle
36 
+  .wsFileThread
37 
+    &__header
38 
+      &__editionmode
39 
+        display block
40 
+      &__title
41 
+        display none
110 42
111 
-@media (min-width: min-md) and (max-width: max-md)
112 
-  .wsFilePageHtml
113 
-    width 768px
114 
-    &__contentpage__texteditor__simpletext
115 
-      margin-left 25px
43 
+@media (min-width: max-xs) and (max-width: max-lg)
44 
+  .wsContentThread
45 
+    &__texteditor
46 
+      padding 7px
47 
+      &__simpletext
48 
+        display inline-flex
49 
+      &__submit
50 
+        display inline-flex
51 
+        width 80px
116 52
117 53 
 @media (min-width: min-sm) and (max-width: max-sm)
118 
-  .wsFilePageHtml
54 
+  .wsContentThread
119 55 
     top 69px
120 
-    width 576px
121 
-    height calc(100% - 69px)
122 
-    &__contentpage__texteditor__simpletext
123 
-      margin-left 10px
124 56
125 57 
 @media (max-width: max-xs)
126 
-  .wsFilePageHtml
127 
-    top 70px
128 
-    height calc(100% - 70px)
58 
+  .wsContentThread
59 
+    top 69px
129 60 
     width 100%
130 61 
     box-shadow none
131 
-    &__contentpage
132 
-      display block
133 
-      overflow-Y scroll
134 
-      &__textnote
135 
-        margin-right 10px
136 
-        width auto
137 
-        overflow-Y hidden
138 
-        font-size 15px
139 
-      &__wrapper
140 
-        width auto
141 
-      &__messagelist
142 
-        &__item
143 
-          padding 0 35px 20px 30px
144 
-        &__version
145 
-          &__btn
146 
-            font-size 17px
147 
-            vertical-align middle
148 
-          &__dateversion
149 
-            font-size 15px
150 
-      &__texteditor
151 
-        &__simpletext
152 
-          margin 10px 0
153 
-          display flex
154 
-          width 95%
155 
-          margin-left 10px
156 
-        &__submit
157 
-          &__btn
158 
-            display flex
159 
-            margin 0 auto
160 
-            &__icon
161 
-              margin-left 10px
62 
+    z-index 1
63 
+    &__texteditor
64 
+      padding 7px
65 
+      &__simpletext
66 
+        display inline-flex
67 
+        margin-right 15px
68 
+        width 62%
69 
+      &__submit
70 
+        display inline-flex
71 
+        width 80px

BIN
src/img/imgProfil.png View File