diff options
author | Joram Wilander <jwawilander@gmail.com> | 2015-11-19 13:42:57 -0500 |
---|---|---|
committer | Joram Wilander <jwawilander@gmail.com> | 2015-11-19 13:42:57 -0500 |
commit | 71ae3c07fa15129f1b5d88bb7015e92136788416 (patch) | |
tree | 06093010fce102785fc7c50032bf5aacad6c0a6a /web | |
parent | 520d792fb4a2382bdff526ea14e6cde149d745d4 (diff) | |
parent | 975a5dc759ab0f98f3db01b2a355416b0f687e42 (diff) | |
download | chat-71ae3c07fa15129f1b5d88bb7015e92136788416.tar.gz chat-71ae3c07fa15129f1b5d88bb7015e92136788416.tar.bz2 chat-71ae3c07fa15129f1b5d88bb7015e92136788416.zip |
Merge pull request #1468 from asaadmahmoodspin/ui-improvements
Multiple UI Improvements
Diffstat (limited to 'web')
-rw-r--r-- | web/react/components/post_info.jsx | 17 | ||||
-rw-r--r-- | web/react/utils/utils.jsx | 6 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_base.scss | 4 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_post.scss | 11 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_responsive.scss | 51 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_tooltips.scss | 5 | ||||
-rw-r--r-- | web/sass-files/sass/styles.scss | 3 |
7 files changed, 89 insertions, 8 deletions
diff --git a/web/react/components/post_info.jsx b/web/react/components/post_info.jsx index 5446fca7a..322834f07 100644 --- a/web/react/components/post_info.jsx +++ b/web/react/components/post_info.jsx @@ -74,6 +74,23 @@ export default class PostInfo extends React.Component { ); } + if (this.props.allowReply === 'true') { + dropdownContents.push( + <li + key='replyLink' + role='presentation' + > + <a + className='reply-link visible-xs theme' + href='#' + onClick={this.props.handleCommentClick} + > + {'Reply'} + </a> + </li> + ); + } + if (dropdownContents.length === 0) { return ''; } diff --git a/web/react/utils/utils.jsx b/web/react/utils/utils.jsx index bf40d8c65..cd347f7d6 100644 --- a/web/react/utils/utils.jsx +++ b/web/react/utils/utils.jsx @@ -561,8 +561,6 @@ export function applyTheme(theme) { if (theme.sidebarTextActiveColor) { changeCss('.sidebar--left .nav-pills__container li.active a, .sidebar--left .nav-pills__container li.active a:hover, .sidebar--left .nav-pills__container li.active a:focus, .settings-modal .nav-pills>li.active a, .settings-modal .nav-pills>li.active a:hover, .settings-modal .nav-pills>li.active a:active', 'color:' + theme.sidebarTextActiveColor, 2); changeCss('.sidebar--left .nav li.active a, .sidebar--left .nav li.active a:hover, .sidebar--left .nav li.active a:focus', 'background:' + changeOpacity(theme.sidebarTextActiveColor, 0.1), 1); - changeCss('.search-help-popover .search-autocomplete__item:hover', 'background:' + changeOpacity(theme.sidebarTextActiveColor, 0.05), 1); - changeCss('.search-help-popover .search-autocomplete__item.selected', 'background:' + changeOpacity(theme.sidebarTextActiveColor, 0.15), 1); } if (theme.sidebarHeaderBg) { @@ -656,8 +654,10 @@ export function applyTheme(theme) { changeCss('.date-separator.hovered--before:after, .date-separator.hovered--after:before, .new-separator.hovered--after:before, .new-separator.hovered--before:after', 'background:' + changeOpacity(theme.centerChannelColor, 0.07), 1); changeCss('.command-name:hover, .mentions-name:hover, .mentions-focus, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover, .bot-indicator', 'background:' + changeOpacity(theme.centerChannelColor, 0.15), 1); changeCss('code', 'background:' + changeOpacity(theme.centerChannelColor, 0.1), 1); - changeCss('.post.current--user:hover .post__body ', 'background: none;', 1); + changeCss('@media(min-width: 960px){.post.current--user:hover .post__body ', 'background: none;', 1); changeCss('.sidebar--right', 'color:' + theme.centerChannelColor, 2); + changeCss('.search-help-popover .search-autocomplete__item:hover', 'background:' + changeOpacity(theme.centerChannelColor, 0.05), 1); + changeCss('.search-help-popover .search-autocomplete__item.selected', 'background:' + changeOpacity(theme.centerChannelColor, 0.15), 1); } if (theme.newMessageSeparator) { diff --git a/web/sass-files/sass/partials/_base.scss b/web/sass-files/sass/partials/_base.scss index c5b1a7425..2fc63443e 100644 --- a/web/sass-files/sass/partials/_base.scss +++ b/web/sass-files/sass/partials/_base.scss @@ -122,6 +122,10 @@ a:focus, a:hover { } } +select { + -webkit-appearance: none; +} + .form-control { @include border-radius(2px); &:focus { diff --git a/web/sass-files/sass/partials/_post.scss b/web/sass-files/sass/partials/_post.scss index 743a76693..99e985b0c 100644 --- a/web/sass-files/sass/partials/_post.scss +++ b/web/sass-files/sass/partials/_post.scss @@ -382,9 +382,11 @@ body.ios { } span { + p:last-child { margin-bottom: 0.5em; } + } &.post--root { @@ -508,6 +510,7 @@ body.ios { max-width: 1000px; display: table; width: 100%; + table-layout: fixed; > div { display: table-cell; @@ -532,7 +535,7 @@ body.ios { position: absolute; right: 0; top: 30px; - width: 70px; + width: 60px; } } @@ -584,12 +587,15 @@ body.ios { word-wrap: break-word; padding: 0.2em 0.5em 0em; @include legacy-pie-clearfix; - width: calc(100% - 80px); + width: calc(100% - 70px); } .post__link { margin: 2px 0 5px; font-size: 13px; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; } .post__time { @@ -612,7 +618,6 @@ body.ios { } .comment-icon__container { - margin-right: 7px; fill: $primary-color; display: inline-block; visibility: hidden; diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/partials/_responsive.scss index 368027cbf..00fa7d817 100644 --- a/web/sass-files/sass/partials/_responsive.scss +++ b/web/sass-files/sass/partials/_responsive.scss @@ -57,10 +57,55 @@ .post { - .dropdown, .comment-icon__container { + &.same--root { + + &.same--user { + + .post__time { + display: none; + } + + } + + } + + .post-list__content & { + + &:hover { + background: transparent; + + .comment-icon__container { + visibility: hidden; + + &.icon--show { + visibility: visible; + } + + } + + } + + } + + .dropdown { visibility: visible; } + .post__dropdown { + line-height: 9px; + text-decoration: none; + width: 20px; + display: inline-block; + text-align: center; + height: 20px; + + &:after { + font-size: 20px; + content: '...' + } + + } + .post__img { width: 40px; @@ -232,7 +277,8 @@ } .modal-header { display: block; - position: fixed; + position: absolute; + top: 0; width: 100%; z-index: 5; } @@ -358,6 +404,7 @@ #navbar { .navbar-default { .navbar-header { + float: none; margin: 0 -15px; .dropdown__icon { background: url("../images/dropdown-icon.png"); diff --git a/web/sass-files/sass/partials/_tooltips.scss b/web/sass-files/sass/partials/_tooltips.scss new file mode 100644 index 000000000..e018cf13c --- /dev/null +++ b/web/sass-files/sass/partials/_tooltips.scss @@ -0,0 +1,5 @@ +#recentMentionsTooltip { + .tooltip-arrow { + margin-left: 10px; + } +}
\ No newline at end of file diff --git a/web/sass-files/sass/styles.scss b/web/sass-files/sass/styles.scss index 5c83d5c5b..01f654eec 100644 --- a/web/sass-files/sass/styles.scss +++ b/web/sass-files/sass/styles.scss @@ -41,6 +41,9 @@ @import "partials/tutorial"; @import "partials/statistics"; +// Elements +@import "partials/tooltips"; + // Responsive Css @import "partials/responsive"; |