Merge pull request #2114 from asaadmahmoodspin/ui-improvements

Multiple UI Improvements

web/react/components/admin_console/user_item.jsx

@@ -360,8 +360,8 @@ export default class UserItem extends React.Component {
                         height='36'
                         width='36'
                     />
-                    <span className='member-name'>{Utils.getDisplayName(user)}</span>
-                    <span className='member-email'>{email}</span>
+                    <span className='more-name'>{Utils.getDisplayName(user)}</span>
+                    <span className='more-description'>{email}</span>
                     <div className='dropdown member-drop'>
                         <a
                             href='#'

web/react/components/member_list_item.jsx

@@ -124,8 +124,8 @@ export default class MemberListItem extends React.Component {
                         height='36'
                         width='36'
                     />
-                    <div className='member-name'>{Utils.displayUsername(member.id)}</div>
-                    <div className='member-description'>{member.email}</div>
+                    <div className='more-name'>{Utils.displayUsername(member.id)}</div>
+                    <div className='more-description'>{member.email}</div>
                 </td>
                 <td className='td--action lg'>{invite}</td>
             </tr>

web/react/components/member_list_team_item.jsx

@@ -208,8 +208,8 @@ export default class MemberListTeamItem extends React.Component {
                         height='36'
                         width='36'
                     />
-                    <span className='member-name'>{Utils.displayUsername(user.id)}</span>
-                    <span className='member-email'>{email}</span>
+                    <span className='more-name'>{Utils.displayUsername(user.id)}</span>
+                    <span className='more-description'>{email}</span>
                     <div className='dropdown member-drop'>
                         <a
                             href='#'

web/react/components/more_channels.jsx

@@ -114,7 +114,7 @@ export default class MoreChannels extends React.Component {
                                     <tr key={channel.id}>
                                         <td>
                                             <p className='more-name'>{channel.display_name}</p>
-                                            <p className='more-purpose'>{channel.purpose}</p>
+                                            <p className='more-description'>{channel.purpose}</p>
                                         </td>
                                         <td className='td--action'>
                                             {joinButton}

web/react/components/posts_view.jsx

@@ -94,7 +94,7 @@ export default class PostsView extends React.Component {
             });
         }
 
-        this.scrollStopAction.fireAfter(1000);
+        this.scrollStopAction.fireAfter(2000);
     }
     handleScrollStop() {
         this.setState({
@@ -564,6 +564,8 @@ function ScrollToBottomArrows({isScrolling, atBottom, onClick}) {
         <div
             className={className}
             onClick={onClick}
-        />
+        >
+            <span dangerouslySetInnerHTML={{__html: Constants.SCROLL_BOTTOM_ICON}} />
+        </div>
     );
 }

web/react/components/user_settings/manage_command_hooks.jsx

@@ -271,7 +271,7 @@ export default class ManageCommandCmds extends React.Component {
             cmds.push(
                 <div
                     key={cmd.id}
-                    className='webcmd__item'
+                    className='webhook__item webcmd__item'
                 >
                     <div className='padding-top x2'>
                         <strong>
@@ -400,7 +400,7 @@ export default class ManageCommandCmds extends React.Component {
         }
 
         const existingCmds = (
-            <div className='webcmds__container'>
+            <div className='webhooks__container webcmds__container'>
                 <label className='control-label padding-top x2'>
                     <FormattedMessage
                         id='user.settings.cmds.existing'
@@ -408,7 +408,7 @@ export default class ManageCommandCmds extends React.Component {
                     />
                 </label>
                 <div className='padding-top divider-light'></div>
-                <div className='webcmds__list'>
+                <div className='webhooks__list webcmds__list'>
                     {displayCmds}
                 </div>
             </div>

web/react/utils/constants.jsx

@@ -173,6 +173,7 @@ export default {
     MENU_ICON: "<svg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px'width='4px' height='16px' viewBox='0 0 8 32' enable-background='new 0 0 8 32' xml:space='preserve'> <g> <circle cx='4' cy='4.062' r='4'/> <circle cx='4' cy='16' r='4'/> <circle cx='4' cy='28' r='4'/> </g> </svg>",
     COMMENT_ICON: "<svg version='1.1' id='Layer_2' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px'width='15px' height='15px' viewBox='1 1.5 15 15' enable-background='new 1 1.5 15 15' xml:space='preserve'> <g> <g> <path fill='#211B1B' d='M14,1.5H3c-1.104,0-2,0.896-2,2v8c0,1.104,0.896,2,2,2h1.628l1.884,3l1.866-3H14c1.104,0,2-0.896,2-2v-8 C16,2.396,15.104,1.5,14,1.5z M15,11.5c0,0.553-0.447,1-1,1H8l-1.493,2l-1.504-1.991L5,12.5H3c-0.552,0-1-0.447-1-1v-8 c0-0.552,0.448-1,1-1h11c0.553,0,1,0.448,1,1V11.5z'/> </g> </g> </svg>",
     REPLY_ICON: "<svg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px'viewBox='-158 242 18 18' style='enable-background:new -158 242 18 18;' xml:space='preserve'> <path d='M-142.2,252.6c-2-3-4.8-4.7-8.3-4.8v-3.3c0-0.2-0.1-0.3-0.2-0.3s-0.3,0-0.4,0.1l-6.9,6.2c-0.1,0.1-0.1,0.2-0.1,0.3 c0,0.1,0,0.2,0.1,0.3l6.9,6.4c0.1,0.1,0.3,0.1,0.4,0.1c0.1-0.1,0.2-0.2,0.2-0.4v-3.8c4.2,0,7.4,0.4,9.6,4.4c0.1,0.1,0.2,0.2,0.3,0.2 c0,0,0.1,0,0.1,0c0.2-0.1,0.3-0.3,0.2-0.4C-140.2,257.3-140.6,255-142.2,252.6z M-150.8,252.5c-0.2,0-0.4,0.2-0.4,0.4v3.3l-6-5.5 l6-5.3v2.8c0,0.2,0.2,0.4,0.4,0.4c3.3,0,6,1.5,8,4.5c0.5,0.8,0.9,1.6,1.2,2.3C-144,252.8-147.1,252.5-150.8,252.5z'/> </svg>",
+    SCROLL_BOTTOM_ICON: "<svg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px'viewBox='-239 239 21 23' style='enable-background:new -239 239 21 23;' xml:space='preserve'> <path d='M-239,241.4l2.4-2.4l8.1,8.2l8.1-8.2l2.4,2.4l-10.5,10.6L-239,241.4z M-228.5,257.2l8.1-8.2l2.4,2.4l-10.5,10.6l-10.5-10.6 l2.4-2.4L-228.5,257.2z'/> </svg>",
     UPDATE_TYPING_MS: 5000,
     THEMES: {
         default: {

web/react/utils/utils.jsx

@@ -680,6 +680,7 @@ export function applyTheme(theme) {
     }
 
     if (theme.centerChannelColor) {
+        changeCss('.post-list__arrows', 'fill:' + changeOpacity(theme.centerChannelColor, 0.3), 1);
         changeCss('.sidebar--left, .sidebar--right .sidebar--right__header', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1);
         changeCss('.app__content, .post-create__container .post-create-body .btn-file, .post-create__container .post-create-footer .msg-typing, .command-name, .modal .modal-content, .dropdown-menu, .popover, .mentions-name, .tip-overlay', 'color:' + theme.centerChannelColor, 1);
         changeCss('#archive-link-home', 'background:' + changeOpacity(theme.centerChannelColor, 0.15), 1);

web/sass-files/sass/partials/_markdown.scss

@@ -39,6 +39,7 @@
 	padding: 4px 10px 5px 10px;
 	font-size: 13px;
 	opacity: 0.7;
+	z-index: 5;
 }
 
 .post__body {

web/sass-files/sass/partials/_mentions.scss

@@ -18,6 +18,13 @@
 	line-height: 36px;
 	font-size: 13px;
 	cursor: pointer;
+	white-space: nowrap;
+
+	.mention-align {
+		@include clearfix;
+		text-overflow: ellipsis;
+		width: calc(100% - 50px);
+	}
 }
 
 .mentions-text {
@@ -33,6 +40,15 @@
 	font-size: 20px;
 	text-align: center;
 	@include border-radius(32px);
+
+	.mention-align {
+		max-width: 80%;
+		overflow: hidden;
+		display: inline-block;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+	}
+
 }
 
 .mention-fullname {

web/sass-files/sass/partials/_modal.scss

@@ -103,7 +103,7 @@
 				background: rgba(0, 0, 0, 0.1);
 			}
 			span {
-			    font-family: 'Open Sans', sans-serif;
+				font-family: 'Open Sans', sans-serif;
 				line-height: 10px;
 			}
 		}
@@ -170,6 +170,12 @@
 			overflow: hidden;
 			text-overflow: ellipsis;
 		}
+		.more-description {
+			@include opacity(0.7);
+			display: block;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
 		tbody {
 			> tr {
 				&:hover td {
@@ -425,9 +431,9 @@
 }
 
 .modal-body.edit-modal-body {
-    overflow: visible;
+	overflow: visible;
 
-    .suggestion-content {
-        max-height: 150px;
-    }
+	.suggestion-content {
+		max-height: 150px;
+	}
 }

web/sass-files/sass/partials/_popover.scss

@@ -150,6 +150,9 @@
         }
         .more-name {
             margin-left: 6px;
+            max-width: 140px;
+            overflow: hidden;
+            text-overflow: ellipsis;
         }
     }
 }

web/sass-files/sass/partials/_post.scss

@@ -264,32 +264,37 @@ body.ios {
 	line-height: 25px;
 	margin-left: -60px;
 	-webkit-font-smoothing: initial;
-	@include single-transition(all, 0.3s, ease);
+	@include single-transition(all, 0.6s, ease);
 	@include translateY(-45px);
 	@include opacity(0);
 	display: none;
 
 	&.scrolling {
-		@include single-transition(all, 0.3s, ease);
 		@include translateY(0);
 		@include opacity(0.8);
 	}
 }
 
 .post-list__arrows {
-	background: url('../images/postArrows.png') center;
-	@include background-size(28px 28px);
 	background-repeat: no-repeat;
 	width: 40px;
 	height: 40px;
+	text-align: center;
+	fill: #444;
 	position: absolute;
 	bottom: 0;
-	left: 10px;
+	left: 9px;
 	z-index: 50;
 	@include opacity(0);
-	@include single-transition(all, 0.3s);
+	@include single-transition(all, 0.6s);
 	display: none;
 
+	svg {
+		color: inherit;
+		width: 28px;
+		height: 28px;
+	}
+
 	&.scrolling {
 		display: block;
 		@include opacity(1);
@@ -487,7 +492,7 @@ body.ios {
 				position: absolute;
 				top: -2px;
 				left: -7px;
-			    font-size: 11px;
+				font-size: 11px;
 				line-height: 37px;
 				@include opacity(0);
 			}

web/sass-files/sass/partials/_settings.scss

@@ -223,6 +223,8 @@
         .section-describe {
             @include opacity(0.7);
             white-space:pre;
+            @include clearfix;
+            text-overflow: ellipsis;
         }
 
         .divider-dark {
@@ -341,21 +343,6 @@ h3 {
         @include border-radius(50px);
         margin-right: 8px;
     }
-    .member-name {
-        font-weight:500;
-        display: block;
-        max-width: 80%;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-
-    .member-email {
-        color:darkgrey;
-        display: block;
-        max-width: 80%;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
 }
 
 .member-role, .member-drop {