Skip to content
Commits on Source (8)
Hide whitespace changes
Inline Side-by-side
src/app/common/components/infinite-scroll/horizontal-infinite-scroll.component.ts
View file @ 4b51976e
......@@ -7,6 +7,7 @@ import { Subscription } from "rxjs";
template: `
<div class="mdl-spinner mdl-js-spinner is-active" [mdl] [hidden]="!inProgress"></div>
<div class="m-infinite-scroll-manual"
[class.m-infinite-scroll-manual__loadMore]="!iconOnly"
[class.mdl-color--blue-grey-200]="!iconOnly"
[class.mdl-color-text--blue-grey-500]="!iconOnly"
[hidden]="inProgress || !moreData"
......@@ -17,6 +18,7 @@ import { Subscription } from "rxjs";
<i class="material-icons" *ngIf="iconOnly">keyboard_arrow_right</i>
</div>
<div class="m-infinite-scroll-manual"
[class.m-infinite-scroll-manual__noMore]="!iconOnly"
[class.mdl-color--blue-grey-200]="!iconOnly"
[class.mdl-color-text--blue-grey-500]="!iconOnly"
[hidden]="moreData"
......
src/app/common/components/infinite-scroll/infinite-scroll.scss
View file @ 4b51976e
......@@ -14,4 +14,27 @@ infinite-scroll{
font-weight: 600;
cursor:pointer;
}
.m-infinite-scroll-manual__noMore{
cursor: text;
@include m-theme(){
color: themed($m-blue-grey-300) !important;
background-color: themed($m-blue-grey-50) !important;
}
}
.m-infinite-scroll-manual__loadMore{
&:hover {
@include m-theme(){
color: themed($m-blue-grey-700) !important;
background-color: themed($m-blue-grey-300) !important;
}
}
&:active {
@include m-theme(){
background-color: themed($m-blue-grey-200) !important;
}
}
}
}
src/app/common/components/infinite-scroll/infinite-scroll.ts
View file @ 4b51976e
......@@ -7,6 +7,7 @@ import { Subscription } from "rxjs";
template: `
<div class="mdl-spinner mdl-js-spinner is-active" [mdl] [hidden]="!inProgress"></div>
<div class="m-infinite-scroll-manual"
[class.m-infinite-scroll-manual__loadMore]="!iconOnly"
[class.mdl-color--blue-grey-200]="!iconOnly"
[class.mdl-color-text--blue-grey-500]="!iconOnly"
[hidden]="inProgress || !moreData"
......@@ -17,6 +18,7 @@ import { Subscription } from "rxjs";
<i class="material-icons" *ngIf="iconOnly">keyboard_arrow_down</i>
</div>
<div class="m-infinite-scroll-manual"
[class.m-infinite-scroll-manual__noMore]="!iconOnly"
[class.mdl-color--blue-grey-200]="!iconOnly"
[class.mdl-color-text--blue-grey-500]="!iconOnly"
[hidden]="moreData"
......
src/app/modules/messenger/conversation/conversation.component.html
View file @ 4b51976e
<div class="m-messenger--conversation m-messenger--dockpane mdl-shadow--4dp" [class.m-messenger--dockpane-open]="conversation.open">
<div class="m-messenger--conversation m-messenger--dockpane" [class.m-messenger--dockpane-open]="conversation.open">
<div class="m-messenger--dockpane-tab"
[class.mdl-color--amber]="conversation.unread"
(click)="dockpanes.toggle(conversation); initialLoad()">
(click)="toggle(); initialLoad()">
<div class="m-messenger--dockpane-tab-title">
<span *ngFor="let participant of conversation.participants">{{participant.username}}</span>
</div>
<div class="m-messenger--dockpane-tab-actions" (click)="$event.stopPropagation()">
<i class="material-icons mdl-color-text--blue-grey-100" [hidden]="live">sync_problem</i>
<i class="material-icons"
(click)="ribbon.open = !ribbon.open"
[ngClass]="{ 'm-status-active': ribbon.open }"
>more_vert</i>
(click)="ribbonToggle()"
>more_vert</i>
<i class="material-icons" (click)="dockpanes.close(conversation)">close</i>
</div>
</div>
<div class="m-messenger--dockpane-container mdl-shadow--2dp">
<div class="m-messenger--dockpane-tab-ribbon" #ribbon [hidden]="!ribbon.open">
<div class="m-messenger--dockpane-tab-icon mdl-color-text--blue-grey-300" (click)="deleteHistory(); ribbon.open = false" *ngIf="showMessages">
<div class="m-messenger--dockpane-container">
<div class="m-messenger--dockpane-tab-ribbon" #ribbon [hidden]="!ribbonOpened">
<div class="m-messenger--dockpane-tab-icon mdl-color-text--blue-grey-300" (click)="deleteHistory(); ribbonOpened = false">
<i class="material-icons mdl-color-text--blue-grey-100" title="Delete chat history" i18n-title="@@MESSENGER__CONVERSATION__DELETE_TOOLTIP">delete</i>
<ng-container i18n="@@MESSENGER__CONVERSATION__DESTROY">Destroy</ng-container>
</div>
<div class="m-messenger--dockpane-tab-icon mdl-color-text--blue-grey-300" (click)="block(); ribbon.open = false" *ngIf="!blocked">
<div class="m-messenger--dockpane-tab-icon mdl-color-text--blue-grey-300" (click)="block(); ribbonOpened = false" *ngIf="!blocked">
<i class="material-icons mdl-color-text--blue-grey-100" title="Block participants" i18n-title="@@MESSENGER__CONVERSATION__BLOCK_TOOLTIP">block</i>
<ng-container i18n="@@MESSENGER__CONVERSATION__BLOCK">Block</ng-container>
</div>
<div class="m-messenger--dockpane-tab-icon mdl-color-text--blue-grey-300" (click)="block(); ribbon.open = false" *ngIf="blocked">
<div class="m-messenger--dockpane-tab-icon mdl-color-text--blue-grey-300" (click)="block(); ribbonOpened = false" *ngIf="blocked">
<i class="material-icons mdl-color-text--blue-grey-100" title="Un-block chat" i18n-title="@@MESSENGER__CONVERSATION__UNBLOCK_TOOLTIP">restore</i>
<ng-container i18n="@@MESSENGER__CONVERSATION__UNBLOCK">Un-block</ng-container>
</div>
......
src/app/modules/messenger/conversation/conversation.component.scss
View file @ 4b51976e
@import 'defaults.scss';
.m-messenger--conversation{
border-radius: 3px 3px 0 0;
@include m-theme(){
box-shadow: 0 2px 4px 0 rgba(themed($m-black), .15), 0 1px 0px -2px rgba(themed($m-black), .15), 0 1px 5px 0 rgba(themed($m-black), .15);
}
.m-messenger--conversation-messages{
max-height:240px;
......@@ -83,6 +87,15 @@
margin-bottom: $minds-padding * 2;
line-height: 1.35;
}
button:not([disabled]) {
&:hover {
@include m-theme(){
background-color: themed($m-blue-grey-700);
}
}
}
}
}
.m-messenger--conversation-composer{
......
src/app/modules/messenger/conversation/conversation.component.ts
View file @ 4b51976e
......@@ -64,6 +64,8 @@ export class MessengerConversation {
invitable: any[] | null = null;
invited: boolean = false;
ribbonOpened: boolean = false;
constructor(
public session: Session,
public client: Client,
......@@ -360,8 +362,22 @@ export class MessengerConversation {
has = true;
}
});
return has;
}
// Open the conversation with the ribbon
ribbonToggle() {
if (!this.ribbonOpened && !this.conversation.open) {
this.dockpanes.open(this.conversation);
}
this.ribbonOpened = !this.ribbonOpened;
}
// Close the ribbon with the conversation
toggle() {
if (this.ribbonOpened) {
this.ribbonOpened = false;
}
this.dockpanes.toggle(this.conversation);
}
}
src/app/modules/messenger/dockpanes/dockpanes.component.scss
View file @ 4b51976e
......@@ -37,7 +37,6 @@
@include m-theme(){
background-color: themed($m-white);
color: themed($m-grey-800);
border: 1px solid themed($m-grey-50);
}
.m-messenger--dockpane-tab-title{
......@@ -63,7 +62,6 @@
}
.m-messenger--dockpane-tab-actions{
display: inline-block;
text-align: right;
vertical-align: middle;
float: right;
......@@ -75,10 +73,9 @@
line-height: 12px;
border-radius: 0 3px 0 0;
&:hover,
&.m-status-active{
&:hover{
@include m-theme(){
color: themed($m-blue-grey-700) !important;
color: themed($m-grey-500) !important;
}
}
}
......@@ -121,6 +118,17 @@
padding-bottom: 8px;
cursor: pointer;
&:hover{
@include m-theme(){
color: themed($m-blue-grey-500) !important;
}
> i {
@include m-theme(){
color: themed($m-blue-grey-500) !important;
}
}
}
> i{
width: 100%;
font-size: 16px;
......@@ -128,12 +136,6 @@
line-height: 12px;
border-radius: 0 3px 0 0;
cursor: pointer;
&:hover{
@include m-theme(){
color: themed($m-blue-grey-700) !important;
}
}
}
}
}
......
src/app/modules/messenger/encryption/encryption.component.scss
View file @ 4b51976e
......@@ -23,13 +23,13 @@
font-size: 11px;
line-height: 1.35;
margin: 0;
padding: $minds-padding;
padding: 8px 12px;
}
.m-messenger--encryption-setup-help {
font-size: 11px;
line-height: 1.35;
margin: 0;
padding: $minds-padding;
padding: 8px 12px;
@include m-theme(){
color: themed($m-blue-grey-700);
}
......
src/app/modules/messenger/userlist/userlist.component.html
View file @ 4b51976e
......@@ -4,32 +4,30 @@
<div class="m-messenger--dockpane-tab-title"><i class="material-icons">chat_bubble</i><span i18n="@@MESSENGER__USERLIST__MESSENGER_TITLE">Messenger</span></div>
<div class="m-messenger--dockpane-tab-actions" (click)="$event.stopPropagation()">
<i class="material-icons"
(click)="ribbonToggle()"
[ngClass]="{ 'm-status-active': opened_ribbon }">
(click)="ribbonToggle()">
settings
</i>
</div>
</div>
<div class="m-messenger--dockpane-container">
<div class="m-messenger--dockpane-tab-ribbon mdl-color-text--blue-grey-300" #ribbon [hidden]="!opened_ribbon">
<div class="m-messenger--dockpane-tab-icon" (click)="logout(); opened_ribbon = false" [hidden]="!encryption.isOn()">
<div class="m-messenger--dockpane-tab-ribbon mdl-color-text--blue-grey-300" #ribbon [hidden]="!ribbonOpened">
<div class="m-messenger--dockpane-tab-icon" (click)="logout(); ribbonOpened = false" [hidden]="!encryption.isOn()">
<i class="material-icons mdl-color-text--blue-grey-100"
title="Logout of chat" i18n-title="@@MESSENGER__USERLIST__LOGOUT_TOOLTIP"
>exit_to_app</i>
<ng-container i18n="@@MESSENGER__USERLIST__LOGOUT">Logout</ng-container>
</div>
<div class="m-messenger--dockpane-tab-icon mdl-color-text--blue-grey-300" (click)="sounds.mute(); opened_ribbon = false" [hidden]="!sounds.canPlay()">
<div class="m-messenger--dockpane-tab-icon mdl-color-text--blue-grey-300" (click)="sounds.mute(); ribbonOpened = false" [hidden]="!sounds.canPlay()">
<i class="material-icons mdl-color-text--blue-grey-100"
title="Disable sounds" i18n-title="@@MESSENGER__USERLIST__DISABLE_SOUNDS_TOOLTIP">notifications</i>
<ng-container i18n="@@MESSENGER__USERLIST__MUTE">Mute</ng-container>
</div>
<div class="m-messenger--dockpane-tab-icon mdl-color-text--blue-grey-300" (click)="sounds.unmute(); opened_ribbon = false" [hidden]="sounds.canPlay()">
<div class="m-messenger--dockpane-tab-icon mdl-color-text--blue-grey-300" (click)="sounds.unmute(); ribbonOpened = false" [hidden]="sounds.canPlay()">
<i class="material-icons mdl-color-text--blue-grey-100"
title="Enable sounds" i18n-title="@@MESSENGER__USERLIST__ENABLE_SOUNDS_TOOLTIP">notifications_off</i>
<ng-container i18n="@@MESSENGER__USERLIST__UNMUTE">Unmute</ng-container>
</div>
<div class="m-messenger--dockpane-tab-icon mdl-color-text--blue-grey-300" (click)="encryption.reKeying = !encryption.reKeying; opened_ribbon = false">
<div class="m-messenger--dockpane-tab-icon mdl-color-text--blue-grey-300" (click)="encryption.reKeying = !encryption.reKeying; ribbonOpened = false">
<i class="material-icons mdl-color-text--blue-grey-100"
title="Change your encryption password" i18n-title="@@MESSENGER__USERLIST__CHANGE_PWD_TOOLTIP">vpn_key</i>
<ng-container i18n="@@MESSENGER__USERLIST__REKEY">Re-key</ng-container>
......@@ -53,11 +51,9 @@
<div [hidden]="!inProgress" style="width:100%; text-align:center; ">
<div class="mdl-spinner mdl-js-spinner is-active" [mdl] style="margin: 16px auto;"></div>
</div>
</div>
<div class="m-messenger--userlist-search" [hidden]="opened_ribbon">
<div class="m-messenger--userlist-search" [hidden]="ribbonOpened">
<i class="material-icons">search</i>
<input type="text" placeholder="Search" i18n-placeholder="@@MESSENGER__USERLIST__SEARCH_PH" #q (keyup)="search(q);">
</div>
......
src/app/modules/messenger/userlist/userlist.component.scss
View file @ 4b51976e
......@@ -3,6 +3,10 @@
#{if(&, "&", "*")}.m-messenger--userlist{
width:200px;
border-radius: 3px 3px 0 0;
@include m-theme(){
box-shadow: 0 2px 4px 0 rgba(themed($m-black), .15), 0 1px 0px -2px rgba(themed($m-black), .15), 0 1px 5px 0 rgba(themed($m-black), .15);
}
.m-messenger--userlist-search{
height: 30px;
......@@ -42,6 +46,12 @@
display: flex;
align-items: center;
&:hover {
@include m-theme(){
background-color: rgba(themed($m-blue-grey-50), 0.5);
}
}
img{
width: 24px;
margin: 8px;
......
src/app/modules/messenger/userlist/userlist.component.ts
View file @ 4b51976e
......@@ -28,7 +28,7 @@ export class MessengerUserlist {
hasMoreData: boolean = true;
inProgress: boolean = false;
cb: number = Date.now();
opened_ribbon: boolean = false;
minds: Minds = window.Minds;
storage: Storage = new Storage();
......@@ -37,7 +37,8 @@ export class MessengerUserlist {
};
userListToggle: boolean = false;
ribbonOpened: boolean = false;
search_timeout;
constructor(
......@@ -170,14 +171,19 @@ export class MessengerUserlist {
}
}
// Open the userlist with the ribbon
ribbonToggle() {
if (!this.userListToggle) {
if (!this.ribbonOpened && !this.userListToggle) {
this.userListToggle = true;
}
this.opened_ribbon = !this.opened_ribbon;
this.ribbonOpened = !this.ribbonOpened;
}
// Close the ribbon with the userlist
toggle() {
if (this.ribbonOpened) {
this.ribbonOpened = false;
}
this.userListToggle = !this.userListToggle;
if (this.userListToggle)
this.load({ refresh: true });
......