Browse Source

refactored with proper color management

Skylsmoi 5 years ago
parent
commit
1331c99220

+ 1 - 0
package.json View File

@@ -29,6 +29,7 @@
29 29
     "file-loader": "^1.1.5",
30 30
     "i18next": "^10.5.0",
31 31
     "prop-types": "^15.6.0",
32
+    "radium": "^0.24.1",
32 33
     "react": "^16.0.0",
33 34
     "react-dom": "^16.0.0",
34 35
     "react-i18next": "^7.5.0",

+ 26 - 4
src/component/Input/TextAreaApp/TextAreaApp.jsx View File

@@ -1,5 +1,6 @@
1 1
 import React from 'react'
2 2
 import PropTypes from 'prop-types'
3
+import Radium from 'radium'
3 4
 
4 5
 require('./TextAreaApp.styl')
5 6
 
@@ -15,23 +16,43 @@ export const TextAreaApp = props =>
15 16
     <div className={`${props.customClass}__button editionmode__button`}>
16 17
       <button
17 18
         type='button'
18
-        className={`${props.customClass}__cancel editionmode__button__cancel btn btn-outline-primary mr-3`}
19
+        className={`${props.customClass}__cancel editionmode__button__cancel btn mr-3`}
19 20
         onClick={props.onClickCancelBtn}
21
+        style={{
22
+          backgroundColor: '#fdfdfd',
23
+          color: props.customColor,
24
+          borderColor: props.customColor,
25
+          ':hover': {
26
+            backgroundColor: props.customColor,
27
+            color: '#fdfdfd'
28
+          }
29
+        }}
30
+        key='TextAreaApp__cancel'
20 31
       >
21 32
         Annuler
22 33
       </button>
23 34
 
24 35
       <button
25 36
         type='button'
26
-        className={`${props.customClass}__submit editionmode__button__submit btn btn-outline-primary`}
37
+        className={`${props.customClass}__submit editionmode__button__submit btn`}
27 38
         onClick={props.onClickValidateBtn}
39
+        style={{
40
+          backgroundColor: '#fdfdfd',
41
+          color: props.customColor,
42
+          borderColor: props.customColor,
43
+          ':hover': {
44
+            backgroundColor: props.customColor,
45
+            color: '#fdfdfd'
46
+          }
47
+        }}
48
+        key='TextAreaApp__validate'
28 49
       >
29 50
         Valider
30 51
       </button>
31 52
     </div>
32 53
   </form>
33 54
 
34
-export default TextAreaApp
55
+export default Radium(TextAreaApp)
35 56
 
36 57
 TextAreaApp.propTypes = {
37 58
   text: PropTypes.string.isRequired,
@@ -39,5 +60,6 @@ TextAreaApp.propTypes = {
39 60
   onClickCancelBtn: PropTypes.func.isRequired,
40 61
   onClickValidateBtn: PropTypes.func.isRequired,
41 62
   id: PropTypes.string,
42
-  customClass: PropTypes.string
63
+  customClass: PropTypes.string,
64
+  customColor: PropTypes.string
43 65
 }

+ 14 - 1
src/component/OptionComponent/ArchiveDeleteContent.jsx View File

@@ -1,6 +1,15 @@
1 1
 import React from 'react'
2
+import Radium from 'radium'
2 3
 
3 4
 const ArchiveDeleteContent = props => {
5
+  const styleColorBtn = {
6
+    backgroundColor: '#fdfdfd',
7
+    color: '#333',
8
+    ':hover': {
9
+      color: props.customColor
10
+    }
11
+  }
12
+
4 13
   return (
5 14
     <div className='d-flex align-items-center'>
6 15
       <button
@@ -9,6 +18,8 @@ const ArchiveDeleteContent = props => {
9 18
         onClick={props.onClickArchiveBtn}
10 19
         disabled={props.disabled}
11 20
         title='Archiver'
21
+        style={styleColorBtn}
22
+        key={'archiveDeleteContent__archive'}
12 23
       >
13 24
         <i className='fa fa-fw fa-archive' />
14 25
       </button>
@@ -18,6 +29,8 @@ const ArchiveDeleteContent = props => {
18 29
         onClick={props.onClickDeleteBtn}
19 30
         disabled={props.disabled}
20 31
         title='Supprimer'
32
+        style={styleColorBtn}
33
+        key={'archiveDeleteContent__delete'}
21 34
       >
22 35
         <i className='fa fa-fw fa-trash' />
23 36
       </button>
@@ -25,4 +38,4 @@ const ArchiveDeleteContent = props => {
25 38
   )
26 39
 }
27 40
 
28
-export default ArchiveDeleteContent
41
+export default Radium(ArchiveDeleteContent)

+ 13 - 2
src/component/OptionComponent/NewVersionBtn.jsx View File

@@ -1,11 +1,22 @@
1 1
 import React from 'react'
2
+import Radium from 'radium'
2 3
 
3 4
 const NewVersionBtn = props => {
4 5
   return (
5 6
     <button
6
-      className='wsContentGeneric__option__menu__addversion newversionbtn btn btn-outline-primary'
7
+      className='wsContentGeneric__option__menu__addversion newversionbtn btn'
7 8
       onClick={props.onClickNewVersionBtn}
8 9
       disabled={props.disabled}
10
+      style={{
11
+        backgroundColor: '#fdfdfd',
12
+        color: '#333',
13
+        border: '1px solid',
14
+        borderColor: props.customColor,
15
+        ':hover': {
16
+          backgroundColor: props.customColor,
17
+          color: '#fdfdfd'
18
+        }
19
+      }}
9 20
     >
10 21
       Modifier
11 22
       <i className='fa fa-plus-circle ml-3' />
@@ -13,4 +24,4 @@ const NewVersionBtn = props => {
13 24
   )
14 25
 }
15 26
 
16
-export default NewVersionBtn
27
+export default Radium(NewVersionBtn)

+ 4 - 2
src/component/PopinFixed/PopinFixedHeader.jsx View File

@@ -27,10 +27,10 @@ class PopinFixedHeader extends React.Component {
27 27
   }
28 28
 
29 29
   render () {
30
-    const { customClass, faIcon, title, onClickCloseBtn } = this.props
30
+    const { customClass, customColor, faIcon, title, onClickCloseBtn } = this.props
31 31
 
32 32
     return (
33
-      <div className={classnames('wsContentGeneric__header', `${customClass}__header`)}>
33
+      <div className={classnames('wsContentGeneric__header', `${customClass}__header`)} style={{backgroundColor: customColor}}>
34 34
         <div className={classnames('wsContentGeneric__header__icon', `${customClass}__header__icon`)}>
35 35
           <i className={`fa fa-${faIcon}`} />
36 36
         </div>
@@ -66,12 +66,14 @@ PopinFixedHeader.propTypes = {
66 66
   faIcon: PropTypes.string.isRequired,
67 67
   onClickCloseBtn: PropTypes.func.isRequired,
68 68
   customClass: PropTypes.string,
69
+  customColor: PropTypes.string,
69 70
   title: PropTypes.string,
70 71
   onValidateChangeTitle: PropTypes.func
71 72
 }
72 73
 
73 74
 PopinFixedHeader.defaultProps = {
74 75
   customClass: '',
76
+  customColor: '',
75 77
   title: '',
76 78
   onChangeTitle: () => {}
77 79
 }

+ 35 - 22
src/component/Timeline/Comment.jsx View File

@@ -1,28 +1,41 @@
1 1
 import React from 'react'
2 2
 import classnames from 'classnames'
3 3
 
4
-const Comment = props => (
5
-  <li className={classnames(
6
-    `${props.customClass}__messagelist__item`,
7
-    'timeline__body__messagelist__item', {
8
-      'received': props.fromMe, // @FIXME : invert names of class (received should be !fromMe)
9
-      'sended': !props.fromMe
10
-    }
11
-  )}>
12
-    <div className={classnames(`${props.customClass}__messagelist__item__wrapper`, 'timeline__body__messagelist__item__wrapper')}>
13
-      <div className={classnames(`${props.customClass}__messagelist__item__avatar`, 'timeline__body__messagelist__item__avatar')}>
14
-        {props.avatar ? <img src={props.avatar} /> : ''}
4
+const Comment = props => {
5
+  const styleSent = {
6
+    color: '#fdfdfd',
7
+    backgroundColor: props.customColor
8
+  }
9
+
10
+  const styleReceived = {
11
+    color: '#333',
12
+    backgroundColor: '#fdfdfd'
13
+  }
14
+
15
+  return (
16
+    <li className={classnames(
17
+      `${props.customClass}__messagelist__item`,
18
+      'timeline__body__messagelist__item', {
19
+        'sent': props.fromMe,
20
+        'received': !props.fromMe
21
+      }
22
+    )}>
23
+      <div className={classnames(`${props.customClass}__messagelist__item__wrapper`, 'timeline__body__messagelist__item__wrapper')}>
24
+        <div className={classnames(`${props.customClass}__messagelist__item__avatar`, 'timeline__body__messagelist__item__avatar')}>
25
+          {props.avatar ? <img src={props.avatar} /> : ''}
26
+        </div>
27
+      </div>
28
+      <div
29
+        className={classnames(`${props.customClass}__messagelist__item__createhour`, 'timeline__body__messagelist__item__createhour')}>
30
+        {props.createdAt}
15 31
       </div>
16
-    </div>
17
-    <div
18
-      className={classnames(`${props.customClass}__messagelist__item__createhour`, 'timeline__body__messagelist__item__createhour')}>
19
-      {props.createdAt}
20
-    </div>
21
-    <div
22
-      className={classnames(`${props.customClass}__messagelist__item__content`, 'timeline__body__messagelist__item__content')}
23
-      dangerouslySetInnerHTML={{__html: props.text}}
24
-    />
25
-  </li>
26
-)
32
+      <div
33
+        className={classnames(`${props.customClass}__messagelist__item__content`, 'timeline__body__messagelist__item__content')}
34
+        style={props.fromMe ? styleSent : styleReceived}
35
+        dangerouslySetInnerHTML={{__html: props.text}}
36
+      />
37
+    </li>
38
+  )
39
+}
27 40
 
28 41
 export default Comment

+ 10 - 1
src/component/Timeline/Revision.jsx View File

@@ -1,5 +1,7 @@
1 1
 import React from 'react'
2 2
 import classnames from 'classnames'
3
+import Radium from 'radium'
4
+import color from 'color'
3 5
 
4 6
 const Revision = props => (
5 7
   <li className={classnames(`${props.customClass}__messagelist__version`, 'timeline__body__messagelist__version')} >
@@ -7,6 +9,13 @@ const Revision = props => (
7 9
       type='button'
8 10
       className={classnames(`${props.customClass}__messagelist__version__btn`, 'timeline__body__messagelist__version__btn btn')}
9 11
       onClick={props.onClickRevision}
12
+      style={{
13
+        backgroundColor: props.customColor,
14
+        color: '#fdfdfd',
15
+        ':hover': {
16
+          backgroundColor: color(props.customColor).darken(0.15).hexString()
17
+        }
18
+      }}
10 19
     >
11 20
       <i className='fa fa-code-fork' />
12 21
       version {props.number}
@@ -18,4 +27,4 @@ const Revision = props => (
18 27
   </li>
19 28
 )
20 29
 
21
-export default Revision
30
+export default Radium(Revision)

+ 26 - 2
src/component/Timeline/Timeline.jsx View File

@@ -1,6 +1,8 @@
1 1
 import React from 'react'
2 2
 import PropTypes from 'prop-types'
3 3
 import classnames from 'classnames'
4
+import Radium from 'radium'
5
+import color from 'color'
4 6
 import Comment from './Comment.jsx'
5 7
 import Revision from './Revision.jsx'
6 8
 
@@ -43,6 +45,7 @@ class Timeline extends React.Component {
43 45
                 case 'comment':
44 46
                   return <Comment
45 47
                     customClass={props.customClass}
48
+                    customColor={props.customColor}
46 49
                     avatar={content.author.avatar_url}
47 50
                     createdAt={content.created}
48 51
                     text={content.raw_content}
@@ -53,6 +56,7 @@ class Timeline extends React.Component {
53 56
                 case 'revision':
54 57
                   return <Revision
55 58
                     customClass={props.customClass}
59
+                    customColor={props.customColor}
56 60
                     createdAt={content.created}
57 61
                     number={content.number}
58 62
                     key={`revision_${content.revision_id}`}
@@ -79,10 +83,20 @@ class Timeline extends React.Component {
79 83
                 <button
80 84
                   type='button'
81 85
                   className={classnames(
82
-                    `${props.customClass}__texteditor__advancedtext__btn timeline__body__texteditor__advancedtext__btn btn btn-outline-primary`
86
+                    `${props.customClass}__texteditor__advancedtext__btn timeline__body__texteditor__advancedtext__btn btn`
83 87
                   )}
84 88
                   onClick={props.onClickWysiwygBtn}
85 89
                   disabled={props.disableComment}
90
+                  style={{
91
+                    backgroundColor: 'transparent',
92
+                    color: '#333',
93
+                    borderColor: props.customColor,
94
+                    ':hover': {
95
+                      backgroundColor: props.customColor,
96
+                      color: '#fdfdfd'
97
+                    }
98
+                  }}
99
+                  key={'timeline__comment__advancedtext'}
86 100
                 >
87 101
                   {props.wysiwyg ? 'Texte Simple' : 'Texte Avancé'}
88 102
                 </button>
@@ -94,6 +108,14 @@ class Timeline extends React.Component {
94 108
                   className={classnames(`${props.customClass}__texteditor__submit__btn`, 'timeline__body__texteditor__submit__btn btn')}
95 109
                   onClick={props.onClickValidateNewCommentBtn}
96 110
                   disabled={props.disableComment}
111
+                  style={{
112
+                    backgroundColor: props.customColor,
113
+                    color: '#fdfdfd',
114
+                    ':hover': {
115
+                      backgroundColor: color(props.customColor).darken(0.15).hexString()
116
+                    }
117
+                  }}
118
+                  key={'timeline__comment__send'}
97 119
                 >
98 120
                   Envoyer
99 121
                   <div
@@ -110,7 +132,7 @@ class Timeline extends React.Component {
110 132
   }
111 133
 }
112 134
 
113
-export default Timeline
135
+export default Radium(Timeline)
114 136
 
115 137
 Timeline.propTypes = {
116 138
   timelineData: PropTypes.array.isRequired,
@@ -119,6 +141,7 @@ Timeline.propTypes = {
119 141
   onClickValidateNewCommentBtn: PropTypes.func.isRequired,
120 142
   disableComment: PropTypes.bool,
121 143
   customClass: PropTypes.string,
144
+  customColor: PropTypes.string,
122 145
   loggedUser: PropTypes.object,
123 146
   wysiwyg: PropTypes.bool,
124 147
   onClickWysiwygBtn: PropTypes.func,
@@ -130,6 +153,7 @@ Timeline.propTypes = {
130 153
 Timeline.defaultProps = {
131 154
   disableComment: false,
132 155
   customClass: '',
156
+  customColor: '',
133 157
   loggedUser: {
134 158
     id: '',
135 159
     name: '',

+ 1 - 3
src/component/Timeline/Timeline.styl View File

@@ -107,7 +107,7 @@
107 107
             display inline-block
108 108
             margin-left 20px
109 109
 
110
-.received
110
+.sent
111 111
   text-align right
112 112
   .timeline__body__messagelist__item
113 113
     &__wrapper
@@ -118,8 +118,6 @@
118 118
     &__createhour
119 119
       margin-left 0
120 120
       margin-right 35px
121
-    &__content
122
-      color white
123 121
 
124 122
 
125 123
 .mce-btn-group:not(:first-child)

+ 7 - 1
src/index.dev.js View File

@@ -17,6 +17,9 @@ import Delimiter from './component/Delimiter/Delimiter.jsx'
17 17
 import CardPopup from './component/CardPopup/CardPopup.jsx'
18 18
 import CardPopupCreateContent from './component/CardPopup/CardPopupCreateContent.jsx'
19 19
 
20
+import NewVersionButton from './component/OptionComponent/NewVersionBtn.jsx'
21
+import ArchiveDeleteContent from './component/OptionComponent/ArchiveDeleteContent.jsx'
22
+
20 23
 ReactDOM.render(
21 24
   <div style={{width: '1200px'}}>
22 25
     <PopinFixed customClass={`${'randomClass'}`}>
@@ -69,6 +72,8 @@ ReactDOM.render(
69 72
 
70 73
       <PopinFixedContent customClass={`${'randomClass'}__contentpage`}>
71 74
         <div>
75
+          <NewVersionButton customColor='#3f52e3' />
76
+          <ArchiveDeleteContent customColor='#3f52e3' />
72 77
           <Delimiter />
73 78
           <span>Here will be the app content. Style is handled by the app (obviously)</span>
74 79
           <BtnSwitch />
@@ -77,8 +82,9 @@ ReactDOM.render(
77 82
 
78 83
         <Timeline
79 84
           customClass={`${'randomClass'}__contentpage`}
85
+          customColor={'#3f52e3'}
80 86
           loggedUser={{
81
-            user_id: 5,
87
+            user_id: 1,
82 88
             username: 'Smoi',
83 89
             firstname: 'Côme',
84 90
             lastname: 'Stoilenom',