PLT-5985 Cleaned up CSS for post textbox (#5974)
Этот коммит содержится в:
Harrison Healey
коммит произвёл
Joram Wilander
Joram Wilander
родитель
6bb65ef420
Коммит
77a76487a8
@@ -246,6 +246,14 @@ export default class Textbox extends React.Component {
|
||||
</div>
|
||||
);
|
||||
|
||||
let textboxClassName = 'form-control custom-textarea';
|
||||
if (this.props.emojiEnabled) {
|
||||
textboxClassName += ' custom-textarea--emoji-picker';
|
||||
}
|
||||
if (this.state.connection) {
|
||||
textboxClassName += ' ' + this.state.connection;
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
ref='wrapper'
|
||||
@@ -254,7 +262,7 @@ export default class Textbox extends React.Component {
|
||||
<SuggestionBox
|
||||
id={this.props.id}
|
||||
ref='message'
|
||||
className={`form-control custom-textarea${this.props.emojiEnabled ? '-emoji' : ''} ${this.state.connection}`}
|
||||
className={textboxClassName}
|
||||
type='textarea'
|
||||
spellCheck='true'
|
||||
placeholder={this.props.createMessage}
|
||||
|
||||
@@ -71,8 +71,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.custom-textarea,
|
||||
.custom-textarea-emoji {
|
||||
.custom-textarea {
|
||||
min-height: 100px;
|
||||
}
|
||||
|
||||
|
||||
@@ -15,11 +15,11 @@
|
||||
border-color: #cccccc;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.bad-connection {
|
||||
background: #ffffac !important;
|
||||
color: #d04444 !important;
|
||||
&.bad-connection {
|
||||
background: #ffffac !important;
|
||||
color: #d04444 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.textarea-wrapper {
|
||||
@@ -360,33 +360,36 @@
|
||||
|
||||
.post-create__container {
|
||||
label {
|
||||
font-weight: normal;
|
||||
}
|
||||
.custom-textarea {
|
||||
overflow: hidden;
|
||||
}
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
form {
|
||||
margin: 0 auto;
|
||||
padding: .5em 15px 0;
|
||||
width: 100%;
|
||||
}
|
||||
#reply_textbox.custom-textarea-emoji{
|
||||
bottom: 0;
|
||||
max-height: 162px !important;
|
||||
padding-right: 60px;
|
||||
padding-top: 6px;
|
||||
resize: none;
|
||||
form {
|
||||
margin: 0 auto;
|
||||
padding: .5em 15px 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.center {
|
||||
max-width: 1028px;
|
||||
}
|
||||
|
||||
.custom-textarea {
|
||||
bottom: 0;
|
||||
max-height: 162px;
|
||||
padding-top: 8px;
|
||||
overflow: hidden;
|
||||
resize: none;
|
||||
|
||||
}
|
||||
.center {
|
||||
max-width: 1028px;
|
||||
}
|
||||
&:not(.custom-textarea--emoji-picker) {
|
||||
padding-right: 35px;
|
||||
}
|
||||
|
||||
.post-create {
|
||||
&.scroll {
|
||||
&.custom-textarea--emoji-picker {
|
||||
padding-right: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
.post-create.scroll {
|
||||
.btn-file {
|
||||
right: 10px;
|
||||
}
|
||||
@@ -394,237 +397,194 @@ form {
|
||||
.custom-textarea {
|
||||
-ms-overflow-style: auto;
|
||||
overflow: auto;
|
||||
padding-right: 43px;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
#post_textbox-reference.custom-textarea-emoji {
|
||||
padding-right: 43px;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#post_textbox.custom-textarea-emoji {
|
||||
padding-right: 60px;
|
||||
resize: none;
|
||||
&:not(.custom-textarea--emoji-picker) {
|
||||
padding-right: 43px;
|
||||
}
|
||||
|
||||
&.custom-textarea--emoji-picker {
|
||||
padding-right: 60px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.post-create-body {
|
||||
padding: 0 0 2px;
|
||||
position: relative;
|
||||
|
||||
.post-body__cell {
|
||||
.post-create-body {
|
||||
padding: 0 0 2px;
|
||||
position: relative;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.send-button {
|
||||
@include single-transition(all, .15s);
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
font-size: 18px;
|
||||
height: 37px;
|
||||
line-height: 37px;
|
||||
padding-right: 4px;
|
||||
text-align: center;
|
||||
vertical-align: bottom;
|
||||
width: 45px;
|
||||
|
||||
&:active {
|
||||
@include opacity(.75);
|
||||
.post-body__cell {
|
||||
position: relative;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
color: grey;
|
||||
}
|
||||
}
|
||||
.send-button {
|
||||
@include single-transition(all, .15s);
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
font-size: 18px;
|
||||
height: 37px;
|
||||
line-height: 37px;
|
||||
padding-right: 4px;
|
||||
text-align: center;
|
||||
vertical-align: bottom;
|
||||
width: 45px;
|
||||
|
||||
.custom-textarea {
|
||||
bottom: 0;
|
||||
max-height: 162px !important;
|
||||
padding-right: 35px;
|
||||
padding-top: 8px;
|
||||
resize: none;
|
||||
&:active {
|
||||
@include opacity(.75);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
#post_textbox-reference.custom-textarea-emoji {
|
||||
bottom: 0;
|
||||
max-height: 162px !important;
|
||||
padding-right: 35px;
|
||||
padding-top: 8px;
|
||||
resize: none;
|
||||
|
||||
}
|
||||
|
||||
|
||||
#post_textbox.custom-textarea-emoji {
|
||||
bottom: 0;
|
||||
max-height: 162px !important;
|
||||
padding-right: 60px;
|
||||
padding-top: 8px;
|
||||
resize: none;
|
||||
|
||||
}
|
||||
.textarea-div {
|
||||
line-height: 1.5;
|
||||
max-height: 163px !important;
|
||||
overflow: auto;
|
||||
padding-right: 30px;
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
.btn-file {
|
||||
@include single-transition(all, .15s);
|
||||
font-size: 16px;
|
||||
padding: 8px 9px 4px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: 5;
|
||||
|
||||
svg {
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
&.disabled {
|
||||
color: grey;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
box-shadow: none;
|
||||
}
|
||||
.btn-file {
|
||||
@include single-transition(all, .15s);
|
||||
font-size: 16px;
|
||||
padding: 8px 9px 4px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: 5;
|
||||
|
||||
&.btn-file__disabled {
|
||||
@include opacity(.1);
|
||||
svg {
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&.btn-file__disabled {
|
||||
@include opacity(.1);
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
@include opacity(.1);
|
||||
}
|
||||
}
|
||||
|
||||
.icon--attachment {
|
||||
@include opacity(.5);
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
vertical-align: top;
|
||||
|
||||
input {
|
||||
cursor: pointer;
|
||||
direction: ltr;
|
||||
filter: alpha(opacity=0);
|
||||
font-size: 23px;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@include opacity(.9);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon--attachment {
|
||||
|
||||
.icon--emoji-picker {
|
||||
@include opacity(.5);
|
||||
display: inline-block;
|
||||
@include single-transition(all, .15s);
|
||||
cursor: pointer;
|
||||
font-size: 19px;
|
||||
margin-left: 7px;
|
||||
position: relative;
|
||||
vertical-align: top;
|
||||
|
||||
input {
|
||||
cursor: pointer;
|
||||
direction: ltr;
|
||||
filter: alpha(opacity=0);
|
||||
font-size: 23px;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&:hover,
|
||||
&:active {
|
||||
@include opacity(.9);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.icon--attachment {
|
||||
@include opacity(.5);
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
vertical-align: top;
|
||||
|
||||
input {
|
||||
cursor: pointer;
|
||||
direction: ltr;
|
||||
filter: alpha(opacity=0);
|
||||
font-size: 23px;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@include opacity(.9);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.icon--emoji-picker {
|
||||
@include opacity(.5);
|
||||
@include single-transition(all, .15s);
|
||||
cursor: pointer;
|
||||
font-size: 19px;
|
||||
margin-left: 7px;
|
||||
position: relative;
|
||||
vertical-align: top;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
@include opacity(.9);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.icon--attachment {
|
||||
.icon--emoji-picker {
|
||||
@include opacity(.5);
|
||||
display: inline-block;
|
||||
@include single-transition(all, .15s);
|
||||
cursor: pointer;
|
||||
font-size: 19px;
|
||||
margin-left: 7px;
|
||||
position: relative;
|
||||
vertical-align: top;
|
||||
|
||||
input {
|
||||
cursor: pointer;
|
||||
direction: ltr;
|
||||
filter: alpha(opacity=0);
|
||||
font-size: 23px;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&:hover,
|
||||
&:active {
|
||||
@include opacity(.9);
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.icon--emoji-picker {
|
||||
@include opacity(.5);
|
||||
@include single-transition(all, .15s);
|
||||
cursor: pointer;
|
||||
font-size: 19px;
|
||||
margin-left: 7px;
|
||||
position: relative;
|
||||
vertical-align: top;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
@include opacity(.9);
|
||||
textarea {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
box-shadow: none;
|
||||
.post-create-footer {
|
||||
@include clearfix;
|
||||
font-size: 13px;
|
||||
padding: 3px 0 0;
|
||||
position: relative;
|
||||
|
||||
.post-error {
|
||||
@include opacity(.55);
|
||||
display: inline-block;
|
||||
font-size: .85em;
|
||||
font-weight: normal;
|
||||
margin-bottom: 0;
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.post-create-footer {
|
||||
@include clearfix;
|
||||
font-size: 13px;
|
||||
padding: 3px 0 0;
|
||||
position: relative;
|
||||
|
||||
.post-error {
|
||||
@include opacity(.55);
|
||||
display: inline-block;
|
||||
font-size: .85em;
|
||||
font-weight: normal;
|
||||
margin-bottom: 0;
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
.msg-typing {
|
||||
@include opacity(.7);
|
||||
display: block;
|
||||
font-size: .95em;
|
||||
height: 20px;
|
||||
margin-bottom: 5px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.msg-typing {
|
||||
@include opacity(.7);
|
||||
display: block;
|
||||
font-size: .95em;
|
||||
height: 20px;
|
||||
margin-bottom: 5px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.post-list__table {
|
||||
display: table;
|
||||
height: 100%;
|
||||
|
||||
Ссылка в новой задаче
Block a user