Merge pull request #1760 from asaadmahmoodspin/ui-improvements

Multiple UI Improvements

web/react/components/sidebar_right.jsx

@@ -52,14 +52,29 @@ export default class SidebarRight extends React.Component {
     doStrangeThings() {
         // We should have a better way to do this stuff
         // Hence the function name.
+        var windowWidth = $(window).outerWidth();
+        var sidebarRightWidth = $('.sidebar--right').outerWidth();
+
         $('.inner__wrap').removeClass('.move--right');
         $('.inner__wrap').addClass('move--left');
         $('.sidebar--left').removeClass('move--right');
         $('.sidebar--right').addClass('move--left');
 
         //$('.sidebar--right').prepend('<div class="sidebar__overlay"></div>');
-
+        if (this.state.search_visible || this.state.post_right_visible) {
-        if (!(this.state.search_visible || this.state.post_right_visible)) {
+            if (windowWidth > 960) {
+                $('.inner__wrap').velocity({marginRight: sidebarRightWidth}, {duration: 500, easing: 'easeOutSine'});
+                $('.sidebar--right').velocity({translateX: 0}, {duration: 500, easing: 'easeOutSine'});
+            } else {
+                $('.inner__wrap, .sidebar--right').attr('style', '');
+            }
+        } else {
+            if (windowWidth > 960) {
+                $('.inner__wrap').velocity({marginRight: 0}, {duration: 500, easing: 'easeOutSine'});
+                $('.sidebar--right').velocity({translateX: sidebarRightWidth}, {duration: 500, easing: 'easeOutSine'});
+            } else {
+                $('.inner__wrap, .sidebar--right').attr('style', '');
+            }
             $('.inner__wrap').removeClass('move--left').removeClass('move--right');
             $('.sidebar--right').removeClass('move--left');
             return (

web/react/utils/utils.jsx

@@ -617,6 +617,7 @@ export function applyTheme(theme) {
     if (theme.centerChannelColor) {
         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);
         changeCss('#post-create', 'color:' + theme.centerChannelColor, 2);
         changeCss('.mentions--top, .suggestion-list', 'box-shadow:' + changeOpacity(theme.centerChannelColor, 0.2) + ' 1px -3px 12px', 3);
         changeCss('.mentions--top, .suggestion-list', '-webkit-box-shadow:' + changeOpacity(theme.centerChannelColor, 0.2) + ' 1px -3px 12px', 2);
@@ -685,11 +686,11 @@ export function applyTheme(theme) {
     }
 
     if (theme.mentionHighlightBg) {
-        changeCss('.mention-highlight, .search-highlight, #archive-link-home', 'background:' + theme.mentionHighlightBg, 1);
+        changeCss('.mention-highlight, .search-highlight', 'background:' + theme.mentionHighlightBg, 1);
     }
 
     if (theme.mentionHighlightBg) {
-        changeCss('.post.post--highlight, #archive-link-home', 'background:' + changeOpacity(theme.mentionHighlightBg, 0.5), 1);
+        changeCss('.post.post--highlight', 'background:' + changeOpacity(theme.mentionHighlightBg, 0.5), 1);
     }
 
     if (theme.mentionHighlightLink) {

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

@@ -1,9 +1,7 @@
 @charset "UTF-8";
 
 .inner__wrap {
-	@include single-transition(all, 0.5s, ease);
 	&.move--left {
-		margin-right: 400px;
 		.search-bar__container {
 			display: none;
 		}

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

@@ -231,12 +231,12 @@ body.ios {
 	}
 
 	.more-messages-text {
-		margin-top: 2px;
+		margin: 5px 0 10px;
-		margin-bottom: 5px;
 		display: block;
 		text-align: center;
 		outline: none;
 		border: none;
+		font-size: 13px;
 	}
 	.beginning-messages-text {
 		margin-top: 2px;
@@ -683,7 +683,7 @@ body.ios {
 	}
 
 	.post__time {
-		font-size: 13px;
+		font-size: 0.9em;
 	}
 
 	.post__time, &.post--system .post__body {

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

@@ -56,6 +56,7 @@
     .sidebar--right {
         z-index: 5;
         @include translateX(100%);
+        @include single-transition(all, 0.5s, ease);
 
         &.move--left {
             @include translateX(0);
@@ -628,6 +629,7 @@
         height: calc(100% - 44px);
     }
     .inner__wrap {
+        @include single-transition(all, 0.5s, ease);
         &.move--right {
             @include translate3d(290px, 0, 0);
             &:before {

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

@@ -18,6 +18,12 @@
 	z-index: 5;
 	cursor: pointer;
 }
+
+.search-item-snippet {
+	@include clearfix;
+	text-overflow: ellipsis;
+}
+
 .sidebar__collapse {
 	cursor: pointer;
 	z-index: 5;
@@ -135,6 +141,7 @@
 
 .search-item-time {
 	@include opacity(0.7);
+    font-size: 0.9em;
 }
 
 .search-results-none {

web/sass-files/sass/partials/_sidebar--right.scss

@@ -7,13 +7,7 @@
     right: 0px;
     padding: 0;
     background: #fff;
-    @include single-transition(transform, 0.5s, ease);
     @include translateX(400px);
-
-    &.move--left {
-        @include translateX(0);
-    }
-
     .post-body {
 
         img {

web/templates/head.html

@@ -36,6 +36,7 @@
     <script src="/static/js/bootstrap-3.3.5.js"></script>
     <script src="/static/js/bootstrap-colorpicker.min.js"></script>
     <script src="/static/js/react-bootstrap-0.28.1.js"></script>
+    <script src="/static/js/velocity.min.js"></script>
     <script src="/static/js/perfect-scrollbar-0.6.7.jquery.min.js"></script>
     <script src="/static/js/jquery-dragster/jquery.dragster.js"></script>
     <script src="/static/js/babel-polyfill-6.1.18.min.js"></script>