Browse Source

Fix message received, change of timeline comment design, fix icon on popinfixedoption

AlexiCauvin 6 years ago
parent
commit
17f9a4da78

+ 1 - 6
src/component/PopinFixed/PopinFixed.styl View File

54
     padding 10px
54
     padding 10px
55
     height 58px
55
     height 58px
56
     background-color off-white
56
     background-color off-white
57
-    & > i
58
-      vertical-align middle
59
-      margin-right 15px
60
-      font-size 25px
61
-      cursor pointer
62
     &__menu
57
     &__menu
63
       & > div
58
       & > div
64
         display flex
59
         display flex
68
         align-items center
63
         align-items center
69
         cursor pointer
64
         cursor pointer
70
       &__action
65
       &__action
71
-        margin 5px 10px 0 0
72
         font-size 18px
66
         font-size 18px
73
         background-color transparent
67
         background-color transparent
74
         border none
68
         border none
69
+        cursor pointer
75
         &:hover , &:focus
70
         &:hover , &:focus
76
           color blue
71
           color blue
77
   &__content
72
   &__content

+ 4 - 2
src/component/Timeline/Comment.jsx View File

9
       'received': !props.fromMe
9
       'received': !props.fromMe
10
     }
10
     }
11
   )}>
11
   )}>
12
-    <div className={classnames(`${props.customClass}__messagelist__item__avatar`, 'timeline__messagelist__item__avatar')}>
13
-      {props.avatar ? <img src={props.avatar} /> : ''}
12
+    <div className={classnames(`${props.customClass}__messagelist__item__wrapper`, 'timeline__messagelist__item__wrapper')}>
13
+      <div className={classnames(`${props.customClass}__messagelist__item__avatar`, 'timeline__messagelist__item__avatar')}>
14
+        {props.avatar ? <img src={props.avatar} /> : ''}
15
+      </div>
14
     </div>
16
     </div>
15
     <div
17
     <div
16
       className={classnames(`${props.customClass}__messagelist__item__createhour`, 'timeline__messagelist__item__createhour')}>
18
       className={classnames(`${props.customClass}__messagelist__item__createhour`, 'timeline__messagelist__item__createhour')}>

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

57
           <li style={{visibility: 'hidden'}} ref={el => { this.timelineBottom = el }} />
57
           <li style={{visibility: 'hidden'}} ref={el => { this.timelineBottom = el }} />
58
         </ul>
58
         </ul>
59
 
59
 
60
-        <form className={classnames(`${props.customClass}__texteditor`, 'timeline__texteditor d-flex align-items-center justify-content-between flex-wrap')}>
60
+        <form className={classnames(`${props.customClass}__texteditor`, 'timeline__texteditor')}>
61
           <div className={classnames(`${props.customClass}__texteditor__textinput`, 'timeline__texteditor__textinput')}>
61
           <div className={classnames(`${props.customClass}__texteditor__textinput`, 'timeline__texteditor__textinput')}>
62
             <textarea
62
             <textarea
63
               id='wysiwygTimelineComment'
63
               id='wysiwygTimelineComment'
82
               </button>
82
               </button>
83
             </div>
83
             </div>
84
 
84
 
85
-            <div className={classnames(`${props.customClass}__texteditor__submit`, 'timeline__texteditor__submit mb-2')}>
85
+            <div className={classnames(`${props.customClass}__texteditor__submit`, 'timeline__texteditor__submit')}>
86
               <button
86
               <button
87
                 type='button'
87
                 type='button'
88
                 className={classnames(`${props.customClass}__texteditor__submit__btn`, 'timeline__texteditor__submit__btn btn')}
88
                 className={classnames(`${props.customClass}__texteditor__submit__btn`, 'timeline__texteditor__submit__btn btn')}

+ 12 - 20
src/component/Timeline/Timeline.styl View File

29
         top 40px
29
         top 40px
30
         left -20px
30
         left -20px
31
         border-radius 50%
31
         border-radius 50%
32
-        width 50px
33
-        height 50px
32
+        width 45px
33
+        height 45px
34
         & > img
34
         & > img
35
           width 45px
35
           width 45px
36
           height 45px
36
           height 45px
74
     flex 1 0 auto
74
     flex 1 0 auto
75
     margin 20px
75
     margin 20px
76
     &__textinput
76
     &__textinput
77
-      width 70%
77
+      width 100%
78
       & > textarea
78
       & > textarea
79
         border-radius 5px
79
         border-radius 5px
80
         border 1.5px solid grey
80
         border 1.5px solid grey
83
         width 100%
83
         width 100%
84
     &__wrapper
84
     &__wrapper
85
       display flex
85
       display flex
86
-      flex-direction column
87
-      justify-content center
86
+      align-items center
87
+      justify-content flex-end
88
+      margin-top 10px
89
+    &__advancedtext
90
+      margin-right 15px
88
     &__submit
91
     &__submit
89
-      margin 10px 0
90
       &__btn
92
       &__btn
91
         display inline-block
93
         display inline-block
92
         cursor pointer
94
         cursor pointer
97
 .received
99
 .received
98
   text-align right
100
   text-align right
99
   .timeline__messagelist__item
101
   .timeline__messagelist__item
102
+    &__wrapper
103
+      display flex
104
+      flex-direction row-reverse
100
     &__avatar
105
     &__avatar
101
-      left 93%
106
+      left 20px
102
     &__createhour
107
     &__createhour
103
       margin-left 0
108
       margin-left 0
104
       margin-right 35px
109
       margin-right 35px
105
     &__content
110
     &__content
106
       color white
111
       color white
107
 
112
 
108
-.activeAdvancedText
109
-  .timeline
110
-    &__texteditor
111
-      padding 10px
112
-      &__textinput
113
-        width 100%
114
-      &__wrapper
115
-        flex-direction row
116
-        align-items center
117
-        width 100%
118
-      &__advancedtext
119
-        margin-right 20px
120
-
121
 
113
 
122
 /**** MEDIA 576px & 1199px ****/
114
 /**** MEDIA 576px & 1199px ****/
123
 
115