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

Merge pull request #2787 from crazyserver/MOBILE-3320 

Mobile 3320
main
Dani Palou 2021-05-21 15:52:38 +02:00 committed by GitHub
parent aa889a4d97 d23ff1aba7
commit 86a279c72f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 195 additions and 198 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.github/workflows/testing.yml vendored
View File

@ -24,7 +24,7 @@ jobs:
fi fi
gulp gulp
langcount=`jq -r '. | length' src/assets/lang/en.json` langcount=`jq -r '. | length' src/assets/lang/en.json`
freemiumcount=`jq 'keys' src/assets/lang/en.json | grep "freemium." | wc -l | xargs` freemiumcount=`jq 'keys' src/assets/lang/en.json | grep "freemium\." | wc -l | xargs`
allcount=$(($langcount - $freemiumcount)) allcount=$(($langcount - $freemiumcount))
langindexcount=`jq -r '. | length' scripts/langindex.json` langindexcount=`jq -r '. | length' scripts/langindex.json`
if [ $allcount -ne $langindexcount ]; then if [ $allcount -ne $langindexcount ]; then
@ -32,7 +32,7 @@ jobs:
exit 1 exit 1
fi fi
langkeys=`jq -r 'keys[]' src/assets/lang/en.json` langkeys=`jq -r 'keys[]' src/assets/lang/en.json | grep -v "freemium\."`
langindex=`jq -r 'keys[]' scripts/langindex.json` langindex=`jq -r 'keys[]' scripts/langindex.json`
found=0 found=0
for i in $langkeys; do for i in $langkeys; do

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;
} }

10
src/core/components/tabs/tabs.scss
View File

@ -1,6 +1,7 @@
:host { :host {
--tabs-background: var(--core-tabs-background); --tabs-background: var(--core-tabs-background);
--tabs-color: var(--color); --tabs-color: var(--color);
--height: 56px;
height: 100%; height: 100%;
display: block; display: block;
@ -12,8 +13,8 @@
ion-tab-bar.core-tabs-bar { ion-tab-bar.core-tabs-bar {
position: relative; position: relative;
width: 100%; width: 100%;
height: auto;
background: var(--tabs-background); background: var(--tabs-background);
height: var(--height);
color: var(--tabs-color); color: var(--tabs-color);
-webkit-filter: drop-shadow(0px 3px 3px rgba(var(--drop-shadow))); -webkit-filter: drop-shadow(0px 3px 3px rgba(var(--drop-shadow)));
filter: drop-shadow(0px 3px 3px rgba(var(--drop-shadow))); filter: drop-shadow(0px 3px 3px rgba(var(--drop-shadow)));
@ -26,7 +27,7 @@
.tab-slide { .tab-slide {
border-bottom: 2px solid transparent; border-bottom: 2px solid transparent;
min-width: 100px; min-width: 100px;
min-height: 56px; min-height: var(--height);
cursor: pointer; cursor: pointer;
overflow: hidden; overflow: hidden;
@ -95,3 +96,8 @@
} }
} }
} }
:host-context(.ios) {
--height: 53px;
}

13
src/core/directives/format-text.ts
View File

@ -206,20 +206,21 @@ export class CoreFormatTextDirective implements OnChanges {
const imgSrc = CoreTextUtils.escapeHTML(img.getAttribute('data-original-src') || img.getAttribute('src')); const imgSrc = CoreTextUtils.escapeHTML(img.getAttribute('data-original-src') || img.getAttribute('src'));
const label = Translate.instant('core.openfullimage'); const label = Translate.instant('core.openfullimage');
const anchor = document.createElement('a'); const button = document.createElement('button');
anchor.classList.add('core-image-viewer-icon'); button.classList.add('core-image-viewer-icon');
anchor.setAttribute('aria-label', label); button.setAttribute('aria-label', label);
// Add an ion-icon item to apply the right styles, but the ion-icon component won't be executed. // Add an ion-icon item to apply the right styles, but the ion-icon component won't be executed.
anchor.innerHTML = '<ion-icon name="fas-search" src="assets/fonts/font-awesome/solid/search.svg"></ion-icon>'; button.innerHTML = '<ion-icon name="fas-search" aria-hidden="true" src="assets/fonts/font-awesome/solid/search.svg">\
</ion-icon>';
anchor.addEventListener('click', (e: Event) => { button.addEventListener('click', (e: Event) => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
CoreDomUtils.viewImage(imgSrc, img.getAttribute('alt'), this.component, this.componentId, true); CoreDomUtils.viewImage(imgSrc, img.getAttribute('alt'), this.component, this.componentId, true);
}); });
img.parentNode?.appendChild(anchor); img.parentNode?.appendChild(button);
}); });
} }

50
src/theme/components/format-text.scss
View File

@ -2,6 +2,18 @@
/** Styles of elements inside the directive should be placed in format-text.scss */ /** Styles of elements inside the directive should be placed in format-text.scss */
@import "~theme/globals"; @import "~theme/globals";
:root {
--background: var(--background, #{$ion-item-background});
--background-gradient-rgb: var(--background-rgb, #{color-to-rgb-list($ion-item-background)});
--viewer-icon-background: rgba(255, 255, 255, .5);
}
:root body.dark {
--background: var(--background, #{$ion-item-background-dark});
--background-gradient-rgb: var(--background-rgb, #{color-to-rgb-list($ion-item-background-dark)});
--viewer-icon-background: rgba(0, 0, 0, .5);
}
core-format-text { core-format-text {
user-select: text; user-select: text;
word-break: break-word; word-break: break-word;
@ -47,20 +59,19 @@ core-format-text {
z-index: 7; z-index: 7;
background-color: var(--background); background-color: var(--background);
color: var(--text-color); color: var(--text-color);
padding-left: 10px; // RTL @include padding(null, null, null, 10px);
margin: 0;
} }
&:before { &:before {
content: ''; content: '';
height: 100%; height: 100%;
position: absolute; position: absolute;
right: 0; @include position(null, 0, 0, 0);
bottom: 0; background: -moz-linear-gradient(top, rgba(var(--background-gradient-rgb), 0) calc(100% - 50px), rgba(var(--background-gradient-rgb), 1) calc(100% - 15px));
left: 0; background: -webkit-gradient(left top, left bottom, color-stop(calc(100% - 50px), rgba(var(--background-gradient-rgb), 0)), color-stop(calc(100% - 15px), rgba(var(--background-gradient-rgb), 1)));
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) calc(100% - 50px), var(--background) calc(100% - 15px)); background: -webkit-linear-gradient(top, rgba(var(--background-gradient-rgb), 0) calc(100% - 50px), rgba(var(--background-gradient-rgb), 1) calc(100% - 15px));
background: -webkit-gradient(left top, left bottom, color-stop(calc(100% - 50px), rgba(0, 0, 0, 0)), color-stop(calc(100% - 15px), var(--background))); background: linear-gradient(to bottom, rgba(var(--background-gradient-rgb), 0) calc(100% - 50px), rgba(var(--background-gradient-rgb), 1) calc(100% - 15px));
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) calc(100% - 50px), var(--background) calc(100% - 15px));
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) calc(100% - 50px), var(--background) calc(100% - 15px));
z-index: 6; z-index: 6;
} }
} }
@ -70,7 +81,7 @@ core-format-text {
.core-show-more { .core-show-more {
@include push-arrow-color(626262, true); @include push-arrow-color(626262, true);
@include padding-horizontal(null, 5px); @include padding-horizontal(null, 5px);
@include background-position(end, 0, center); @include background-position(end, 5px, center);
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 14px 14px; background-size: 14px 14px;
@ -93,18 +104,17 @@ core-format-text {
@include position(null, 10px, 10px, null); @include position(null, 10px, 10px, null);
color: var(--black); color: var(--black);
border-radius: 5px; border-radius: 5px;
background-color: rgba(255, 255, 255, .5); background-color: var(--viewer-icon-background);
text-align: center; display: flex;
cursor: pointer;
width: 32px; width: var(--a11y-min-target-size);
height: 32px; height: var(--a11y-min-target-size);
max-width: 32px; max-width: var(--a11y-min-target-size);
line-height: 32px;
font-size: 24px; font-size: 24px;
ion-icon { ion-icon {
margin-top: 3px; flex: 1;
align-self: center;
} }
&:hover { &:hover {
@ -112,9 +122,3 @@ core-format-text {
} }
} }
} }
body.dark {
core-format-text .core-image-viewer-icon {
background-color: rgba(0, 0, 0, .5);
}
}

69
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-color-dark: #{$text-color-dark} !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; $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;

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

@ -50,16 +50,54 @@
.font-sm { font-size: 1.2rem; } .font-sm { font-size: 1.2rem; }
// Headings. // Headings.
.item-heading { // Some styles taken from ion-label
font-size: 16px !important; ion-label .item-heading {
color: initial !important; text-overflow: inherit;
overflow: inherit;
--color: initial;
color: var(--color);
line-height: 20px;
} }
.md ion-label .item-heading {
@include margin(2px, 0);
font-size: 16px;
font-weight: normal;
&.item-heading-secondary {
@include margin(2px, 0);
font-size: 14px;
font-weight: normal;
line-height: normal;
}
}
.ios ion-label .item-heading {
@include margin(0, 0, 2px);
font-size: 17px;
font-weight: normal;
&.item-heading-secondary {
@include margin(0, 0, 3px);
font-size: 14px;
font-weight: normal;
line-height: normal;
}
}
// Some styles taken from ion-title
ion-header h1, ion-header h1,
ion-header h2 { ion-header h2 {
display: block; display: block;
transform: translateZ(0); transform: translateZ(0);
color: initial; --color: initial;
color: var(--color);
margin: 0; margin: 0;
width: 100%; width: 100%;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -70,7 +108,7 @@ ion-header h2 {
ion-app.md ion-header h1, ion-app.md ion-header h1,
ion-app.md ion-header h2 { ion-app.md ion-header h2 {
padding-inline: 20px; @include padding(0, 20px);
font-size: 20px; font-size: 20px;
font-weight: 500; font-weight: 500;
letter-spacing: .0125em; letter-spacing: .0125em;
@ -78,14 +116,11 @@ ion-app.md ion-header h2 {
ion-app.ios ion-header h1, ion-app.ios ion-header h1,
ion-app.ios ion-header h2 { ion-app.ios ion-header h2 {
top: 0; @include position(0, null, null, 0);
left: 0; @include padding(0, 90px, 0);
padding-inline: 90px;
position: absolute; position: absolute;
display: block;
text-align: center; text-align: center;
width: 100%;
transform: translateZ(0);
font-size: 17px; font-size: 17px;
font-weight: 600; font-weight: 600;
line-height: #{$toolbar-height-ios}; line-height: #{$toolbar-height-ios};
@ -429,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;

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

@ -7,10 +7,10 @@
:root body.dark { :root body.dark {
--ion-background-color: #{$background-color-dark}; --ion-background-color: #{$background-color-dark};
--ion-background-color-rgb: color-to-rgb-list(var(--ion-background-color)); --ion-background-color-rgb: #{color-to-rgb-list($background-color-dark)};
--ion-text-color: #{$text-color-dark}; --ion-text-color: #{$text-color-dark};
--ion-text-color-rgb: color-to-rgb-list(var(--ion-text-color)); --ion-text-color-rgb: #{color-to-rgb-list($text-color-dark)};
// Enlighten the ionic shades. // Enlighten the ionic shades.
--ion-color-step-50: #1e1e1e; --ion-color-step-50: #1e1e1e;
@ -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};

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

@ -70,7 +70,7 @@
--module-icon-size: 24px; --module-icon-size: 24px;
--ion-background-color: #{$background-color}; --ion-background-color: #{$background-color};
--ion-background-color-rgb: color-to-rgb-list(var(--ion-background-color)); --ion-background-color-rgb: #{color-to-rgb-list($background-color)};
--ion-text-color: #{$text-color}; --ion-text-color: #{$text-color};
--ion-text-color-rgb: 58,58,58; --ion-text-color-rgb: 58,58,58;
@ -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};