GolosChain#591 comment parent link formatted by spec; aggregated com…

…ment icon applied
hobbit19 · May 2, 2018 · ee45efa · ee45efa
1 parent e017951
commit ee45efa
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 32 deletions.
diff --git a/app/assets/stylesheets/notifications.scss b/app/assets/stylesheets/notifications.scss
@@ -5,24 +5,34 @@
   color: #666666 !important;
   box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.15) !important;
 }
+
+.notification-bar a {
+  color: #71b4e1;
+  border-bottom: 1px dotted #71b4e1;
+}
+
 //
 .notification-bar-wrapper {
   //background: yellow;
   display: flex;
 }
+
 //
 .notification-bar-title {
   //background: lightgrey;
 }
+
 //
 .notification-bar-message {
   //background: lightgrey;
 }
+
 //
 .notification-bar-action {
   //border-radius: 0px !important;
   //background: lightgrey;
 }
+
 //
 //.notification-bar-wrapper > span {
 //  display: inline-flex;

diff --git a/app/components/elements/Notifications/NotifyContent.jsx b/app/components/elements/Notifications/NotifyContent.jsx
@@ -3,10 +3,12 @@ import Icon from 'app/components/elements/Icon';
 import {Link} from 'react-router';
 import Userpic from 'app/components/elements/Userpic';
 import iconCross from 'app/assets/icons/cross.svg'
+import commentMulti from 'app/assets/icons/notification/comment_multi.svg'
+
 //
 const actionStyle = {
   // fixme
-  paddingTop: '1px',
+  paddingTop: '2px',
   // paddingLeft: '11px',
   // paddingRight: '0px',
   display: 'flex',
@@ -35,16 +37,16 @@ const transfer = data => {
       <div className="NotificationContent__container_left">
         <Userpic width="37" height="37" imageUrl={profile_image} />
       </div>
-      <Link to={`/@${to}/transfers`}>
-        <div className="NotificationContent__container_center">
+      <div className="NotificationContent__container_center">
+        <Link to={`/@${to}/transfers`}>
           <span className="NotificationContent__action_source">
             {account}
             <span style={{color: '#919191', fontWeight: '450'}}>
               {message}
             </span>
           </span>
-        </div>
-      </Link>
+        </Link>
+      </div>
     </div>
   )
 }
@@ -73,24 +75,38 @@ const comment = data => {
   const oncePerBlock = (count === 1);
   //
   const message = oncePerBlock ?
-    ` ответил на ваш ${type === `post` ? 'пост' : 'комментарий'}` :
-    `На ваш ${type === `post` ? 'пост' : 'комментарий'} ответили ${count} раз.`;
+    <span>
+      {` ответил на ваш`}
+      &nbsp;
+      <Link to={parent_url}>
+        {type === 'post' ? `пост` : `комментарий`}
+      </Link>
+    </span> :
+    <span>
+      {`На ваш`}
+      &nbsp;
+      <Link to={parent_url}>
+        {type === 'post' ? `пост` : `комментарий`}
+      </Link>
+      {` ответили ${count} раз.`}
+    </span>
   //
   return (
     <div className="NotificationContent__container">
       <div className="NotificationContent__container_left">
-        <Userpic width="37" height="37" imageUrl={profile_image} />
+        {
+          oncePerBlock ? <Userpic width="37" height="37" imageUrl={profile_image} /> :
+            <span className="NotificationContent__icon" dangerouslySetInnerHTML={{__html: commentMulti}} />
+        }
       </div>
-      <Link to={comment_url}>
-        <div className="NotificationContent__container_center">
+      <div className="NotificationContent__container_center">
           <span className="NotificationContent__action_source">
             {oncePerBlock && account}
             <span style={{color: '#919191', fontWeight: '450'}}>
               {message}
             </span>
           </span>
-        </div>
-      </Link>
+      </div>
     </div>
   )
 }
@@ -216,6 +232,7 @@ const vote = data => {
   //   </div>
   // )
 }
+
 //
 function render(what) {
   console.log(`))))))) `, what)
@@ -226,12 +243,19 @@ function render(what) {
         vote(payload)
   )
 }
+
 //
 export default action => ({
   // the following two are merged by react-notification
   // and overload .notification-bar css class
   barStyle: {},
   activeBarStyle: {
+    // left: 'auto',
+    // right: '1rem',
+    // transition: '',
+    // transitionProperty: 'right',
+    // transitionDuration: '.5s',
+    // transitionTimingFunction: 'cubic-bezier(0.89, 0.01, 0.5, 1.1)',
     background: '#FFFFFF',
     borderRadius: '6px',
     paddingTop: '11px',
@@ -254,7 +278,7 @@ export default action => ({
       {cross()}
     </span>,
   actionStyle: {
-      // background: 'red',
+    // background: 'red',
     padding: '0px',
     marginLeft: '18px',
     color: 'blue',

diff --git a/app/components/elements/Notifications/NotifyContent.scss b/app/components/elements/Notifications/NotifyContent.scss
@@ -1,39 +1,20 @@
 //
 .NotificationContent__container {
   //background: limegreen;
-  //border-radius: 6px !important;
-  //width: 100%;
-  //height: 100%;
   display: flex;
   flex-direction: row;
-  //align-content: center;
-  //padding-left: 18px;
-  //padding-top: 8px;
-  //padding-bottom: 8px;
 }
 //
 .NotificationContent__container_left {
   //background: red;
   display: flex;
-  //align-items: center;
   align-content: center;
-  //box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2) !important;
-  //padding-left: 4px;
-  //padding-top: 4px;
-  //padding-bottom: 4px;
 }
 //
 .NotificationContent__container_center {
-
   //background: cornflowerblue;
   display: flex;
-  height: 100%;
-  //padding-top: 2px;
-  //padding-left: 6px;
-  //padding-right: 6px;
-  //flex-direction: column;
   align-items: center;
-
   //justify-content: space-around;
 }
 //
@@ -89,6 +70,24 @@
   }
 }
 
+.NotificationContent__icon {
+  //background: yellow;
+  display: flex;
+  align-items: center;
+
+  > svg {
+    width: 37px;
+    height: 37px;
+    //vertical-align: top;
+  }
+
+  //& > svg:hover > path {
+  //  fill: black !important;
+  //}
+}
+
+
+
 .NotificationContent__action_source {
   // background: 'white',
   color: #424242 !important;