EVOgeek
/
Vmeda.Online
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-3320 messages: Do some restyling on discussion page

main
Pau Ferrer Ocaña 2021-05-21 11:17:27 +02:00
parent 33d2379eaa
commit fd6212ac3f
6 changed files with 99 additions and 148 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/addons/messages/pages/discussion/discussion.html
View File

@ -4,22 +4,20 @@
<ion-back-button [text]="'core.back' | translate"></ion-back-button> <ion-back-button [text]="'core.back' | translate"></ion-back-button>
</ion-buttons> </ion-buttons>
<h1> <h1>
<div class="addon-messages-discussion-title"> <img *ngIf="loaded && !otherMember && conversationImage" class="core-bar-button-image" [src]="conversationImage"
<img *ngIf="loaded && !otherMember && conversationImage" class="core-bar-button-image" [src]="conversationImage" alt="" onError="this.src='assets/img/group-avatar.png'" core-external-content role="presentation"
alt="" onError="this.src='assets/img/group-avatar.png'" core-external-content role="presentation" [siteId]="siteId || null">
[siteId]="siteId || null"> <core-user-avatar *ngIf="loaded && otherMember" class="core-bar-button-image" [user]="otherMember"
<core-user-avatar *ngIf="loaded && otherMember" class="core-bar-button-image" [user]="otherMember" [linkProfile]="false" [checkOnline]="otherMember.showonlinestatus" (click)="showInfo && viewInfo()">
[linkProfile]="false" [checkOnline]="otherMember.showonlinestatus" (click)="showInfo && viewInfo()"> </core-user-avatar>
</core-user-avatar> <core-format-text [text]="title" contextLevel="system" [contextInstanceId]="0"
<core-format-text [text]="title" contextLevel="system" [contextInstanceId]="0" (click)="showInfo && !isGroup && viewInfo()"></core-format-text>
(click)="showInfo && !isGroup && viewInfo()"></core-format-text> <ion-icon *ngIf="conversation && conversation.isfavourite" name="fas-star"
<ion-icon *ngIf="conversation && conversation.isfavourite" name="fas-star" [attr.aria-label]="'core.favourites' | translate">
[attr.aria-label]="'core.favourites' | translate"> </ion-icon>
</ion-icon> <ion-icon *ngIf="conversation && conversation.ismuted" name="fas-bell-slash"
<ion-icon *ngIf="conversation && conversation.ismuted" name="fas-bell-slash" [attr.aria-label]="'addon.messages.mutedconversation' | translate">
[attr.aria-label]="'addon.messages.mutedconversation' | translate"> </ion-icon>
</ion-icon>
</div>
</h1> </h1>
<ion-buttons slot="end"></ion-buttons> <ion-buttons slot="end"></ion-buttons>
</ion-toolbar> </ion-toolbar>
@ -101,11 +99,6 @@
*ngIf="message.showUserData"></core-user-avatar> *ngIf="message.showUserData"></core-user-avatar>
<div *ngIf="message.showUserData">{{ members[message.useridfrom].fullname }}</div> <div *ngIf="message.showUserData">{{ members[message.useridfrom].fullname }}</div>
<ion-note *ngIf="!message.pending">{{ message.timecreated | coreFormatDate: "strftimetime" }}</ion-note>
<ion-note *ngIf="message.pending">
<ion-icon name="fas-clock" [attr.aria-label]="'core.notsent' | translate" role="status"></ion-icon>
</ion-note>
</div> </div>
<!-- Some messages have <p> and some others don't. Add a <p> so they all have same styles. --> <!-- Some messages have <p> and some others don't. Add a <p> so they all have same styles. -->
@ -114,6 +107,10 @@
[contextInstanceId]="0"></core-format-text> [contextInstanceId]="0"></core-format-text>
</p> </p>
</ion-label> </ion-label>
<ion-note *ngIf="!message.pending" slot="end">{{ message.timecreated | coreFormatDate: "strftimetime" }}</ion-note>
<ion-note *ngIf="message.pending" slot="end">
<ion-icon name="fas-clock" [attr.aria-label]="'core.notsent' | translate" role="status"></ion-icon>
</ion-note>
<ion-button fill="clear" *ngIf="!message.sending && showDelete" (click)="deleteMessage(message, index)" <ion-button fill="clear" *ngIf="!message.sending && showDelete" (click)="deleteMessage(message, index)"
class="addon-messages-delete-button" [@coreSlideInOut]="'fromRight'" class="addon-messages-delete-button" [@coreSlideInOut]="'fromRight'"
[attr.aria-label]=" 'addon.messages.deletemessage' | translate" slot="end"> [attr.aria-label]=" 'addon.messages.deletemessage' | translate" slot="end">

126
src/addons/messages/pages/discussion/discussion.scss
View File

@ -1,6 +1,8 @@
@import "~theme/globals.scss";
:host { :host {
ion-content { ion-content {
--background: var(--background-lighter); --background: var(--background-alternative);
&::part(scroll) { &::part(scroll) {
padding-bottom: 0 !important; padding-bottom: 0 !important;
@ -11,7 +13,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding-bottom: 15px; padding-bottom: 15px;
background: var(--background-lighter); background: var(--background-alternative);
} }
.addon-messages-date { .addon-messages-date {
@ -35,17 +37,16 @@
ion-item.addon-message { ion-item.addon-message {
border: 0; border: 0;
border-radius: 4px; border-radius: 4px;
padding: 8px; padding: 0 8px 0 8px;
margin: 8px 8px 0 8px; margin: 10px 8px 0 8px;
--background: var(--addon-messages-message-bg); --background: var(--addon-messages-message-bg);
background: var(--background); background: var(--background);
align-self: flex-start; align-self: flex-start;
width: 90%; width: 90%;
max-width: 90%; max-width: 90%;
min-height: 0; --min-height: var(--a11y-min-target-size);
position: relative; position: relative;
-webkit-transition: width 500ms ease-in-out; @include core-transition(width);
transition: width 500ms ease-in-out;
// This is needed to display bubble tails. // This is needed to display bubble tails.
overflow: visible; overflow: visible;
@ -78,22 +79,19 @@
div { div {
font-weight: 500; font-weight: 500;
flex-grow: 1; flex-grow: 1;
padding-right: .5rem; @include padding-horizontal(.5rem);
padding-left: .5rem;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
ion-note {
text-align: end;;
color: var(--addon-messages-message-note-text);
font-size: var(--addon-messages-message-note-font-size);
}
} }
&.addon-message-no-user .addon-message-user ion-note { ion-note {
width: 100%; color: var(--addon-messages-message-note-text);
font-size: var(--addon-messages-message-note-font-size);
margin: 0;
padding: 0 0 8px 0;
align-self: flex-end;
} }
&:active { &:active {
@ -102,7 +100,7 @@
ion-label { ion-label {
margin: 0; margin: 0;
padding: 0; padding: 8px 0;
} }
.addon-message-text { .addon-message-text {
@ -115,12 +113,9 @@
.addon-messages-delete-button { .addon-messages-delete-button {
min-height: initial; min-height: initial;
line-height: initial; line-height: initial;
margin: 0 0 0 10px; @include margin(0, null, 0, null);
height: 1.6em !important; height: var(--a11y-min-target-size) !important;
-webkit-align-self: flex-end;
align-self: flex-end; align-self: flex-end;
vertical-align: middle;
float: inline-end;
ion-icon { ion-icon {
font-size: 1.4em; font-size: 1.4em;
@ -136,6 +131,7 @@
border: 0.5rem solid transparent; border: 0.5rem solid transparent;
position: absolute; position: absolute;
touch-action: none; touch-action: none;
bottom: 0;
} }
// Defines when an item-message is the user's. // Defines when an item-message is the user's.
@ -148,19 +144,18 @@
} }
.spinner { .spinner {
float: inline-end; @include float(end);
margin: 2px, -3px, -2px, 5px; @include margin(2px, -3px, -2px, 5px);
svg { svg {
width: 16px; width: 16px;
height: 16px; height: 16px;
} }
} }
.tail { .tail {
right: -8px; @include position(null, -8px, null, null);
bottom: -8px; @include margin-horizontal(null, -0.5rem);
margin-right: -0.5rem;
border-bottom-color: var(--addon-messages-message-mine-bg); border-bottom-color: var(--addon-messages-message-mine-bg);
} }
@ -171,9 +166,8 @@
&.addon-message-not-mine .tail { &.addon-message-not-mine .tail {
border-bottom-color: var(--addon-messages-message-bg); border-bottom-color: var(--addon-messages-message-bg);
bottom: -8px; @include position(null, null, null, -8px);
left: -8px; @include margin-horizontal(-0.5rem, null);
margin-left: -0.5rem;
} }
&.addon-message-not-mine.activated .tail { &.addon-message-not-mine.activated .tail {
@ -186,10 +180,7 @@
.item-heading { .item-heading {
margin-bottom: 0; margin-bottom: 0;
} }
margin-top: -8px;
padding-top: 0; padding-top: 0;
border-top-right-radius: 0;
border-top-left-radius: 0;
} }
.has-fab .scroll-content { .has-fab .scroll-content {
@ -211,19 +202,17 @@
line-height: 20px; line-height: 20px;
height: 20px; height: 20px;
width: 20px; width: 20px;
right: -6px; @include position(-6px, -6px, null, null);
top: -6px;
} }
} }
ion-header ion-toolbar .addon-messages-discussion-title { ion-header ion-toolbar h1 {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0; padding: 0;
.core-bar-button-image { .core-bar-button-image {
margin-right: 6px; @include margin-horizontal(null, 6px);
} }
core-format-text { core-format-text {
@ -234,64 +223,13 @@
} }
ion-icon { ion-icon {
margin-left: 6px; @include margin-horizontal(6px, null);
}
}
}
:host-context([dir=rtl]) {
ion-header ion-toolbar .addon-messages-discussion-title {
.core-bar-button-image {
margin-left: 6px;
margin-right: 0;
}
ion-icon {
margin-right: 6px;
margin-left: 0;
}
}
// Message item.
ion-item.addon-message {
.addon-messages-delete-button {
margin-right: 10px;
margin-left: 0;
}
&.addon-message-mine {
.spinner {
margin-right: 5px;
margin-left: -3px;
}
.tail {
right: unset;
left: -8px;
margin-right: unset;
margin-left: 0;
}
}
&.addon-message-not-mine .tail {
right: -8px;
margin-right: -0.5rem;
left: unset;
margin-left: 0;
}
}
ion-fab button {
.core-discussion-messages-badge {
left: -6px;
right: unset;
} }
} }
} }
:host-context(.ios) { :host-context(.ios) {
ion-header ion-toolbar .addon-messages-discussion-title { ion-header ion-toolbar h1 {
justify-content: center; justify-content: center;
} }

63
src/theme/globals.variables.scss
View File

@ -7,27 +7,27 @@
/* /*
* App colors * App colors
*/ */
$shade-0: #000000 !default; $shade-0: #ffffff !default;
$shade-100: #ffffff !default; $shade-100: #000000 !default;
$shade-5: mix($shade-100, $shade-0, 5%) !default; // #0d0d0d $shade-5: mix($shade-100, $shade-0, 5%) !default; // #f2f2f2
$shade-10: mix($shade-100, $shade-0, 10%) !default; // #1a1a1a $shade-10: mix($shade-100, $shade-0, 10%) !default; // #e6e6e6
$shade-15: mix($shade-100, $shade-0, 15%) !default; // #262626 $shade-15: mix($shade-100, $shade-0, 15%) !default; // #d9d9d9
$shade-20: mix($shade-100, $shade-0, 20%) !default; // #333333 $shade-20: mix($shade-100, $shade-0, 20%) !default; // #cccccc
$shade-25: mix($shade-100, $shade-0, 25%) !default; // #404040 $shade-25: mix($shade-100, $shade-0, 25%) !default; // #bfbfbf
$shade-30: mix($shade-100, $shade-0, 30%) !default; // #4d4d4d $shade-30: mix($shade-100, $shade-0, 30%) !default; // #b3b3b3
$shade-35: mix($shade-100, $shade-0, 35%) !default; // #595959 $shade-35: mix($shade-100, $shade-0, 35%) !default; // #a6a6a6
$shade-40: mix($shade-100, $shade-0, 40%) !default; // #666666 $shade-40: mix($shade-100, $shade-0, 40%) !default; // #999999
$shade-45: mix($shade-100, $shade-0, 45%) !default; // #737373 $shade-45: mix($shade-100, $shade-0, 45%) !default; // #8c8c8c
$shade-50: mix($shade-100, $shade-0, 50%) !default; // #808080 $shade-50: mix($shade-100, $shade-0, 50%) !default; // #808080
$shade-55: mix($shade-100, $shade-0, 55%) !default; // #8c8c8c $shade-55: mix($shade-100, $shade-0, 55%) !default; // #737373
$shade-60: mix($shade-100, $shade-0, 60%) !default; // #999999 $shade-60: mix($shade-100, $shade-0, 60%) !default; // #666666
$shade-65: mix($shade-100, $shade-0, 65%) !default; // #a6a6a6 $shade-65: mix($shade-100, $shade-0, 65%) !default; // #595959
$shade-70: mix($shade-100, $shade-0, 70%) !default; // #b3b3b3 $shade-70: mix($shade-100, $shade-0, 70%) !default; // #4d4d4d
$shade-75: mix($shade-100, $shade-0, 75%) !default; // #bfbfbf $shade-75: mix($shade-100, $shade-0, 75%) !default; // #404040
$shade-80: mix($shade-100, $shade-0, 80%) !default; // #cccccc $shade-80: mix($shade-100, $shade-0, 80%) !default; // #333333
$shade-85: mix($shade-100, $shade-0, 85%) !default; // #d9d9d9 $shade-85: mix($shade-100, $shade-0, 85%) !default; // #262626
$shade-90: mix($shade-100, $shade-0, 90%) !default; // #e6e6e6 $shade-90: mix($shade-100, $shade-0, 90%) !default; // #1a1a1a
$shade-95: mix($shade-100, $shade-0, 95%) !default; // #f2f2f2 $shade-95: mix($shade-100, $shade-0, 95%) !default; // #0d0d0d
$black: #282828 !default; // Headings, standard text. $black: #282828 !default; // Headings, standard text.
$gray-darker: #686566 !default; // Text (emphasis-detail), placeholder, background. $gray-darker: #686566 !default; // Text (emphasis-detail), placeholder, background.
@ -35,7 +35,7 @@ $gray-dark: #9e9e9e !default; // Borders (never text).
$gray: #dddddd !default; $gray: #dddddd !default;
$gray-light: #e9e9e9 !default; // Background. $gray-light: #e9e9e9 !default; // Background.
$gray-lighter: #f5f5f5 !default; $gray-lighter: #f5f5f5 !default;
$white: $shade-100 !default; // Background, reversed text. $white: $shade-0 !default; // Background, reversed text.
$blue: #0064d2 !default; // Link, background. $blue: #0064d2 !default; // Link, background.
@ -72,15 +72,17 @@ $text-color-dark: $white !default;
$link-color: $blue !default; $link-color: $blue !default;
$link-color-dark: $blue-light !default; $link-color-dark: $blue-light !default;
$background-color: $gray-light !default; $background-color: $gray-light !default;
$background-color-dark: #{$shade-10} !default; $background-color-dark: #{$shade-90} !default;
$subdued-text-color: $gray-darker !default; $subdued-text-color: $gray-darker !default;
$ion-item-background: $white !default; $ion-item-background: $white !default;
$ion-item-background-dark: #{$shade-20} !default; $ion-item-background-dark: #{$shade-80} !default;
$ion-item-divider-background: #{$gray-lighter} !default; $ion-item-divider-background: #{$gray-lighter} !default;
$ion-item-divider-color: #{$text-color} !default; $ion-item-divider-color: #{$text-color} !default;
$ion-item-divider-background-dark: #{$shade-25} !default; $core-spacer-background: #{$ion-item-divider-background} !default;
$ion-item-divider-background-dark: #{$shade-75} !default;
$ion-item-divider-color-dark: #{$text-color-dark} !default; $ion-item-divider-color-dark: #{$text-color-dark} !default;
$core-spacer-background-dark: #{$shade-100} !default;
$core-online-color: #5cb85c !default; $core-online-color: #5cb85c !default;
@ -274,7 +276,7 @@ $toolbar-height-ios: 54px !default;
// Bottom tab bar. // Bottom tab bar.
$bottom-tabs-background: $white !default; $bottom-tabs-background: $white !default;
$bottom-tabs-background-dark: $shade-15 !default; $bottom-tabs-background-dark: $shade-85 !default;
$bottom-tabs-color: $gray-darker !default; $bottom-tabs-color: $gray-darker !default;
$bottom-tabs-color-dark: $white !default; $bottom-tabs-color-dark: $white !default;
$bottom-tabs-color-selected: $primary !default; $bottom-tabs-color-selected: $primary !default;
@ -296,7 +298,7 @@ $core-tab-border-color: $gray !default;
$core-tab-color-active: $primary !default; $core-tab-color-active: $primary !default;
$core-tab-color-active-dark: $primary-dark !default; $core-tab-color-active-dark: $primary-dark !default;
$core-tabs-background-dark: $shade-25 !default; $core-tabs-background-dark: $shade-75 !default;
$core-tab-background-dark: $core-tabs-background-dark !default; $core-tab-background-dark: $core-tabs-background-dark !default;
$core-tab-color-dark: $white !default; $core-tab-color-dark: $white !default;
$core-tab-border-color-dark: $gray-light !default; $core-tab-border-color-dark: $gray-light !default;
@ -363,11 +365,12 @@ $addon-messages-avatar-size: 30px !default;
$addon-messages-discussion-badge: $primary !default; $addon-messages-discussion-badge: $primary !default;
$addon-messages-discussion-badge-text: $white !default; $addon-messages-discussion-badge-text: $white !default;
$addon-messages-message-bg-dark: $black !default; $addon-messages-message-bg-dark: $shade-75 !default;
$addon-messages-message-activated-bg-dark: $gray-dark !default;
$addon-messages-message-activated-bg-dark: $shade-65 !default;
$addon-messages-message-note-text-dark: $gray-light !default; $addon-messages-message-note-text-dark: $gray-light !default;
$addon-messages-message-mine-bg-dark: $shade-0 !default; $addon-messages-message-mine-bg-dark: $shade-60 !default;
$addon-messages-message-mine-activated-bg-dark: $gray !default; $addon-messages-message-mine-activated-bg-dark: $shade-50 !default;
$addon-messages-discussion-badge-dark: $primary-dark !default; $addon-messages-discussion-badge-dark: $primary-dark !default;
$addon-messages-discussion-badge-text-dark: $black !default; $addon-messages-discussion-badge-text-dark: $black !default;

6
src/theme/theme.base.scss
View File

@ -464,6 +464,12 @@ ion-item img.core-module-icon[slot="start"] {
margin-right: 32px; margin-right: 32px;
} }
ion-card ion-item img.core-module-icon[slot="start"] {
margin-top: 12px;
margin-bottom: 12px;
margin-right: 12px;
}
[dir=rtl] ion-item img.core-module-icon[slot="start"] { [dir=rtl] ion-item img.core-module-icon[slot="start"] {
margin-right: unset; margin-right: unset;
margin-left: 32px; margin-left: 32px;

5
src/theme/theme.dark.scss
View File

@ -48,14 +48,14 @@
@include generate-color($color-name, $colors-dark); @include generate-color($color-name, $colors-dark);
} }
--ion-border-color: #{$shade-15}; --ion-border-color: #{$shade-85};
--ion-card-color: #{$text-color-dark}; --ion-card-color: #{$text-color-dark};
--ion-card-background: #{$ion-item-background-dark}; --ion-card-background: #{$ion-item-background-dark};
ion-content { ion-content {
--background: var(--ion-background-color); --background: var(--ion-background-color);
--background-lighter: var(--gray-darker); --background-alternative: var(--black);
--contrast-background: var(--ion-background-color); --contrast-background: var(--ion-background-color);
} }
@ -88,6 +88,7 @@
--ion-item-detail-icon-color: var(--white); --ion-item-detail-icon-color: var(--white);
--item-divider-background: #{$ion-item-divider-background-dark}; --item-divider-background: #{$ion-item-divider-background-dark};
--item-divider-color: #{$ion-item-divider-color-dark}; --item-divider-color: #{$ion-item-divider-color-dark};
--spacer-background: #{$core-spacer-background-dark};
--core-combobox-background: var(--ion-item-background); --core-combobox-background: var(--ion-item-background);
--core-combobox-color: #{$core-combobox-color-dark}; --core-combobox-color: #{$core-combobox-color-dark};

8
src/theme/theme.light.scss
View File

@ -80,7 +80,7 @@
ion-content { ion-content {
--background: var(--ion-background-color); --background: var(--ion-background-color);
--background-lighter: var(--gray-lighter); --background-alternative: var(--gray-lighter);
--contrast-background: var(--white); --contrast-background: var(--white);
} }
@ -193,6 +193,12 @@
min-height: var(--min-height); min-height: var(--min-height);
} }
--spacer-background: #{$core-spacer-background};
core-spacer {
--item-divider-background: var(--spacer-background);
}
--core-combobox-background: var(--ion-item-background); --core-combobox-background: var(--ion-item-background);
--core-combobox-color: #{$core-combobox-color}; --core-combobox-color: #{$core-combobox-color};