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

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

@ -4,7 +4,6 @@
<ion-back-button [text]="'core.back' | translate"></ion-back-button>
</ion-buttons>
<h1>
<div class="addon-messages-discussion-title">
<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"
[siteId]="siteId || null">
@ -19,7 +18,6 @@
<ion-icon *ngIf="conversation && conversation.ismuted" name="fas-bell-slash"
[attr.aria-label]="'addon.messages.mutedconversation' | translate">
</ion-icon>
</div>
</h1>
<ion-buttons slot="end"></ion-buttons>
</ion-toolbar>
@ -101,11 +99,6 @@
*ngIf="message.showUserData"></core-user-avatar>
<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>
<!-- 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>
</p>
</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)"
class="addon-messages-delete-button" [@coreSlideInOut]="'fromRight'"
[attr.aria-label]=" 'addon.messages.deletemessage' | translate" slot="end">

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

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

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

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

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

@ -48,14 +48,14 @@
@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-background: #{$ion-item-background-dark};
ion-content {
--background: var(--ion-background-color);
--background-lighter: var(--gray-darker);
--background-alternative: var(--black);
--contrast-background: var(--ion-background-color);
}
@ -88,6 +88,7 @@
--ion-item-detail-icon-color: var(--white);
--item-divider-background: #{$ion-item-divider-background-dark};
--item-divider-color: #{$ion-item-divider-color-dark};
--spacer-background: #{$core-spacer-background-dark};
--core-combobox-background: var(--ion-item-background);
--core-combobox-color: #{$core-combobox-color-dark};

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

@ -80,7 +80,7 @@
ion-content {
--background: var(--ion-background-color);
--background-lighter: var(--gray-lighter);
--background-alternative: var(--gray-lighter);
--contrast-background: var(--white);
}
@ -193,6 +193,12 @@
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-color: #{$core-combobox-color};