Skip to content
This repository has been archived by the owner on Aug 30, 2021. It is now read-only.

Commit

Permalink
feat(ui): improved social login buttons UI (#1471)
Browse files Browse the repository at this point in the history
  • Loading branch information
@hyperreality @lirantal
hyperreality authored and lirantal committed Sep 3, 2016
1 parent c0f6cb3 commit c2cfc38
Show file tree
Hide file tree
Showing 4 changed files with 56 additions and 62 deletions.
45 changes: 13 additions & 32 deletions modules/users/client/css/users.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,46 +7,27 @@
display: inline-block;
position: relative;
}
.btn-remove-account {
.btn-add-remove-account {
top: 10px;
right: 10px;
position: absolute;
}
.btn-file {
position: relative;
overflow: hidden;
}
.btn-file input[type=file] {
position: absolute;
top: 0;
right: 0;
min-width: 100%;
min-height: 100%;
font-size: 100px;
text-align: right;
filter: alpha(opacity=0);
opacity: 0;
background: white;
cursor: inherit;
display: block;
pointer-events: none;

This comment has been minimized.

Sign in to view

Copy link
@mleanos

mleanos Sep 13, 2016

Member

@hyperreality Why was this added here? The "remove" account buttons aren't working for me on the Manage Social Accounts view. If I remove this line, they work again.
}
.user-profile-picture {
min-height: 150px;
max-height: 150px;
}
.cropArea {
background: #E4E4E4;
width: 300px;
height: 300px;
background: #E4E4E4;
width: 300px;
height: 300px;
}
.social-button {
-webkit-transition-duration: 0.4s;
-moz-transition-duration: 0.4s;
-o-transition-duration: 0.4s;
transition-duration: 0.4s;
}

.social {
-webkit-transition-duration: 0.4s;
-moz-transition-duration: 0.4s;
-o-transition-duration: 0.4s;
transition-duration: 0.4s;
.social-button:hover {
opacity: 0.65;
}

.social:hover {
opacity: 0.65;
}
18 changes: 8 additions & 10 deletions modules/users/client/views/authentication/authentication.client.view.html
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,12 @@
<section class="row">
<h3 class="col-xs-12 text-center">Sign in using your social accounts</h3>
<div class="row col-xs-12 col-md-6 text-center">
<div class="col-xs-4 social"><a class="btn"><img class="img-responsive" ng-click="vm.callOauthProvider('/api/auth/facebook')" ng-src="/modules/users/client/img/buttons/facebook.png"></a></div>
<div class="col-xs-4 social"><a class="btn"><img class="img-responsive" ng-click="vm.callOauthProvider('/api/auth/twitter')" ng-src="/modules/users/client/img/buttons/twitter.png"></a></div>
<div class="col-xs-4 social"><a class="btn"><img class="img-responsive" ng-click="vm.callOauthProvider('/api/auth/google')" ng-src="/modules/users/client/img/buttons/google.png"></a></div>
</div>
<div class="row col-xs-12 col-md-6 text-center">
<div class="col-xs-4 social"><a class="btn"><img class="img-responsive" ng-click="vm.callOauthProvider('/api/auth/linkedin')" ng-src="/modules/users/client/img/buttons/linkedin.png"></a></div>
<div class="col-xs-4 social"><a class="btn"><img class="img-responsive" ng-click="vm.callOauthProvider('/api/auth/github')" ng-src="/modules/users/client/img/buttons/github.png"></a></div>
<div class="col-xs-4 social"><a class="btn"><img class="img-responsive" ng-click="vm.callOauthProvider('/api/auth/paypal')" ng-src="/modules/users/client/img/buttons/paypal.png"></a></div>
<h3 class="col-md-12 text-center">Sign in using your social accounts</h3>
<div class="col-md-12 text-center">
<div class="social-account-container social-button"><a class="btn"><img class="img-responsive" ng-click="vm.callOauthProvider('/api/auth/facebook')" ng-src="/modules/users/client/img/buttons/facebook.png"></a></div>
<div class="social-account-container social-button"><a class="btn"><img class="img-responsive" ng-click="vm.callOauthProvider('/api/auth/twitter')" ng-src="/modules/users/client/img/buttons/twitter.png"></a></div>
<div class="social-account-container social-button"><a class="btn"><img class="img-responsive" ng-click="vm.callOauthProvider('/api/auth/google')" ng-src="/modules/users/client/img/buttons/google.png"></a></div>
<div class="social-account-container social-button"><a class="btn"><img class="img-responsive" ng-click="vm.callOauthProvider('/api/auth/linkedin')" ng-src="/modules/users/client/img/buttons/linkedin.png"></a></div>
<div class="social-account-container social-button"><a class="btn"><img class="img-responsive" ng-click="vm.callOauthProvider('/api/auth/github')" ng-src="/modules/users/client/img/buttons/github.png"></a></div>
<div class="social-account-container social-button"><a class="btn"><img class="img-responsive" ng-click="vm.callOauthProvider('/api/auth/paypal')" ng-src="/modules/users/client/img/buttons/paypal.png"></a></div>
</div>
<div ui-view></div>
</section>
3 changes: 3 additions & 0 deletions modules/users/client/views/authentication/signin.client.view.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,9 @@ <h3 class="col-xs-12 text-center">Or with your account</h3>
<div class="text-center forgot-password">
<a ui-sref="password.forgot">Forgot your password?</a>
</div>
<p>
&nbsp;
</p>
<uib-alert type="danger" ng-show="vm.error" class="text-center text-danger">
<span ng-bind="vm.error"></span>
</uib-alert>
Expand Down
52 changes: 32 additions & 20 deletions modules/users/client/views/settings/manage-social-accounts.client.view.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,47 +8,59 @@ <h3 class="col-md-12 text-center" ng-show="vm.hasConnectedAdditionalSocialAccoun
</div>
<div ng-repeat="(providerName, providerData) in vm.user.additionalProvidersData" class="social-account-container">
<img ng-src="/modules/users/client/img/buttons/{{providerName}}.png">
<a class="btn btn-danger btn-remove-account" ng-click="vm.removeUserSocialAccount(providerName)">
<a class="btn btn-danger btn-add-remove-account" ng-click="vm.removeUserSocialAccount(providerName)">
<i class="glyphicon glyphicon-trash"></i>
</a>
</div>
</div>
<h3 class="col-md-12 text-center" ng-show="vm.hasConnectedAdditionalSocialAccounts()">Unconnected social accounts:</h3>
<h3 class="col-md-12 text-center" ng-show="!vm.hasConnectedAdditionalSocialAccounts()">Unconnected social accounts:</h3>
<div class="col-md-12 text-center">
<div class="social-account-container" ng-hide="vm.isConnectedSocialAccount('facebook')">
<img ng-src="/modules/users/client/img/buttons/facebook.png">
<a class="btn btn-success btn-remove-account" href="/api/auth/facebook" target="_self">
<i class="glyphicon glyphicon-plus"></i>
<a href="/api/auth/facebook" target="_self">
<img class="social-button" ng-src="/modules/users/client/img/buttons/facebook.png">
<span class="btn btn-success btn-add-remove-account">
<i class="glyphicon glyphicon-plus"></i>
</span>
</a>
</div>
<div class="social-account-container" ng-hide="vm.isConnectedSocialAccount('twitter')">
<img ng-src="/modules/users/client/img/buttons/twitter.png">
<a class="btn btn-success btn-remove-account" href="/api/auth/twitter" target="_self">
<i class="glyphicon glyphicon-plus"></i>
<a href="/api/auth/twitter" target="_self">
<img class="social-button" ng-src="/modules/users/client/img/buttons/twitter.png">
<span class="btn btn-success btn-add-remove-account">
<i class="glyphicon glyphicon-plus"></i>
</span>
</a>
</div>
<div class="social-account-container" ng-hide="vm.isConnectedSocialAccount('google')">
<img ng-src="/modules/users/client/img/buttons/google.png">
<a class="btn btn-success btn-remove-account" href="/api/auth/google" target="_self">
<i class="glyphicon glyphicon-plus"></i>
<a href="/api/auth/google" target="_self">
<img class="social-button" ng-src="/modules/users/client/img/buttons/google.png">
<span class="btn btn-success btn-add-remove-account">
<i class="glyphicon glyphicon-plus"></i>
</span>
</a>
</div>
<div class="social-account-container" ng-hide="vm.isConnectedSocialAccount('linkedin')">
<img ng-src="/modules/users/client/img/buttons/linkedin.png">
<a class="btn btn-success btn-remove-account" href="/api/auth/linkedin" target="_self">
<i class="glyphicon glyphicon-plus"></i>
<a href="/api/auth/linkedin" target="_self">
<img class="social-button" ng-src="/modules/users/client/img/buttons/linkedin.png">
<span class="btn btn-success btn-add-remove-account">
<i class="glyphicon glyphicon-plus"></i>
</span>
</a>
</div>
<div class="social-account-container" ng-hide="vm.isConnectedSocialAccount('github')">
<img ng-src="/modules/users/client/img/buttons/github.png">
<a class="btn btn-success btn-remove-account" href="/api/auth/github" target="_self">
<i class="glyphicon glyphicon-plus"></i>
<a href="/api/auth/github" target="_self">
<img class="social-button" ng-src="/modules/users/client/img/buttons/github.png">
<span class="btn btn-success btn-add-remove-account">
<i class="glyphicon glyphicon-plus"></i>
</span>
</a>
</div>
<div class="social-account-container" ng-hide="vm.isConnectedSocialAccount('paypal')">
<img ng-src="/modules/users/client/img/buttons/paypal.png">
<a class="btn btn-success btn-remove-account" href="/api/auth/paypal" target="_self">
<i class="glyphicon glyphicon-plus"></i>
<a href="/api/auth/paypal" target="_self">
<img class="social-button" ng-src="/modules/users/client/img/buttons/paypal.png">
<span class="btn btn-success btn-add-remove-account">
<i class="glyphicon glyphicon-plus"></i>
</span>
</a>
</div>
</div>
Expand Down

0 comments on commit c2cfc38

Please sign in to comment.