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

MOBILE-3931 login: Style oauth providers as buttons

main
Pau Ferrer Ocaña 2022-02-17 13:22:49 +01:00
parent 9bab09dace
commit c2ec52584c
3 changed files with 19 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/core/features/login/pages/credentials/credentials.html
View File

@ -73,11 +73,11 @@
<h3 class="item-heading">{{ 'core.login.potentialidps' | translate }}</h3> <h3 class="item-heading">{{ 'core.login.potentialidps' | translate }}</h3>
</ion-label> </ion-label>
</ion-item> </ion-item>
<ion-item button *ngFor="let provider of identityProviders" class="ion-text-wrap core-oauth-icon" <ion-button fill="outline" *ngFor="let provider of identityProviders" class="ion-text-wrap core-oauth-provider"
(click)="oauthClicked(provider)" [attr.aria-label]="provider.name" detail="false"> (click)="oauthClicked(provider)" [attr.aria-label]="provider.name" expand="block">
<img [src]="provider.iconurl" alt="" width="32" height="32" slot="start"> <img [src]="provider.iconurl" alt="" width="32" height="32" slot="start">
<ion-label>{{provider.name}}</ion-label> <ion-label>{{provider.name}}</ion-label>
</ion-item> </ion-button>
</ion-list> </ion-list>
<ion-list *ngIf="canSignup" class="ion-padding-top core-login-sign-up"> <ion-list *ngIf="canSignup" class="ion-padding-top core-login-sign-up">

8
src/core/features/login/pages/reconnect/reconnect.html
View File

@ -87,11 +87,11 @@
<h3 class="item-heading">{{ 'core.login.potentialidps' | translate }}</h3> <h3 class="item-heading">{{ 'core.login.potentialidps' | translate }}</h3>
</ion-label> </ion-label>
</ion-item> </ion-item>
<ion-item button *ngFor="let provider of identityProviders" class="ion-text-wrap core-oauth-icon" (click)="oauthClicked(provider)" <ion-button fill="outline" *ngFor="let provider of identityProviders" class="ion-text-wrap core-oauth-provider"
detail="false"> (click)="oauthClicked(provider)" [attr.aria-label]="provider.name" expand="block">
<img [src]="provider.iconurl" alt="" role="presentation" width="32" height="32" slot="start"> <img [src]="provider.iconurl" alt="" width="32" height="32" slot="start">
<ion-label>{{provider.name}}</ion-label> <ion-label>{{provider.name}}</ion-label>
</ion-item> </ion-button>
</ion-list> </ion-list>
<!-- If OAuth, display cancel button since the form isn't displayed. --> <!-- If OAuth, display cancel button since the form isn't displayed. -->

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

@ -298,11 +298,13 @@ button,
ion-button { ion-button {
margin: 4px 8px; margin: 4px 8px;
ion-spinner[slot=start] { ion-spinner[slot=start],
img[slot=start] {
@include margin-horizontal(-0.3em, 0.3em); @include margin-horizontal(-0.3em, 0.3em);
} }
ion-spinner[slot=end] { ion-spinner[slot=end],
img[slot=end] {
@include margin-horizontal(-0.3em, 0.3em); @include margin-horizontal(-0.3em, 0.3em);
} }
} }
@ -468,6 +470,14 @@ ion-alert {
} }
} }
ion-loading {
--border-radius: var(--huge-radius);
.loading-wrapper {
border-radius: var(--border-radius) !important;
}
}
// Ionic list. // Ionic list.
ion-list { ion-list {
padding: 0 !important; padding: 0 !important;