From b1a7225f30e8443f87830a578c306b8f93e6587f Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Fri, 25 Sep 2015 16:38:11 +0500 Subject: [PATCH 1/4] Bug fixes and UI improvements for multiple tickets --- web/react/components/channel_loader.jsx | 2 + web/react/components/post_info.jsx | 2 + web/react/components/user_profile.jsx | 1 - web/react/utils/utils.jsx | 3 +- web/sass-files/sass/partials/_markdown.scss | 38 +++++++++++++++++-- web/sass-files/sass/partials/_mentions.scss | 4 -- web/sass-files/sass/partials/_post.scss | 7 ++-- web/sass-files/sass/partials/_responsive.scss | 2 +- web/sass-files/sass/partials/_videos.scss | 9 ++--- web/templates/channel.html | 1 - 10 files changed, 49 insertions(+), 20 deletions(-) diff --git a/web/react/components/channel_loader.jsx b/web/react/components/channel_loader.jsx index 39c86405c9..ac4f57ce2a 100644 --- a/web/react/components/channel_loader.jsx +++ b/web/react/components/channel_loader.jsx @@ -84,6 +84,8 @@ export default class ChannelLoader extends React.Component { }); }); + $('body').tooltip({selector: '[data-toggle=tooltip]', trigger: 'hover click'}); + $('body').on('mouseenter mouseleave', '.post', function mouseOver(ev) { if (ev.type === 'mouseenter') { $(this).parent('div').prev('.date-separator, .new-separator').addClass('hovered--after'); diff --git a/web/react/components/post_info.jsx b/web/react/components/post_info.jsx index c38edf6a24..8ad2336fb0 100644 --- a/web/react/components/post_info.jsx +++ b/web/react/components/post_info.jsx @@ -153,7 +153,9 @@ export default class PostInfo extends React.Component {
  • diff --git a/web/react/components/user_profile.jsx b/web/react/components/user_profile.jsx index c5d028d310..61bf647ca5 100644 --- a/web/react/components/user_profile.jsx +++ b/web/react/components/user_profile.jsx @@ -32,7 +32,6 @@ export default class UserProfile extends React.Component { componentDidMount() { UserStore.addChangeListener(this.onChange); $('#profile_' + this.uniqueId).popover({placement: 'right', container: 'body', trigger: 'hover', html: true, delay: {show: 200, hide: 100}}); - $('body').tooltip({selector: '[data-toggle=tooltip]', trigger: 'hover click'}); } componentWillUnmount() { UserStore.removeChangeListener(this.onChange); diff --git a/web/react/utils/utils.jsx b/web/react/utils/utils.jsx index 50438c6cf3..fba57e8e64 100644 --- a/web/react/utils/utils.jsx +++ b/web/react/utils/utils.jsx @@ -616,8 +616,9 @@ export function applyTheme(theme) { } if (theme.centerChannelColor) { - changeCss('.app__content', 'color:' + theme.centerChannelColor, 2); + changeCss('.app__content, .post-create__container .post-create-body .btn-file', 'color:' + theme.centerChannelColor, 1); changeCss('#post-create', 'color:' + theme.centerChannelColor, 2); + changeCss('.post-body hr', 'background:' + theme.centerChannelColor, 1); changeCss('.channel-header .heading', 'color:' + theme.centerChannelColor, 1); changeCss('.markdown__table tbody tr:nth-child(2n)', 'background:' + changeOpacity(theme.centerChannelColor, 0.07), 1); changeCss('.channel-header__info>div.dropdown .header-dropdown__icon', 'color:' + changeOpacity(theme.centerChannelColor, 0.8), 1); diff --git a/web/sass-files/sass/partials/_markdown.scss b/web/sass-files/sass/partials/_markdown.scss index de92e9d205..1225863542 100644 --- a/web/sass-files/sass/partials/_markdown.scss +++ b/web/sass-files/sass/partials/_markdown.scss @@ -2,10 +2,20 @@ font-weight: 700; } .markdown__paragraph-inline { - display: inline; - + .markdown__paragraph-inline { - margin-left: 4px; - } + display: inline; + + .markdown__paragraph-inline { + margin-left: 4px; + } +} +.post-body { + hr { + height: 4px; + padding: 0; + margin: 15px 0 16px; + background-color: #e7e7e7; + border: 0 none; + @include opacity(0.2); + } } .markdown__table { background: #fff; @@ -21,6 +31,26 @@ } } } +blockquote { + border: none; + position: relative; + font-size: 16px; + padding: 10px 10px 10px 38px; + margin-bottom: 0; + &:before { + font-family: FontAwesome; + font-weight: normal; + font-style: normal; + display: inline-block; + text-decoration: inherit; + content: "\f10d"; + left: 8px; + top: 5px; + position: absolute; + font-size: 20px; + @include opacity(0.6); + } +} pre { border: none; background-color: #f7f7f7; diff --git a/web/sass-files/sass/partials/_mentions.scss b/web/sass-files/sass/partials/_mentions.scss index a86cb8a73d..83cdde53bb 100644 --- a/web/sass-files/sass/partials/_mentions.scss +++ b/web/sass-files/sass/partials/_mentions.scss @@ -66,8 +66,4 @@ .mention-highlight { background-color:#fff2bb; color: #333; -} - -.mention-link { - color:$primary-color; } \ No newline at end of file diff --git a/web/sass-files/sass/partials/_post.scss b/web/sass-files/sass/partials/_post.scss index e362e8f7a8..a1958af3b9 100644 --- a/web/sass-files/sass/partials/_post.scss +++ b/web/sass-files/sass/partials/_post.scss @@ -185,7 +185,7 @@ body.ios { .post-create__container { form { width: 100%; - padding: 0 1em; + padding: 10px 1em 0 1em; margin: 0; } .post-create-body { @@ -229,12 +229,13 @@ body.ios { right: 0; position: absolute; top: 1px; - color: #999; + color: #444; + @include opacity(0.5); @include single-transition(all, 0.15s); font-size: 16px; padding: 7px 9px 6px; &:hover, &:active { - color: #444; + @include opacity(0.9); box-shadow: none; } } diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/partials/_responsive.scss index d29c653ffe..e0b35d0bfa 100644 --- a/web/sass-files/sass/partials/_responsive.scss +++ b/web/sass-files/sass/partials/_responsive.scss @@ -417,7 +417,7 @@ padding: 0 1em; } form { - padding: 0; + padding: 10px 0 0 0; } .post-create-body { padding-bottom: 10px; diff --git a/web/sass-files/sass/partials/_videos.scss b/web/sass-files/sass/partials/_videos.scss index de18aa08af..6d5d929beb 100644 --- a/web/sass-files/sass/partials/_videos.scss +++ b/web/sass-files/sass/partials/_videos.scss @@ -19,7 +19,7 @@ } .video-type { - color:grey; + @include opacity(0.8); font-size:15px; font-weight:200; margin:0px; @@ -27,10 +27,9 @@ } .video-uploader { - font-size:15px; - margin-top:3px; - margin-bottom:0px; - padding:0px; + font-size: 15px; + margin: 18px 0 15px; + font-weight: 600; } .video-title { diff --git a/web/templates/channel.html b/web/templates/channel.html index 2af94e415f..b5fe4de011 100644 --- a/web/templates/channel.html +++ b/web/templates/channel.html @@ -53,7 +53,6 @@
    From 6d87e9cd024b3fe19c63aaf1a5aaf6861189e47e Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Fri, 25 Sep 2015 16:44:36 +0500 Subject: [PATCH 2/4] Improving uploader name and video type for videos --- web/sass-files/sass/partials/_videos.scss | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/web/sass-files/sass/partials/_videos.scss b/web/sass-files/sass/partials/_videos.scss index 6d5d929beb..40d0157c17 100644 --- a/web/sass-files/sass/partials/_videos.scss +++ b/web/sass-files/sass/partials/_videos.scss @@ -21,15 +21,13 @@ .video-type { @include opacity(0.8); font-size:15px; - font-weight:200; margin:0px; padding:0px; } .video-uploader { - font-size: 15px; - margin: 18px 0 15px; - font-weight: 600; + font-size: 13px; + margin: 0 0 15px; } .video-title { From bba626430485abb54cfd89140754546c61a81d6a Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Fri, 25 Sep 2015 16:52:48 +0500 Subject: [PATCH 3/4] Adding margin bot to videos --- web/sass-files/sass/partials/_videos.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/web/sass-files/sass/partials/_videos.scss b/web/sass-files/sass/partials/_videos.scss index 40d0157c17..9e1ce29b7a 100644 --- a/web/sass-files/sass/partials/_videos.scss +++ b/web/sass-files/sass/partials/_videos.scss @@ -1,6 +1,7 @@ .video-div { position:relative; max-width: 480px; + margin-bottom: 8px; .video-thumbnail { max-width: 100%; height: auto; From 3cf729dcaa27bb98c8eae963a86f5a79fa0b20be Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Fri, 25 Sep 2015 18:54:02 +0500 Subject: [PATCH 4/4] Using react tooltip for timestamp in center channel instead of normal bootstrap --- web/react/components/channel_loader.jsx | 2 -- web/react/components/post_info.jsx | 18 +++++++++++------- web/react/components/user_profile.jsx | 1 + web/templates/channel.html | 1 + 4 files changed, 13 insertions(+), 9 deletions(-) diff --git a/web/react/components/channel_loader.jsx b/web/react/components/channel_loader.jsx index ac4f57ce2a..39c86405c9 100644 --- a/web/react/components/channel_loader.jsx +++ b/web/react/components/channel_loader.jsx @@ -84,8 +84,6 @@ export default class ChannelLoader extends React.Component { }); }); - $('body').tooltip({selector: '[data-toggle=tooltip]', trigger: 'hover click'}); - $('body').on('mouseenter mouseleave', '.post', function mouseOver(ev) { if (ev.type === 'mouseenter') { $(this).parent('div').prev('.date-separator, .new-separator').addClass('hovered--after'); diff --git a/web/react/components/post_info.jsx b/web/react/components/post_info.jsx index 8ad2336fb0..824e7ef397 100644 --- a/web/react/components/post_info.jsx +++ b/web/react/components/post_info.jsx @@ -5,6 +5,8 @@ var UserStore = require('../stores/user_store.jsx'); var utils = require('../utils/utils.jsx'); var Constants = require('../utils/constants.jsx'); +var Tooltip = ReactBootstrap.Tooltip; +var OverlayTrigger = ReactBootstrap.OverlayTrigger; export default class PostInfo extends React.Component { constructor(props) { @@ -148,17 +150,19 @@ export default class PostInfo extends React.Component { var dropdown = this.createDropdown(); + let tooltip = {utils.displayDate(post.create_at)} at ${utils.displayTime(post.create_at)}; + return (
    • - + +
    • diff --git a/web/react/components/user_profile.jsx b/web/react/components/user_profile.jsx index 61bf647ca5..c5d028d310 100644 --- a/web/react/components/user_profile.jsx +++ b/web/react/components/user_profile.jsx @@ -32,6 +32,7 @@ export default class UserProfile extends React.Component { componentDidMount() { UserStore.addChangeListener(this.onChange); $('#profile_' + this.uniqueId).popover({placement: 'right', container: 'body', trigger: 'hover', html: true, delay: {show: 200, hide: 100}}); + $('body').tooltip({selector: '[data-toggle=tooltip]', trigger: 'hover click'}); } componentWillUnmount() { UserStore.removeChangeListener(this.onChange); diff --git a/web/templates/channel.html b/web/templates/channel.html index b5fe4de011..2af94e415f 100644 --- a/web/templates/channel.html +++ b/web/templates/channel.html @@ -53,6 +53,7 @@