UI Improvements
Этот коммит содержится в:
@@ -59,7 +59,7 @@ var PopoverListMembers = React.createClass({
|
||||
|
||||
return (
|
||||
<div id="member_popover" data-toggle="popover" data-content={popoverHtml} data-original-title="Members" >
|
||||
<div id="member_tooltip" data-toggle="tooltip" title="View Channel Members">
|
||||
<div id="member_tooltip" title="View Channel Members">
|
||||
{count} <span className="glyphicon glyphicon-user" aria-hidden="true"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -20,6 +20,10 @@ module.exports = React.createClass({
|
||||
PostStore.addMentionDataChangeListener(this._onChange);
|
||||
var self = this;
|
||||
|
||||
$('.post-right__scroll').scroll(function(){
|
||||
self.forceUpdate();
|
||||
});
|
||||
|
||||
$('body').on('keydown.mentionlist', '#'+this.props.id,
|
||||
function(e) {
|
||||
if (!self.isEmpty() && self.state.mentionText != '-1' && (e.which === 13 || e.which === 9)) {
|
||||
@@ -32,7 +36,7 @@ module.exports = React.createClass({
|
||||
e.preventDefault();
|
||||
|
||||
var tempSelectedMention = -1;
|
||||
if (e.which === 38) {
|
||||
if (e.which === 38) {
|
||||
if (self.getSelection(self.state.selectedMention - 1))
|
||||
self.setState({ selectedMention: self.state.selectedMention - 1, selectedUsername: self.refs['mention' + (self.state.selectedMention - 1)].props.username });
|
||||
else {
|
||||
@@ -106,13 +110,13 @@ module.exports = React.createClass({
|
||||
this.setState({ selectedMention: listId, selectedUsername: this.refs['mention' + listId].props.username });
|
||||
},
|
||||
getSelection: function(listId) {
|
||||
if (!this.refs['mention' + listId])
|
||||
if (!this.refs['mention' + listId])
|
||||
return false;
|
||||
else
|
||||
return true;
|
||||
},
|
||||
addCurrentMention: function() {
|
||||
if (!this.getSelection(this.state.selectedMention))
|
||||
if (!this.getSelection(this.state.selectedMention))
|
||||
this.addFirstMention();
|
||||
else
|
||||
this.refs['mention' + this.state.selectedMention].handleClick();
|
||||
@@ -132,7 +136,7 @@ module.exports = React.createClass({
|
||||
scrollAmount = $("#mentionsbox").height() * 100; //Makes sure that it scrolls all the way to the bottom
|
||||
else if (direction === "down" && this.state.selectedMention === 0)
|
||||
scrollAmount = 0;
|
||||
else if (direction === "up")
|
||||
else if (direction === "up")
|
||||
scrollAmount = "-=" + ($('#'+this.refs['mention' + this.state.selectedMention].props.id +"_mentions").innerHeight() - 5);
|
||||
else if (direction === "down")
|
||||
scrollAmount = "+=" + ($('#'+this.refs['mention' + this.state.selectedMention].props.id +"_mentions").innerHeight() - 5);
|
||||
|
||||
@@ -37,15 +37,25 @@ module.exports = React.createClass({
|
||||
componentDidMount: function() {
|
||||
var user = UserStore.getCurrentUser();
|
||||
if (user.props && user.props.theme) {
|
||||
utils.changeCss('a.theme', 'color:'+user.props.theme+'; fill:'+user.props.theme+'!important;');
|
||||
utils.changeCss('div.theme', 'background-color:'+user.props.theme+';');
|
||||
utils.changeCss('.btn.btn-primary', 'background: ' + user.props.theme+';');
|
||||
utils.changeCss('.btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-primary:focus', 'background: ' + utils.changeColor(user.props.theme, -10) +';');
|
||||
utils.changeCss('.modal .modal-header', 'background: ' + user.props.theme+';');
|
||||
utils.changeCss('.mention', 'background: ' + user.props.theme+';');
|
||||
utils.changeCss('.mention-link', 'color: ' + user.props.theme+';');
|
||||
utils.changeCss('@media(max-width: 768px){.search-bar__container', 'background: ' + user.props.theme+';}');
|
||||
}
|
||||
if (user.props.theme != "#000000" && user.props.theme != "#585858"){
|
||||
utils.changeCss('.btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-primary:focus', 'background: ' + utils.changeColor(user.props.theme, -10) +';');
|
||||
utils.changeCss('a.theme', 'color:'+user.props.theme+'; fill:'+user.props.theme+'!important;');
|
||||
}
|
||||
else if (user.props.theme == "#000000"){
|
||||
utils.changeCss('.btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-primary:focus', 'background: ' + utils.changeColor(user.props.theme, +50) +';');
|
||||
$('.team__header').addClass('theme--black');
|
||||
}
|
||||
else if (user.props.theme == "#585858"){
|
||||
utils.changeCss('.btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-primary:focus', 'background: ' + utils.changeColor(user.props.theme, +10) +';');
|
||||
$('.team__header').addClass('theme--gray');
|
||||
}
|
||||
|
||||
PostStore.addChangeListener(this._onChange);
|
||||
ChannelStore.addChangeListener(this._onChange);
|
||||
|
||||
@@ -57,7 +57,7 @@ module.exports = React.createClass({
|
||||
if (!config.ShowEmail) {
|
||||
data_content += "<div class='text-nowrap'>Email not shared</div>";
|
||||
} else {
|
||||
data_content += "<div><a href='mailto:" + this.state.profile.email + "' class='text-nowrap text-lowercase'>" + this.state.profile.email + "</a></div>";
|
||||
data_content += "<div data-toggle='tooltip' title= '" + this.state.profile.email + "'><a href='mailto:" + this.state.profile.email + "' class='text-nowrap text-lowercase user-popover__email'>" + this.state.profile.email + "</a></div>";
|
||||
}
|
||||
|
||||
return (
|
||||
|
||||
@@ -61,6 +61,10 @@ div.theme {
|
||||
}
|
||||
}
|
||||
|
||||
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
&.form-group--small {
|
||||
margin-bottom: 10px;
|
||||
|
||||
@@ -4,7 +4,8 @@
|
||||
max-height: 110px;
|
||||
height: 110px;
|
||||
white-space: nowrap;
|
||||
overflow: auto;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
.preview-div {
|
||||
display: inline-block;
|
||||
width: 120px;
|
||||
@@ -28,9 +29,9 @@
|
||||
}
|
||||
}
|
||||
.preview-img {
|
||||
display: block;
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
.remove-preview {
|
||||
position: absolute;
|
||||
@@ -130,15 +131,17 @@
|
||||
background-color: #FFF;
|
||||
background-repeat: no-repeat;
|
||||
&.small {
|
||||
background-position: center;
|
||||
background-position: center;
|
||||
}
|
||||
&.normal {
|
||||
background-position: top left;
|
||||
background-position: top left;
|
||||
}
|
||||
}
|
||||
.post-image__thumbnail {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
cursor: zoom-in;
|
||||
cursor: -webkit-zoom-in;
|
||||
}
|
||||
.post-image__details {
|
||||
width: 50%;
|
||||
@@ -165,34 +168,34 @@
|
||||
}
|
||||
|
||||
.file-details__container {
|
||||
@include display-flex;
|
||||
display: -ms-flexbox;
|
||||
@include display-flex;
|
||||
display: -ms-flexbox;
|
||||
|
||||
.file-details {
|
||||
width: 320px;
|
||||
height: 270px;
|
||||
padding: 14px;
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
.file-details {
|
||||
width: 320px;
|
||||
height: 270px;
|
||||
padding: 14px;
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
|
||||
.file-details__name {
|
||||
font-size: 16px;
|
||||
}
|
||||
.file-details__info {
|
||||
color: grey;
|
||||
}
|
||||
.file-details__name {
|
||||
font-size: 16px;
|
||||
}
|
||||
.file-details__preview {
|
||||
width: 320px;
|
||||
height: 270px;
|
||||
border-right: 1px solid #ddd;
|
||||
vertical-align: center;
|
||||
.file-details__info {
|
||||
color: grey;
|
||||
}
|
||||
}
|
||||
.file-details__preview {
|
||||
width: 320px;
|
||||
height: 270px;
|
||||
border-right: 1px solid #ddd;
|
||||
vertical-align: center;
|
||||
|
||||
// helper to center the image icon in the preview window
|
||||
.file-details__preview-helper {
|
||||
height: 100%;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
height: 100%;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -110,6 +110,20 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
&.theme--black {
|
||||
&:hover {
|
||||
&:before {
|
||||
background: rgba(white, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.theme--gray {
|
||||
&:hover {
|
||||
&:before {
|
||||
background: rgba(white, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
a {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@@ -15,10 +15,13 @@
|
||||
}
|
||||
.remove__member {
|
||||
float: right;
|
||||
color: #E56565;
|
||||
color: #999;
|
||||
font-size: 20px;
|
||||
line-height: 0;
|
||||
padding: 6px;
|
||||
&:hover {
|
||||
color: #E56565;
|
||||
}
|
||||
}
|
||||
.modal-dialog {
|
||||
max-width: 95%;
|
||||
@@ -151,10 +154,9 @@
|
||||
height: 100%;
|
||||
margin: 0 auto;
|
||||
.image-wrapper {
|
||||
background: #FFF;
|
||||
position: relative;
|
||||
max-width: 90%;
|
||||
min-height: 50px;
|
||||
min-height: 100px;
|
||||
min-width: 320px;
|
||||
@include border-radius(3px);
|
||||
display: table;
|
||||
@@ -182,6 +184,7 @@
|
||||
z-index: 9999;
|
||||
}
|
||||
> a {
|
||||
background: #FFF;
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
@@ -19,6 +19,7 @@
|
||||
}
|
||||
}
|
||||
.navbar-toggle {
|
||||
width: 43px;
|
||||
float: left;
|
||||
border-color: transparent;
|
||||
border-radius: 0;
|
||||
|
||||
@@ -6,4 +6,11 @@
|
||||
.user-popover__image {
|
||||
margin: 0 0 10px;
|
||||
@include border-radius(128px);
|
||||
}
|
||||
|
||||
.user-popover__email {
|
||||
max-width: 200px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: block;
|
||||
}
|
||||
@@ -229,6 +229,16 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-height: 640px) {
|
||||
.signup-team__container {
|
||||
padding: 30px 0;
|
||||
margin-bottom: 30px;
|
||||
font-size: 0.9em;
|
||||
.signup-team__name {
|
||||
font-size: 2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
.date-separator, .new-separator {
|
||||
&.hovered--after {
|
||||
|
||||
@@ -49,7 +49,9 @@
|
||||
<div id="activity_log_modal"></div>
|
||||
<div id="removed_from_channel_modal"></div>
|
||||
<script>
|
||||
window.setup_channel_page('{{ .Props.TeamDisplayName }}', '{{ .Props.TeamType }}', '{{ .Props.TeamId }}', '{{ .Props.ChannelName }}', '{{ .Props.ChannelId }}');
|
||||
window.setup_channel_page('{{ .Props.TeamDisplayName }}', '{{ .Props.TeamType }}', '{{ .Props.TeamId }}', '{{ .Props.ChannelName }}', '{{ .Props.ChannelId }}');
|
||||
$('body').tooltip( {selector: '[data-toggle=tooltip]'} );
|
||||
$('.modal-body').perfectScrollbar();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Ссылка в новой задаче
Block a user