GuzhavinAleksey/Vmeda.Online
1
0
Fork 0
forked from CIT/Vmeda.Online
Code Pull Requests Activity

MOBILE-3931 login: Style oauth providers as buttons

Browse Source
This commit is contained in:
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>
</ion-label>
</ion-item>
<ion-item button *ngFor="let provider of identityProviders" class="ion-text-wrap core-oauth-icon"
(click)="oauthClicked(provider)" [attr.aria-label]="provider.name" detail="false">
<ion-button fill="outline" *ngFor="let provider of identityProviders" class="ion-text-wrap core-oauth-provider"
(click)="oauthClicked(provider)" [attr.aria-label]="provider.name" expand="block">
<img [src]="provider.iconurl" alt="" width="32" height="32" slot="start">
<ion-label>{{provider.name}}</ion-label>
</ion-item>
</ion-button>
</ion-list>
<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>
</ion-label>
</ion-item>
<ion-item button *ngFor="let provider of identityProviders" class="ion-text-wrap core-oauth-icon" (click)="oauthClicked(provider)"
detail="false">
<img [src]="provider.iconurl" alt="" role="presentation" width="32" height="32" slot="start">
<ion-button fill="outline" *ngFor="let provider of identityProviders" class="ion-text-wrap core-oauth-provider"
(click)="oauthClicked(provider)" [attr.aria-label]="provider.name" expand="block">
<img [src]="provider.iconurl" alt="" width="32" height="32" slot="start">
<ion-label>{{provider.name}}</ion-label>
</ion-item>
</ion-button>
</ion-list>
<!-- 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 {
margin: 4px 8px;
ion-spinner[slot=start] {
ion-spinner[slot=start],
img[slot=start] {
@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);
}
}
@ -468,6 +470,14 @@ ion-alert {
}
}
ion-loading {
--border-radius: var(--huge-radius);
.loading-wrapper {
border-radius: var(--border-radius) !important;
}
}
// Ionic list.
ion-list {
padding: 0 !important;