better placement for popups

This commit is contained in:
Baptiste Lemoine 2020-06-02 17:28:23 +02:00
parent 519c9f417e
commit 871aceb89a
10 changed files with 179 additions and 77 deletions

View File

@ -808,4 +808,4 @@ RUBY VERSION
ruby 2.6.5p114
BUNDLED WITH
1.17.3
2.1.4

View File

@ -51,9 +51,10 @@ export default class ConversationItem extends React.PureComponent {
render() {
const hasNewClass = this.state.newMessages ? 'has-new-message' : 'nothing-new';
const isVisible = this.state.displayed ? 'displayed' : 'hidden';
const isReduced = this.state.displayed ? 'full' : 'reduced';
const isFocused = this.state.isFocused ? 'isFocused' : 'not-focused';
const list = (
<li className={'conversation-item ' + hasNewClass + ' ' + isVisible + ' ' + isFocused}>
<li className={`conversation-item ${hasNewClass} ${isReduced} ${isFocused}`}>
<div className='top-title'>
<i
role='img'
@ -78,6 +79,8 @@ export default class ConversationItem extends React.PureComponent {
/>
</button >
</div >
<div className={`body ${isVisible} `} >
<ConversationStream messages={this.props.messages} />
<div className='conversation_input'>
<form
@ -97,12 +100,14 @@ export default class ConversationItem extends React.PureComponent {
/>
<input
className='messager-send'
type='submit'
name='submit'
value='Send'
value='>'
/>
</form >
</div >
</div>
</li >
);
return (

View File

@ -33,6 +33,7 @@ export default class ConversationStream extends React.PureComponent {
<div className='conversation-stream'>
<div className='messages'>
{messagesLists}
<hr className='marker'/>
</div >
</div >
);

View File

@ -31,3 +31,4 @@
@import 'bliss/dashboard';
@import 'bliss/rtl';
@import 'bliss/accessibility';
@import 'bliss/responsive';

View File

@ -0,0 +1,7 @@
@media screen and (min-width: 740px) {
.sidebar__toggle{
display: none;
}
}

View File

@ -878,3 +878,12 @@ a.name-tag,
color: $primary-text-color;
}
}
// control panel
.simple_form .edit_user{
button[type=submit]{
position: fixed;
bottom: 3px;
right: 3px;
}
}

View File

@ -12,5 +12,9 @@
.contact {
margin-bottom: 0.5rem;
img{
max-width: 3em;
max-height: 3em;
}
}
}

View File

@ -1,8 +1,10 @@
$textareaHeight : 60px;
$conversationMargin: 1em;
$conversationWidth: 20em;
.main-instant-messaging {
.conversation {
.conversation__content {
padding-right: 0;
}
@ -30,22 +32,26 @@
@extend .fixed-box;
right: $messagingBoxWidth + 2em;
bottom: 0;
width: 100%;
width: 50%;
padding: 0.5em;
overflow-x: auto;
border: 0;
z-index: 2;
}
/**
block containing one stream, in line at the bottom of the screen
*/
.conversation-item {
float: right;
width: 20em;
margin-left: 2em;
padding: 1em;
width: $conversationWidth;
margin-left: $conversationMargin;
border-radius: 15px;
border: 3px solid $classic-primary-color;
-moz-border-radius-bottomleft: 0;
-moz-border-radius-bottomright: 0;
background: $classic-base-color;
border: 3px solid white;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
background: $classic-primary-color;
&.has-new-message {
@ -56,11 +62,35 @@
&.is-focused {
border-color: $ui-base-color;
}
&.reduced{
}
.top-title {
padding: 1em;
background: $classic-base-color;
border-top-left-radius: 1em;
border-top-right-radius: 1em;
button, .btn{
background: transparent;
color: white;
float:right;
border: 0;
}
}
.body{
height: 17.7em;
&.reduced{
display:none;
}
}
.username {
font-weight: bold;
}
.conversation-stream{
width: $conversationWidth - 2em;
}
.conversation-stream,
.conversation_input {
height: 100%;
@ -73,14 +103,38 @@
display: none;
}
}
.btn {
background: $classic-base-color;
color: $ui-base-color;
.messager-send {
background: #282c37;
color: white;
float: right;
padding: 0 1em;
margin-left: 1em;
border: 0;
margin-top: -$textareaHeight;
height:$textareaHeight;
width: 3em;
}
.messager-textarea{
box-sizing: border-box;
padding: 1rem;
padding-right: 4em;
background: $ui-base-color;
color: white;
border: 0;
width: 100%;
display: block;
height: $textareaHeight;
overflow: auto;
}
button[type=submit]{
background: $classic-base-color;
color: white;
padding: 0.5rem;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border: 0;
}
}

View File

@ -1,37 +1,31 @@
.conversation-stream {
padding-top: 1em;
height: 5em;
overflow: auto;
width: 100%;
.message {
clear: both;
}
.messages >
.message {
-webkit-border-radius: 0.5rem;
-moz-border-radius: 0.5rem;
border-radius: 0.5rem;
margin-bottom: 0.5em;
padding: 0.5em 1em;
display: block;
}
padding-top: 1em;
padding-left: 1em;
padding-right: 1em;
height: 10em;
overflow: auto;
width: $messagingBoxWidth;
padding-bottom: 4em;
.ours {
.message {
background: #6b7f9b;
clear: both;
margin-bottom: 2rem;
&.ours {
text-align: right;
background: $light-text-color;
background: #6b7f9b;
float: right;
.arrow-down {
border-top-color: $light-text-color;
left: 100%;
border-top-color: #6b7f9b;
left: 75%;
}
}
.theirs {
&.theirs {
text-align: left;
background: $ui-highlight-color;
float: left;
@ -41,13 +35,27 @@
right: 1em;
}
}
}
.messages >
.message {
-webkit-border-radius: 0.5rem;
-moz-border-radius: 0.5rem;
border-radius: 0.5rem;
margin-bottom: 0.5em;
margin-right: 0.5em;
padding: 0.5em 1em;
display: block;
}
.arrow-down {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid $classic-primary-color;
border-top: 20px solid $ui-highlight-color;
position: relative;
bottom: -1em;

View File

@ -1,19 +1,10 @@
.status-direct,
.item-list .conversation {
@extend .airmail-border;
}
.main-instant-messaging {
.column-header__icon {
color: white;
}
}
/**
conteneur de contacts latéral
*/
.messaging-box {
@extend .fixed-box;
box-sizing: border-box;
right: 1em;
width: $messagingBoxWidth;
background: $ui-base-color;
@ -33,6 +24,16 @@
color: white;
}
.account__display-name{
float: left;
margin-right: 1em;
}
.card-title{
height: 2rem;
padding-left: 0;
font-size: 1.3rem;
}
}
@ -52,3 +53,15 @@
.conversation_created-at {
margin-right: 1em;
}
.status-direct,
.item-list .conversation {
@extend .airmail-border;
}
.main-instant-messaging {
.column-header__icon {
color: white;
}
}