From 901b830f2d5809d55890508b99ef5a868aace4e4 Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Mon, 7 Dec 2015 21:18:03 +0500 Subject: Multiple UI Improvements --- web/react/components/access_history_modal.jsx | 4 ++- web/react/components/activity_log_modal.jsx | 4 ++- web/react/components/channel_invite_modal.jsx | 6 ++-- .../components/channel_notifications_modal.jsx | 2 +- web/react/components/delete_channel_modal.jsx | 4 ++- web/react/components/delete_post_modal.jsx | 2 +- web/react/components/edit_channel_header_modal.jsx | 2 +- web/react/components/invite_member_modal.jsx | 2 +- web/react/components/post_info.jsx | 2 +- web/react/components/rhs_root_post.jsx | 2 +- web/react/components/team_members_modal.jsx | 4 ++- .../user_settings/manage_outgoing_hooks.jsx | 2 +- .../user_settings/user_settings_modal.jsx | 4 ++- web/react/utils/utils.jsx | 1 + web/sass-files/sass/partials/_base.scss | 2 ++ web/sass-files/sass/partials/_get-link.scss | 2 +- web/sass-files/sass/partials/_headers.scss | 1 + web/sass-files/sass/partials/_modal.scss | 4 +++ web/sass-files/sass/partials/_post.scss | 42 +++++++++++++++------- web/sass-files/sass/partials/_responsive.scss | 3 +- web/sass-files/sass/partials/_settings.scss | 12 +++++-- web/sass-files/sass/partials/_sidebar--left.scss | 2 +- web/templates/channel.html | 2 +- 23 files changed, 78 insertions(+), 33 deletions(-) diff --git a/web/react/components/access_history_modal.jsx b/web/react/components/access_history_modal.jsx index deef92a54..85c28ca5c 100644 --- a/web/react/components/access_history_modal.jsx +++ b/web/react/components/access_history_modal.jsx @@ -32,9 +32,11 @@ export default class AccessHistoryModal extends React.Component { onShow() { AsyncClient.getAudits(); - $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 50); if ($(window).width() > 768) { $(ReactDOM.findDOMNode(this.refs.modalBody)).perfectScrollbar(); + $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 200); + } else { + $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 150); } } onHide() { diff --git a/web/react/components/activity_log_modal.jsx b/web/react/components/activity_log_modal.jsx index 200f4d724..f5341c0bc 100644 --- a/web/react/components/activity_log_modal.jsx +++ b/web/react/components/activity_log_modal.jsx @@ -51,9 +51,11 @@ export default class ActivityLogModal extends React.Component { onShow() { AsyncClient.getSessions(); - $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 50); if ($(window).width() > 768) { $(ReactDOM.findDOMNode(this.refs.modalBody)).perfectScrollbar(); + $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 200); + } else { + $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 150); } } onHide() { diff --git a/web/react/components/channel_invite_modal.jsx b/web/react/components/channel_invite_modal.jsx index 56e2e53f9..749371c39 100644 --- a/web/react/components/channel_invite_modal.jsx +++ b/web/react/components/channel_invite_modal.jsx @@ -61,6 +61,9 @@ export default class ChannelInviteModal extends React.Component { onShow() { if ($(window).width() > 768) { $(ReactDOM.findDOMNode(this.refs.modalBody)).perfectScrollbar(); + $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 200); + } else { + $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 150); } } componentDidUpdate(prevProps) { @@ -139,11 +142,10 @@ export default class ChannelInviteModal extends React.Component { onHide={this.props.onHide} > - {'Add New Members to '}{this.props.channel.display_nam} + {'Add New Members to '}{this.props.channel.display_name} {inviteError} {content} diff --git a/web/react/components/channel_notifications_modal.jsx b/web/react/components/channel_notifications_modal.jsx index 887589468..e70d3a634 100644 --- a/web/react/components/channel_notifications_modal.jsx +++ b/web/react/components/channel_notifications_modal.jsx @@ -335,7 +335,7 @@ export default class ChannelNotificationsModal extends React.Component { onHide={this.props.onHide} > - {'Notification Preferences for '}{this.props.channel.display_name} + {'Notification Preferences for '}{this.props.channel.display_name}
diff --git a/web/react/components/delete_channel_modal.jsx b/web/react/components/delete_channel_modal.jsx index 99bae962a..1255067fd 100644 --- a/web/react/components/delete_channel_modal.jsx +++ b/web/react/components/delete_channel_modal.jsx @@ -39,7 +39,9 @@ export default class DeleteChannelModal extends React.Component { show={this.props.show} onHide={this.props.onHide} > - {'Confirm DELETE Channel'} + +

{'Confirm DELETE Channel'}

+ {`Are you sure you wish to delete the ${this.props.channel.display_name} ${channelTerm}?`} diff --git a/web/react/components/delete_post_modal.jsx b/web/react/components/delete_post_modal.jsx index 5e89a0893..827654e1b 100644 --- a/web/react/components/delete_post_modal.jsx +++ b/web/react/components/delete_post_modal.jsx @@ -131,7 +131,7 @@ export default class DeletePostModal extends React.Component { onHide={this.handleHide} > - {`Confirm ${postTerm} Delete`} + {`Confirm ${postTerm} Delete`} {`Are you sure you want to delete this ${postTerm.toLowerCase()}?`} diff --git a/web/react/components/edit_channel_header_modal.jsx b/web/react/components/edit_channel_header_modal.jsx index 5529a419d..209e30fcc 100644 --- a/web/react/components/edit_channel_header_modal.jsx +++ b/web/react/components/edit_channel_header_modal.jsx @@ -84,7 +84,7 @@ export default class EditChannelHeaderModal extends React.Component { onHide={this.onHide} > - {'Edit Header for ' + this.props.channel.display_name} + {'Edit Header for ' + this.props.channel.display_name}

{'Edit the text appearing next to the channel name in the channel header.'}

diff --git a/web/react/components/invite_member_modal.jsx b/web/react/components/invite_member_modal.jsx index 25a915e22..649ec7321 100644 --- a/web/react/components/invite_member_modal.jsx +++ b/web/react/components/invite_member_modal.jsx @@ -143,7 +143,7 @@ export default class InviteMemberModal extends React.Component { componentDidUpdate(prevProps, prevState) { if (!prevState.show && this.state.show) { - $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 50); + $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 200); if ($(window).width() > 768) { $(ReactDOM.findDOMNode(this.refs.modalBody)).perfectScrollbar(); } diff --git a/web/react/components/post_info.jsx b/web/react/components/post_info.jsx index 0b8b07d8c..21683bb01 100644 --- a/web/react/components/post_info.jsx +++ b/web/react/components/post_info.jsx @@ -196,7 +196,7 @@ export default class PostInfo extends React.Component { type='text' readOnly='true' ref='permalinkbox' - className='permalink-text form-control no-resize min-height input-large' + className='permalink-text form-control no-resize' rows='1' value={permalink} /> diff --git a/web/react/components/rhs_root_post.jsx b/web/react/components/rhs_root_post.jsx index 0a37a6803..8178c5902 100644 --- a/web/react/components/rhs_root_post.jsx +++ b/web/react/components/rhs_root_post.jsx @@ -209,7 +209,7 @@ export default class RhsRootPost extends React.Component {
  • -
    +
    {rootOptions}
    • diff --git a/web/react/components/team_members_modal.jsx b/web/react/components/team_members_modal.jsx index eed4a1f19..27224c283 100644 --- a/web/react/components/team_members_modal.jsx +++ b/web/react/components/team_members_modal.jsx @@ -26,9 +26,11 @@ export default class TeamMembersModal extends React.Component { } onShow() { - $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 50); if ($(window).width() > 768) { $(ReactDOM.findDOMNode(this.refs.modalBody)).perfectScrollbar(); + $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 200); + } else { + $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 150); } } diff --git a/web/react/components/user_settings/manage_outgoing_hooks.jsx b/web/react/components/user_settings/manage_outgoing_hooks.jsx index 9c88bb819..9c0fe3709 100644 --- a/web/react/components/user_settings/manage_outgoing_hooks.jsx +++ b/web/react/components/user_settings/manage_outgoing_hooks.jsx @@ -188,7 +188,7 @@ export default class ManageOutgoingHooks extends React.Component { key={hook.id} className='webhook__item' > -
    +
    {'URLs: '}{hook.callback_urls.join(', ')}
    {channelDiv} diff --git a/web/react/components/user_settings/user_settings_modal.jsx b/web/react/components/user_settings/user_settings_modal.jsx index 97c601b5e..36e1aa217 100644 --- a/web/react/components/user_settings/user_settings_modal.jsx +++ b/web/react/components/user_settings/user_settings_modal.jsx @@ -47,9 +47,11 @@ export default class UserSettingsModal extends React.Component { } handleShow() { - $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 50); if ($(window).width() > 768) { $(ReactDOM.findDOMNode(this.refs.modalBody)).perfectScrollbar(); + $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 200); + } else { + $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 50); } } diff --git a/web/react/utils/utils.jsx b/web/react/utils/utils.jsx index f80da8415..eb1d36ced 100644 --- a/web/react/utils/utils.jsx +++ b/web/react/utils/utils.jsx @@ -576,6 +576,7 @@ export function applyTheme(theme) { if (theme.sidebarHeaderTextColor) { changeCss('.sidebar--left .team__header .header__info, .sidebar--menu .team__header .header__info', 'color:' + theme.sidebarHeaderTextColor, 1); + changeCss('.sidebar--left .team__header .navbar-right .dropdown__icon, .sidebar--menu .team__header .navbar-right .dropdown__icon', 'fill:' + theme.sidebarHeaderTextColor, 1); changeCss('.sidebar--left .team__header .user__name, .sidebar--menu .team__header .user__name', 'color:' + changeOpacity(theme.sidebarHeaderTextColor, 0.8), 1); changeCss('.sidebar--left .team__header:hover .user__name, .sidebar--menu .team__header:hover .user__name', 'color:' + theme.sidebarHeaderTextColor, 1); changeCss('.modal .modal-header .modal-title, .modal .modal-header .modal-title .name, .modal .modal-header button.close', 'color:' + theme.sidebarHeaderTextColor, 1); diff --git a/web/sass-files/sass/partials/_base.scss b/web/sass-files/sass/partials/_base.scss index 926c289e6..61ad186e0 100644 --- a/web/sass-files/sass/partials/_base.scss +++ b/web/sass-files/sass/partials/_base.scss @@ -145,6 +145,7 @@ select { .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control { cursor: auto; background: rgba(#fff, 0.1); + color: inherit; } .form-group { @@ -210,6 +211,7 @@ select { .alert { padding: 8px 12px; + @include border-radius(2px); } .emoji { diff --git a/web/sass-files/sass/partials/_get-link.scss b/web/sass-files/sass/partials/_get-link.scss index 8910ff115..d4365d1e6 100644 --- a/web/sass-files/sass/partials/_get-link.scss +++ b/web/sass-files/sass/partials/_get-link.scss @@ -4,5 +4,5 @@ display: inline-block; float: left; padding: 4px 10px; - margin: 3px 0 0 10px; + margin: 1px 0 0 10px; } \ No newline at end of file diff --git a/web/sass-files/sass/partials/_headers.scss b/web/sass-files/sass/partials/_headers.scss index f8c7a65af..bd0392a52 100644 --- a/web/sass-files/sass/partials/_headers.scss +++ b/web/sass-files/sass/partials/_headers.scss @@ -293,6 +293,7 @@ } .channel-header__links { + font-family: 'Open Sans', sans-serif; height: 30px; width: 24px; line-height: 26px; diff --git a/web/sass-files/sass/partials/_modal.scss b/web/sass-files/sass/partials/_modal.scss index 08d1d8a75..55725abe0 100644 --- a/web/sass-files/sass/partials/_modal.scss +++ b/web/sass-files/sass/partials/_modal.scss @@ -35,6 +35,9 @@ text-align: right; padding-right: 0; } + .team-member-list { + width: 100%; + } .remove__member { float: right; color: #999; @@ -95,6 +98,7 @@ background: rgba(0, 0, 0, 0.1); } span { + font-family: 'Open Sans', sans-serif; line-height: 10px; } } diff --git a/web/sass-files/sass/partials/_post.scss b/web/sass-files/sass/partials/_post.scss index 3b7184550..2ddde0c50 100644 --- a/web/sass-files/sass/partials/_post.scss +++ b/web/sass-files/sass/partials/_post.scss @@ -369,9 +369,9 @@ body.ios { } } - &.post--highlight { - background-color: beige; - } + &.post--highlight { + background-color: beige; + } &.post--system .post__header .col__name { display: none; @@ -551,7 +551,23 @@ body.ios { position: absolute; right: 0; top: 30px; - width: 60px; + width: 65px; + } + + .permalink-popover { + min-width: 0; + + .popover-content { + padding: 5px; + } + + .form-control, .btn { + font-size: 13px; + height: 30px; + padding: 0 8px; + line-height: 30px; + } + } } @@ -569,6 +585,8 @@ body.ios { .dropdown { display: inline-block; visibility: hidden; + position: absolute; + right: 0; top: -1px; .dropdown-menu { @@ -602,11 +620,11 @@ body.ios { word-wrap: break-word; padding: 0.2em 0.5em 0em; @include legacy-pie-clearfix; - width: calc(100% - 70px); + width: calc(100% - 75px); img { - max-height: 400px; - } + max-height: 400px; + } ul { padding: 5px 0 0 20px; @@ -679,11 +697,11 @@ body.ios { color: #999; } - .permalink-icon { + .permalink-icon { display: inline-block; color: $primary-color; visibility: hidden; - } + } .comment-icon__container { fill: $primary-color; @@ -828,10 +846,10 @@ body.ios { } .permalink-text { - overflow: hidden; + overflow: hidden; } .permalink-popover { - min-width: 320px; - margin-left: 50px !important; + min-width: 320px; + margin-left: 50px !important; } diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/partials/_responsive.scss index ba2fe2ffe..bdf04ff82 100644 --- a/web/sass-files/sass/partials/_responsive.scss +++ b/web/sass-files/sass/partials/_responsive.scss @@ -107,7 +107,8 @@ &:after { font-size: 20px; - content: '...' + content: '...'; + top: -3px; } } diff --git a/web/sass-files/sass/partials/_settings.scss b/web/sass-files/sass/partials/_settings.scss index 8c6214224..ee0c40067 100644 --- a/web/sass-files/sass/partials/_settings.scss +++ b/web/sass-files/sass/partials/_settings.scss @@ -40,7 +40,7 @@ font-weight: 600; } - .no-padding--left { + .no-padding--left { padding-left: 0; } .padding-top { @@ -313,17 +313,23 @@ .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 { position:absolute; - right:15px; - top:13px; + right: 15px; + top: 8px; } } diff --git a/web/sass-files/sass/partials/_sidebar--left.scss b/web/sass-files/sass/partials/_sidebar--left.scss index 7b3b8fdf9..d5bf0e503 100644 --- a/web/sass-files/sass/partials/_sidebar--left.scss +++ b/web/sass-files/sass/partials/_sidebar--left.scss @@ -110,6 +110,7 @@ } } .btn-close { + font-family: 'Open Sans', sans-serif; position: absolute; right: 15px; top: -1px; @@ -142,7 +143,6 @@ } } a, a:hover, a:focus { - padding-right: 10px; background-color: rgba(black, 0.1); border-radius: 0; font-weight: 400; diff --git a/web/templates/channel.html b/web/templates/channel.html index a5c0354a3..8abbe36df 100644 --- a/web/templates/channel.html +++ b/web/templates/channel.html @@ -30,7 +30,7 @@ window.setup_channel_page({{ .Props }}, {{ .Team }}, {{ .Channel }}, {{ .User }} if($(window).height() > 1200){ modals.css('max-height', 1000); } else { - modals.css('max-height', $(window).height() - 50); + modals.css('max-height', $(window).height() - 200); } modals.perfectScrollbar(); -- cgit v1.2.3-1-g7c22 From f5c72e23d594b2bc7a0ffe37860d4dda2a1a2b48 Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Mon, 7 Dec 2015 22:09:46 +0500 Subject: Updating archive footer --- web/sass-files/sass/partials/_content.scss | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/web/sass-files/sass/partials/_content.scss b/web/sass-files/sass/partials/_content.scss index 166995632..da75bc61b 100644 --- a/web/sass-files/sass/partials/_content.scss +++ b/web/sass-files/sass/partials/_content.scss @@ -36,9 +36,13 @@ #archive-link-home { @include flex(0 0 auto); cursor: pointer; - padding: 10px; + padding: 10px 20px; font-size: 13px; + .fa { + @include opacity(0.7); + } + a { color: inherit; } -- cgit v1.2.3-1-g7c22 From 3265a545cf3fbab187e5968772c5d733a7d2bfb5 Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Tue, 8 Dec 2015 12:23:52 +0500 Subject: Fixing es lint error --- web/react/components/channel_invite_modal.jsx | 5 ----- 1 file changed, 5 deletions(-) diff --git a/web/react/components/channel_invite_modal.jsx b/web/react/components/channel_invite_modal.jsx index 749371c39..7dac39942 100644 --- a/web/react/components/channel_invite_modal.jsx +++ b/web/react/components/channel_invite_modal.jsx @@ -106,11 +106,6 @@ export default class ChannelInviteModal extends React.Component { ); } render() { - var maxHeight = 1000; - if (Utils.windowHeight() <= 1200) { - maxHeight = Utils.windowHeight() - 300; - } - var inviteError = null; if (this.state.inviteError) { inviteError = (); -- cgit v1.2.3-1-g7c22