mirror of
https://github.com/mattermost/mattermost.git
synced 2025-02-25 18:55:24 -06:00
Multiple UI Improvements (#4712)
* Multiple UI Improvements * Reverting modal animation
This commit is contained in:
Asaad Mahmood
committed by
Christopher Speller
Christopher Speller
parent
42f28886cc
commit
08c2d28942
@@ -35,6 +35,8 @@ class SwitchChannelSuggestion extends Suggestion {
|
||||
icon = <div className='status'><i className='fa fa-globe'/></div>;
|
||||
} else if (item.type === Constants.PRIVATE_CHANNEL) {
|
||||
icon = <div className='status'><i className='fa fa-lock'/></div>;
|
||||
} else {
|
||||
icon = <div className='status'><i className='fa fa-user'/></div>;
|
||||
}
|
||||
|
||||
return (
|
||||
|
||||
@@ -171,7 +171,7 @@ export default class ImportThemeModal extends React.Component {
|
||||
/>
|
||||
</p>
|
||||
<div className='form-group less'>
|
||||
<div className='col-sm-9'>
|
||||
<div className='col-sm-12'>
|
||||
<input
|
||||
type='text'
|
||||
className='form-control'
|
||||
|
||||
@@ -21,6 +21,11 @@
|
||||
width: 100%;
|
||||
z-index: 101;
|
||||
|
||||
.fa-user {
|
||||
position: relative;
|
||||
top: -1px;
|
||||
}
|
||||
|
||||
.mention--align {
|
||||
@include clearfix;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
@@ -17,6 +17,7 @@
|
||||
}
|
||||
|
||||
.popover-title {
|
||||
@include border-radius(0);
|
||||
background: alpha-color($black, .05);
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
@@ -60,6 +60,26 @@
|
||||
}
|
||||
}
|
||||
|
||||
.has-error {
|
||||
.help-block,
|
||||
.control-label,
|
||||
.radio,
|
||||
.checkbox,
|
||||
.radio-inline,
|
||||
.checkbox-inline {
|
||||
color: $red;
|
||||
}
|
||||
|
||||
&.radio,
|
||||
&.checkbox,
|
||||
&.radio-inline,
|
||||
&.checkbox-inline {
|
||||
label {
|
||||
color: $red;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.padding-top {
|
||||
padding-top: 7px;
|
||||
|
||||
|
||||
@@ -210,7 +210,6 @@
|
||||
|
||||
.channel-intro-text {
|
||||
margin-top: 35px;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -5,23 +5,6 @@
|
||||
max-height: 145px;
|
||||
}
|
||||
|
||||
.modal {
|
||||
.modal-dialog {
|
||||
&.new-channel__modal {
|
||||
position: fixed;
|
||||
@include translate3d(0, 100%, 0);
|
||||
}
|
||||
}
|
||||
|
||||
&.in {
|
||||
.modal-dialog {
|
||||
&.new-channel__modal {
|
||||
@include translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.webrtc__notification--rhs {
|
||||
left: auto;
|
||||
right: 0;
|
||||
@@ -43,7 +26,7 @@
|
||||
@include box-shadow(none);
|
||||
background: alpha-color($black, .8);
|
||||
border: none;
|
||||
height: calc(100% - 45px);
|
||||
height: calc(100% - 40px);
|
||||
max-width: 100%;
|
||||
position: fixed;
|
||||
top: 47px;
|
||||
@@ -598,6 +581,16 @@
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.nav-pills {
|
||||
> li {
|
||||
&:hover {
|
||||
a {
|
||||
background: transparent !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.display--content {
|
||||
.modal-header {
|
||||
display: none;
|
||||
@@ -802,7 +795,7 @@
|
||||
@include translate3d(0, 100%, 0);
|
||||
background: alpha-color($black, .9);
|
||||
display: block;
|
||||
height: calc(100% - 45px);
|
||||
height: calc(100% - 40px);
|
||||
left: 0;
|
||||
overflow: auto;
|
||||
padding: 1.4em 0 0;
|
||||
@@ -1011,11 +1004,11 @@
|
||||
padding-bottom: 25px;
|
||||
|
||||
ul {
|
||||
clear: both;
|
||||
background: #ffffff;
|
||||
background: $white;
|
||||
border-radius: 3px;
|
||||
top: 5px;
|
||||
clear: both;
|
||||
position: relative;
|
||||
top: 5px;
|
||||
|
||||
li {
|
||||
a {
|
||||
@@ -1031,21 +1024,21 @@
|
||||
|
||||
> a {
|
||||
font-size: 15px;
|
||||
margin: 0;
|
||||
line-height: 2.5;
|
||||
margin: 0;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: transparent;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
&.has-close {
|
||||
.btn-close {
|
||||
width: 40px;
|
||||
text-align: center;
|
||||
right: 0;
|
||||
display: block;
|
||||
@include opacity(.5);
|
||||
display: block;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
width: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,7 +6,7 @@ $primary-color--hover: darken($primary-color, 10%);
|
||||
$bg--gray: rgb(245, 245, 245);
|
||||
$white: rgb(255, 255, 255);
|
||||
$black: rgb(0, 0, 0);
|
||||
$red: rgb(229, 101, 101);
|
||||
$red: rgb(214, 73, 70);
|
||||
$yellow: rgb(255, 255, 0);
|
||||
$light-gray: rgba(0, 0, 0, .15);
|
||||
$gray: rgba(0, 0, 0, .3);
|
||||
|
||||
@@ -476,6 +476,7 @@ export function applyTheme(theme) {
|
||||
changeCss('.sidebar--left .add-channel-btn:hover, .sidebar--left .add-channel-btn:focus', 'color:' + theme.sidebarText);
|
||||
changeCss('.sidebar--left .status .offline--icon', 'fill:' + theme.sidebarText);
|
||||
changeCss('@media(max-width: 768px){.app__body .modal .settings-modal .settings-table .nav>li>a, .app__body .sidebar--menu .divider', 'border-color:' + changeOpacity(theme.sidebarText, 0.2));
|
||||
changeCss('@media(max-width: 768px){.sidebar--left .add-channel-btn:hover, .sidebar--left .add-channel-btn:focus', 'color:' + changeOpacity(theme.sidebarText, 0.6));
|
||||
}
|
||||
|
||||
if (theme.sidebarUnreadText) {
|
||||
@@ -484,7 +485,6 @@ export function applyTheme(theme) {
|
||||
|
||||
if (theme.sidebarTextHoverBg) {
|
||||
changeCss('.sidebar--left .nav-pills__container li>a:hover, .app__body .modal .settings-modal .nav-pills>li:hover a', 'background:' + theme.sidebarTextHoverBg);
|
||||
changeCss('@media(max-width: 768px){.app__body .modal .settings-modal .settings-table .nav>li:hover a', 'background:' + theme.sidebarTextHoverBg);
|
||||
}
|
||||
|
||||
if (theme.sidebarTextActiveBorder) {
|
||||
|
||||
Reference in New Issue
Block a user