mirror of
https://github.com/mattermost/mattermost.git
synced 2025-02-25 18:55:24 -06:00
Merge pull request #2086 from asaadmahmoodspin/ui-improvements
Multiple UI improvements
This commit is contained in:
Joram Wilander
@@ -75,10 +75,12 @@ export default class Analytics extends React.Component {
|
||||
}
|
||||
|
||||
let loading = (
|
||||
<FormattedMessage
|
||||
id='admin.analytics.loading'
|
||||
defaultMessage='Loading...'
|
||||
/>
|
||||
<h5>
|
||||
<FormattedMessage
|
||||
id='admin.analytics.loading'
|
||||
defaultMessage='Loading...'
|
||||
/>
|
||||
</h5>
|
||||
);
|
||||
|
||||
let firstRow;
|
||||
|
||||
@@ -419,7 +419,7 @@ export default class ChannelHeader extends React.Component {
|
||||
</ul>
|
||||
</div>
|
||||
<OverlayTrigger
|
||||
trigger={['hover', 'focus']}
|
||||
trigger={'click'}
|
||||
placement='bottom'
|
||||
overlay={popoverContent}
|
||||
ref='headerOverlay'
|
||||
|
||||
@@ -1,28 +1,28 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
background: $body-bg;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
&.white {
|
||||
background: #fff;
|
||||
> .container-fluid {
|
||||
overflow: auto;
|
||||
}
|
||||
.inner__wrap {
|
||||
> .row.content {
|
||||
min-height: 100%;
|
||||
margin-bottom: -89px;
|
||||
}
|
||||
}
|
||||
}
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
background: $body-bg;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
&.white {
|
||||
background: #fff;
|
||||
> .container-fluid {
|
||||
overflow: auto;
|
||||
}
|
||||
.inner__wrap {
|
||||
> .row.content {
|
||||
min-height: 100%;
|
||||
margin-bottom: -89px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.inner__wrap {
|
||||
@@ -46,175 +46,177 @@ body {
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
&.rounded {
|
||||
@include border-radius(100%);
|
||||
}
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
&.rounded {
|
||||
@include border-radius(100%);
|
||||
}
|
||||
}
|
||||
|
||||
.popover {
|
||||
@include border-radius(3px);
|
||||
color: #333;
|
||||
&.bottom, &.right, &.top, &.left {
|
||||
>.arrow:after {
|
||||
border-color: transparent;
|
||||
@include border-radius(3px);
|
||||
color: #333;
|
||||
&.bottom, &.right, &.top, &.left {
|
||||
>.arrow:after {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
.popover-title {
|
||||
background: rgba(black, 0.05);
|
||||
}
|
||||
.popover-content {
|
||||
p:last-child {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.popover-title {
|
||||
background: rgba(black, 0.05);
|
||||
}
|
||||
.popover-content {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
.divider {
|
||||
@include opacity(0.15);
|
||||
}
|
||||
> li > a {
|
||||
color: inherit;
|
||||
&:focus, &:hover {
|
||||
color: inherit;
|
||||
.divider {
|
||||
@include opacity(0.15);
|
||||
}
|
||||
> li > a {
|
||||
color: inherit;
|
||||
&:focus, &:hover {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.word-break--all {
|
||||
word-break: break-all;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
a {
|
||||
word-break: break-word;
|
||||
color: $primary-color;
|
||||
cursor: pointer;
|
||||
word-break: break-word;
|
||||
color: $primary-color;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
a:focus, a:hover {
|
||||
color: $primary-color;
|
||||
color: $primary-color;
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
.tooltip-inner {
|
||||
word-break: break-word;
|
||||
font-size: 13px;
|
||||
padding: 3px 10px 4px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.tooltip-inner {
|
||||
word-break: break-word;
|
||||
font-size: 13px;
|
||||
padding: 3px 10px 4px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.nopadding {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.text-danger, a.text-danger {
|
||||
color: #E05F5D;
|
||||
&:hover, &:focus {
|
||||
color: #E05F5D;
|
||||
}
|
||||
&:hover, &:focus {
|
||||
color: #E05F5D;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
&.btn-danger {
|
||||
color: #fff;
|
||||
&:hover, &:active, &:focus {
|
||||
color: #fff;
|
||||
&.btn-danger {
|
||||
color: #fff;
|
||||
&:hover, &:active, &:focus {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-control {
|
||||
@include border-radius(2px);
|
||||
&:focus {
|
||||
@include box-shadow(none);
|
||||
}
|
||||
&.no-padding {
|
||||
line-height: 32px;
|
||||
padding: 0;
|
||||
}
|
||||
&.no-resize {
|
||||
resize: none;
|
||||
}
|
||||
@include border-radius(2px);
|
||||
&:focus {
|
||||
@include box-shadow(none);
|
||||
}
|
||||
&.no-padding {
|
||||
line-height: 32px;
|
||||
padding: 0;
|
||||
}
|
||||
&.no-resize {
|
||||
resize: none;
|
||||
}
|
||||
}
|
||||
|
||||
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
|
||||
cursor: auto;
|
||||
background: rgba(#fff, 0.1);
|
||||
color: inherit;
|
||||
cursor: auto;
|
||||
background: rgba(#fff, 0.1);
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
&.form-group--small {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
&.form-group--small {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.error-panel {
|
||||
max-width: 275px;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 40px;
|
||||
z-index: 100;
|
||||
max-width: 275px;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 40px;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.nav>li>a:focus, .nav>li>a:hover {
|
||||
background: transparent;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.btn {
|
||||
@include single-transition(all, 0.25s, ease-in);
|
||||
@include border-radius(1px);
|
||||
&.btn-primary {
|
||||
border-color: transparent;
|
||||
background: $primary-color;
|
||||
&:hover, &:focus, &:active {
|
||||
background: $primary-color--hover;
|
||||
@include single-transition(all, 0.25s, ease-in);
|
||||
@include border-radius(1px);
|
||||
&.btn-primary {
|
||||
border-color: transparent;
|
||||
background: $primary-color;
|
||||
&:hover, &:focus, &:active {
|
||||
background: $primary-color--hover;
|
||||
}
|
||||
}
|
||||
&.btn-inactive {
|
||||
border-color: transparent;
|
||||
background: #707070;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
&.btn-inactive {
|
||||
border-color: transparent;
|
||||
background: #707070;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.relative-div {
|
||||
position:relative;
|
||||
position:relative;
|
||||
}
|
||||
|
||||
@-webkit-keyframes spin2 {
|
||||
from { -webkit-transform: rotate(0deg);}
|
||||
to { -webkit-transform: rotate(360deg);}
|
||||
from { -webkit-transform: rotate(0deg);}
|
||||
to { -webkit-transform: rotate(360deg);}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from { transform: scale(1) rotate(0deg);}
|
||||
to { transform: scale(1) rotate(360deg);}
|
||||
from { transform: scale(1) rotate(0deg);}
|
||||
to { transform: scale(1) rotate(360deg);}
|
||||
}
|
||||
|
||||
.glyphicon-refresh-animate {
|
||||
@include animation(spin .7s infinite linear);
|
||||
@include animation(spin .7s infinite linear);
|
||||
}
|
||||
|
||||
.black-bg {
|
||||
background-color: black !important;
|
||||
background-color: black !important;
|
||||
}
|
||||
|
||||
.white-bg {
|
||||
background-color: white !important;
|
||||
background-color: white !important;
|
||||
}
|
||||
|
||||
.alert {
|
||||
padding: 8px 12px;
|
||||
@include border-radius(2px);
|
||||
padding: 8px 12px;
|
||||
@include border-radius(2px);
|
||||
}
|
||||
|
||||
.emoji {
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
display: inline-block;
|
||||
margin-bottom: 0.25em;
|
||||
background-size: contain;
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
display: inline-block;
|
||||
margin-bottom: 0.25em;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
@@ -298,8 +298,13 @@
|
||||
height: 30px;
|
||||
width: 24px;
|
||||
line-height: 26px;
|
||||
margin-right: 10px;
|
||||
margin-right: 9px;
|
||||
font-size: 22px;
|
||||
.channel__wrap.move--left & {
|
||||
position: absolute;
|
||||
right: -400px;
|
||||
top: 14px;
|
||||
}
|
||||
> a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
|
||||
@@ -283,8 +283,8 @@ body.ios {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
bottom: 50px;
|
||||
right: 5px;
|
||||
bottom: 0;
|
||||
left: 10px;
|
||||
z-index: 50;
|
||||
@include opacity(0);
|
||||
@include single-transition(all, 0.3s);
|
||||
|
||||
@@ -60,6 +60,11 @@
|
||||
|
||||
&.move--left {
|
||||
@include translateX(0);
|
||||
|
||||
.search-bar__container {
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@@ -68,6 +73,13 @@
|
||||
|
||||
&.move--left {
|
||||
margin-right: 0;
|
||||
|
||||
.channel-header__links {
|
||||
position: relative;
|
||||
right: auto;
|
||||
top: auto;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -1,11 +1,14 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
#channel-header .search-bar__container {
|
||||
padding: 0 8px 0 3px;
|
||||
padding: 0 9px 0 3px;
|
||||
}
|
||||
.search-bar__container {
|
||||
padding: 12px 8px 0 0;
|
||||
@include flex(0 0 56px);
|
||||
.sidebar--right.move--left & {
|
||||
padding-right: 42px;
|
||||
}
|
||||
}
|
||||
.search__clear {
|
||||
display: none;
|
||||
|
||||
Reference in New Issue
Block a user