MOBILE-3565 core: Style loading and show password components
Pau Ferrer Ocaña
parent
176407a613
commit
14decb9c01
|
|
@ -1,6 +1,6 @@
|
|||
<div class="core-loading-container" *ngIf="!hideUntil" role="status"> <!-- @todo [@coreShowHideAnimation] -->
|
||||
<span class="core-loading-spinner">
|
||||
<ion-spinner></ion-spinner>
|
||||
<ion-spinner color="primary"></ion-spinner>
|
||||
<p class="core-loading-message" *ngIf="message" role="status">{{message}}</p>
|
||||
</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,31 @@
|
|||
ion-app.app-root {
|
||||
core-loading {
|
||||
// @todo @include core-transition(height, 200ms);
|
||||
:host {
|
||||
position: static;
|
||||
-webkit-transition: height 200ms ease-in-out;
|
||||
transition: height 200ms ease-in-out;
|
||||
|
||||
.core-loading-container {
|
||||
> .core-loading-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
display: table;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding-top: 10px;
|
||||
clear: both;
|
||||
/* @todo @include darkmode() {
|
||||
color: $core-dark-text-color;
|
||||
} */
|
||||
z-index: 3;
|
||||
margin: 0;
|
||||
padding: 10px 0 0 0;
|
||||
background-color: rgba(255, 255, 255, 0.26);
|
||||
-webkit-transition: all 200ms ease-in-out;
|
||||
transition: all 200ms ease-in-out;
|
||||
|
||||
.core-loading-spinner {
|
||||
display: table-cell;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.core-loading-content {
|
||||
|
|
@ -21,47 +37,7 @@ ion-app.app-root {
|
|||
height: auto;
|
||||
}
|
||||
|
||||
&.safe-area-page {
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
|
||||
> .core-loading-content > *:not[padding],
|
||||
> .core-loading-content-loading > *:not[padding] {
|
||||
// @todo @include safe-area-padding-horizontal(0px, 0px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-content > core-loading,
|
||||
ion-content > .scroll-content > core-loading,
|
||||
core-tab core-loading,
|
||||
.core-loading-center {
|
||||
position: static !important;
|
||||
}
|
||||
|
||||
.scroll-content > core-loading,
|
||||
ion-content > .scroll-content > core-loading,
|
||||
core-tab core-loading,
|
||||
.core-loading-center,
|
||||
core-loading.core-loading-loaded {
|
||||
&.core-loading-loaded {
|
||||
position: relative;
|
||||
|
||||
> .core-loading-container {
|
||||
position: absolute;
|
||||
// @todo @include position(0, 0, 0, 0);
|
||||
display: table;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
clear: both;
|
||||
|
||||
.core-loading-spinner {
|
||||
display: table-cell;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<ng-content></ng-content>
|
||||
<ion-button icon-only clear [attr.aria-label]="label | translate" [core-suppress-events] (onClick)="toggle($event)">
|
||||
<ion-icon [name]="iconName"></ion-icon>
|
||||
<slot></slot>
|
||||
<ion-button fill="clear" [attr.aria-label]="label | translate" core-suppress-events (onClick)="toggle($event)">
|
||||
<ion-icon [name]="iconName" slot="icon-only"></ion-icon>
|
||||
</ion-button>
|
||||
|
|
|
|||
|
|
@ -1,38 +1,35 @@
|
|||
ion-app.app-root core-show-password {
|
||||
padding: 0px;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
:host {
|
||||
display: contents;
|
||||
|
||||
ion-input input.text-input {
|
||||
// @todo @include padding(null, 47px, null, null);
|
||||
}
|
||||
|
||||
.button[icon-only] {
|
||||
ion-button {
|
||||
background: transparent;
|
||||
// @todo padding: 0 ($content-padding / 2);
|
||||
padding: 0 calc(var(--padding-start) / 2);
|
||||
position: absolute;
|
||||
// @todo @include position(null, 0, $content-padding / 2, null);
|
||||
right: 0;
|
||||
bottom: calc(var(--padding-bottom) / 2);
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.core-ioninput-password {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
z-index: 3;
|
||||
}
|
||||
}
|
||||
|
||||
ion-app.app-root.md {
|
||||
.item-label-stacked core-show-password .button[icon-only] {
|
||||
::slotted(ion-input) {
|
||||
--padding-end: 47px !important;
|
||||
}
|
||||
|
||||
:host-context([dir="rtl"]) ion-button {
|
||||
left: 0;
|
||||
right: unset;
|
||||
}
|
||||
|
||||
:host-context(.md.item-label.stacked) ion-button {
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
ion-app.app-root.ios {
|
||||
.item-label-stacked core-show-password .button[icon-only] {
|
||||
:host-context(.iositem-label.stacked) ion-button {
|
||||
bottom: -5px;
|
||||
}
|
||||
core-show-password .button[icon-only] {
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
:host-context(.ios) ion-button {
|
||||
bottom: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
// See the License for the specific language governing permissions and
|
||||
// limitations under the License.
|
||||
|
||||
import { Component, OnInit, AfterViewInit, Input, ElementRef, ContentChild } from '@angular/core';
|
||||
import { Component, OnInit, AfterViewInit, Input, ElementRef, ContentChild, ViewEncapsulation } from '@angular/core';
|
||||
import { IonInput } from '@ionic/angular';
|
||||
|
||||
import { CoreApp } from '@services/app';
|
||||
|
|
@ -29,7 +29,7 @@ import { CoreUtils } from '@services/utils/utils';
|
|||
*
|
||||
* Example:
|
||||
*
|
||||
* <core-show-password item-content [name]="'password'">
|
||||
* <core-show-password [name]="'password'">
|
||||
* <ion-input type="password" name="password"></ion-input>
|
||||
* </core-show-password>
|
||||
*/
|
||||
|
|
@ -37,6 +37,7 @@ import { CoreUtils } from '@services/utils/utils';
|
|||
selector: 'core-show-password',
|
||||
templateUrl: 'core-show-password.html',
|
||||
styleUrls: ['show-password.scss'],
|
||||
encapsulation: ViewEncapsulation.ShadowDom,
|
||||
})
|
||||
export class CoreShowPasswordComponent implements OnInit, AfterViewInit {
|
||||
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
"back": "Back",
|
||||
"browser": "Browser",
|
||||
"copiedtoclipboard": "Text copied to clipboard",
|
||||
"loading": "Loading",
|
||||
"no": "No",
|
||||
"offline": "Offline",
|
||||
"ok": "OK",
|
||||
|
|
|
|||
|
|
@ -340,6 +340,7 @@
|
|||
"core.courses.sendpaymentbutton": "Send payment via PayPal",
|
||||
"core.courses.show": "Restore to view",
|
||||
"core.courses.totalcoursesearchresults": "Total courses: {{$a}}",
|
||||
"core.loading": "Loading",
|
||||
"core.login.auth_email": "Email-based self-registration",
|
||||
"core.login.authenticating": "Authenticating",
|
||||
"core.login.cancel": "Cancel",
|
||||
|
|
|
|||
Loading…
Reference in New Issue