airmail style for notifications about direct messages

This commit is contained in:
Baptiste Lemoine 2019-12-23 11:44:49 +01:00
parent 03fd10d068
commit 26002f4b67
6 changed files with 79 additions and 34 deletions

View File

@ -607,15 +607,15 @@ class Status extends ImmutablePureComponent {
/>
</button >
)}
<div className='well'>
{/*<div className='well'>*/}
{status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) &&
<p > oui je cause tout seul, c'est un thread</p >
}
{this.props.threadsCompile &&
<p > les threads sont en mode compilés</p >
}
</div >
{/* {status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) &&*/}
{/* <p > oui je cause tout seul, c'est un thread</p >*/}
{/* }*/}
{/* {this.props.threadsCompile &&*/}
{/* <p > les threads sont en mode compilés</p >*/}
{/* }*/}
{/*</div >*/}
<StatusActionBar
status={status}
account={account} {...other}

View File

@ -150,7 +150,7 @@ class Conversation extends ImmutablePureComponent {
menu.push({ text: intl.formatMessage(messages.delete), action: this.handleDelete });
const names = accounts.map(a => <Permalink
const names = accounts.map(a => (<Permalink
to={`/accounts/${a.get('id')}`}
href={a.get('url')}
key={a.get('id')}
@ -160,7 +160,7 @@ class Conversation extends ImmutablePureComponent {
className='display-name__html'
dangerouslySetInnerHTML={{ __html: a.get('display_name_html') }}
/></bdi >
</Permalink >).reduce((prev, cur) => [prev, ', ', cur]);
</Permalink >)).reduce((prev, cur) => [prev, ', ', cur]);
const handlers = {
reply : this.handleReply,
@ -221,23 +221,22 @@ class Conversation extends ImmutablePureComponent {
)}
<div className='status__action-bar'>
<IconButton
className='status__action-bar-button'
title={intl.formatMessage(messages.reply)}
icon='reply'
onClick={this.handleReply}
/>
<div className='status__action-bar-dropdown'>
<DropdownMenuContainer
status={lastStatus}
items={menu}
icon='ellipsis-h'
size={18}
direction='right'
title={intl.formatMessage(messages.more)}
/>
</div >
<IconButton
className='status__action-bar-button conversation_reply'
title={intl.formatMessage(messages.reply)}
icon='reply'
size='15em'
onClick={this.handleReply}
/>
</div >
</div >
</div >

View File

@ -1,6 +1,5 @@
import React from 'react';
import ContactsList from './contacts-list';
import Conversation from './conversations';
export default class Messaging extends React.PureComponent {
@ -48,13 +47,12 @@ export default class Messaging extends React.PureComponent {
// }
render() {
// const contactlist = null;
return (
<div >
messagerie todo
<ContactsList />
<Conversation />
{/*<Conversation />*/}
</div >
);
}

View File

@ -7,16 +7,20 @@ table{
background: $ui-highlight-color;
}
}
td, th {
padding: 1rem;
}
a {
@extend .text-btn
}
}
.table-responsive {
width: 100%;
}
.table-striped {
margin: 1rem 0;
@ -27,9 +31,11 @@ table{
}
}
}
.group-form {
}
code {
font-family: $font-monospace, monospace;
font-weight: 400;
@ -114,6 +120,7 @@ code {
position: absolute;
margin: 0 4px;
margin-top: -2px;
background: $ui-highlight-color;
}
}
}

View File

@ -8,6 +8,18 @@ $messagingBoxHeight: 20em;
bottom: 0;
}
.airmail-border {
border: 0.25em solid transparent;
border-image: 4 repeating-linear-gradient(-45deg, red 0, red 1em, white 0, white 2em,
#58a 0, #58a 3em, white 0, white 4em);
}
.status-direct,
.item-list .conversation {
@extend .airmail-border;
}
.messaging-box {
@extend .fixed-box;
@ -20,6 +32,35 @@ $messagingBoxHeight: 20em;
}
}
.conversation {
&.focusable {
&:hover {
background: mix($ui-base-color, $ui-secondary-color);
}
}
.conversation_reply {
display: inline-block;
padding: 1em;
width: 15em;
&:hover {
color: $ui-highlight-color;
}
}
.status__action-bar-dropdown {
display: inline-block;
padding: 1em;
width: 10em;
&:hover {
color: $ui-highlight-color;
}
}
}
.conversations_list {
right: 1em;
position: absolute;

View File

@ -21,7 +21,7 @@
%hr.spacer/
.fields-group
= f.input :locked, as: :boolean, wrapper: :with_label, hint: t('simple_form.hints.defaults.locked')
= f.input :locked, as: :boolean, wrapper: :with_label, hint: t('simple_form.hints.defaults.locked'), recommended: true
.fields-group
= f.input :bot, as: :boolean, wrapper: :with_label, hint: t('simple_form.hints.defaults.bot')