Merge Request #38

← To merge requests From login_modal_improve into master
Merged
noosfero-themes/angular-theme!38
Created by Daniela Feitosa

Login modal and block improvements

  • Renamed labels and inputs from login form on login block and modal
  • Added css rules that increased margin and padding on specific elements, horizontal rules with text in the middle and new translations.
  • Also added checkbox for keep logged in.
Assignee: Michel Felipe
Milestone: None

Merged by Caio Almeida

Commits (3)
4 participants
Showing 9 changed files   Show diff stats
src/app/index.scss
  Diff comments   Edit   View file @738b024
... ... @@ -82,3 +82,4 @@ h1, h2, h3, h4, h5 {
82 82 @import "layout/scss/layout";
83 83 @import "layout/scss/sidebar";
84 84 @import "layout/scss/tables";
  85 +@import "layout/scss/forms";
... ...
src/app/layout/blocks/login-block/login-block.html
  Diff comments   Edit   View file @738b024
... ... @@ -15,13 +15,21 @@
15 15 <div class="logged-user-info" ng-show="!ctrl.currentUser">
16 16 <form>
17 17 <div class="form-group">
18   - <label for="exampleInputEmail1">{{"auth.form.login" | translate}}</label>
19   - <input type="text" class="form-control" id="exampleInputEmail1" placeholder="Login / Email" ng-model="ctrl.credentials.username">
  18 + <label for="email">{{"auth.form.login" | translate}}</label>
1
  • Me
    Link here  
    Michel Felipe @mfdeveloper (Edited )

    Why did you repeat the same value to label tag and placeholder attribute of the input?

    Choose File ...   File name...
    Cancel
  19 + <input type="text" class="form-control" id="email" placeholder="{{'auth.form.login' | translate}}" ng-model="ctrl.credentials.username">
20 20 </div>
21 21 <div class="form-group">
22   - <label for="exampleInputPassword1">{{"auth.form.password" | translate}}</label>
23   - <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" ng-model="ctrl.credentials.password">
  22 + <label for="passwd">{{"auth.form.password" | translate}}</label>
  23 + <input type="password" class="form-control" id="passwd" placeholder="{{'auth.form.password' | translate}}" ng-model="ctrl.credentials.password">
  24 + </div>
  25 + <div class="form-inline">
  26 + <div class="checkbox-nice">
  27 + <input type="checkbox" id="keep-logged">
  28 + <label for="keep-logged">
  29 + {{"auth.form.keepLoggedIn" | translate}}
  30 + </label>
  31 + </div>
24 32 </div>
25 33 <button type="submit" class="btn btn-default" ng-click="ctrl.login()">{{"auth.form.login_button" | translate}}</button>
26 34 </form>
27   -</div>
28 35 \ No newline at end of file
  36 +</div>
... ...
src/app/layout/scss/_forms.scss 0 → 100644
  Diff comments   Edit   View file @738b024
... ... @@ -0,0 +1,36 @@
  1 +label {
  2 + cursor: pointer;
  3 +}
  4 +
  5 +.checkbox-nice {
  6 + position: relative;
  7 + padding-left: 15px;
  8 +
  9 + input[type=checkbox] {
  10 + visibility: hidden;
  11 + }
  12 + label {
  13 + padding-top: 3px;
  14 + }
  15 + &.checkbox-inline > label {
  16 + margin-left: 16px;
  17 + }
  18 + label:before {
  19 + @include checkbox-mark(22px, 22px, 1px, 1px, #ffffff, 2px solid $main-bg-color);
  20 + @include border-radius(3px);
  21 + }
  22 + label:after {
  23 + @include checkbox-mark(12px, 7px, 7px, 6px, transparent, 3px solid #000);
  24 + @include opacity(0);
  25 +
  26 + border-top: none;
  27 + border-right: none;
  28 + transform: rotate(-45deg);
  29 + }
  30 + label:hover::after {
  31 + @include opacity(0.3);
  32 + }
  33 + input[type=checkbox]:checked + label:after {
  34 + @include opacity(1);
  35 + }
  36 +}
... ...
src/app/layout/scss/_mixins.scss
  Diff comments   Edit   View file @738b024
... ... @@ -3,3 +3,15 @@
3 3 border-radius: $radius;
4 4 background-clip: padding-box; /* stops bg color from leaking outside the border: */
5 5 }
  6 +
  7 +@mixin checkbox-mark($width, $height, $top, $left, $bg, $border, $content: "", $cursor: pointer, $position: absolute) {
  8 + width: $width;
  9 + height: $height;
  10 + cursor: $cursor;
  11 + position: $position;
  12 + left: $left;
  13 + top: $top;
  14 + background: $bg;
  15 + content: $content;
  16 + border: $border;
  17 +}
... ...
src/app/layout/scss/skins/_whbl.scss
  Diff comments   Edit   View file @738b024
... ... @@ -306,6 +306,13 @@ $whbl-font-color: #16191c;
306 306 color: white;
307 307 }
308 308  
  309 + /* Form overrides */
  310 + .checkbox-nice {
  311 + label:after {
  312 + border-color: $whbl-primary-color;
  313 + }
  314 + }
  315 +
309 316 }
310 317 .rtl.skin-whbl #content-wrapper {
311 318 border-left: 0;
... ...
src/app/login/login.html
  Diff comments   Edit   View file @738b024
... ... @@ -4,13 +4,21 @@
4 4 <div class="modal-body">
5 5 <form>
6 6 <div class="form-group">
7   - <label for="exampleInputEmail1">{{"auth.form.login" | translate}}</label>
8   - <input type="text" class="form-control" id="exampleInputEmail1" placeholder="Login / Email" ng-model="vm.credentials.username">
  7 + <label for="email">{{"auth.form.login" | translate}}</label>
  8 + <input type="text" class="form-control" id="email" placeholder="{{'auth.form.login' | translate}}" ng-model="vm.credentials.username">
9 9 </div>
10 10 <div class="form-group">
11   - <label for="exampleInputPassword1">{{"auth.form.password" | translate}}</label>
12   - <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" ng-model="vm.credentials.password">
  11 + <label for="passwd">{{"auth.form.password" | translate}}</label>
  12 + <input type="password" class="form-control" id="passwd" placeholder="{{'auth.form.password' | translate}}" ng-model="vm.credentials.password">
13 13 </div>
14   - <button type="submit" class="btn btn-default" ng-click="vm.login()">{{"auth.form.login_button" | translate}}</button>
  14 + <div class="form-inline">
  15 + <div class="checkbox-nice">
  16 + <input type="checkbox" id="keep-logged">
  17 + <label for="keep-logged">
  18 + {{"auth.form.keepLoggedIn" | translate}}
  19 + </label>
  20 + </div>
  21 + </div>
  22 + <button type="submit" class="btn btn-default btn-block" ng-click="vm.login()">{{"auth.form.login_button" | translate}}</button>
15 23 </form>
16 24 </div>
... ...
src/app/login/login.scss 0 → 100644
  Diff comments   Edit   View file @738b024
... ... @@ -0,0 +1,43 @@
  1 +.modal-content {
  2 + padding: 40px;
  3 + .modal-header {
  4 + border-bottom: 0;
  5 + text-align: center;
  6 + }
  7 + form {
  8 + margin-bottom: 30px;
  9 + button {
  10 + margin-top: 20px;
  11 + text-transform: uppercase;
  12 + }
  13 + }
  14 +}
  15 +
  16 +.strike {
  17 + display: block;
  18 + text-align: center;
  19 + overflow: hidden;
  20 + white-space: nowrap;
  21 + padding: 25px 0;
  22 + > span {
  23 + position: relative;
  24 + display: inline-block;
  25 + text-transform: uppercase;
  26 + }
  27 + > span:before, > span:after {
  28 + content: "";
  29 + position: absolute;
  30 + top: 50%;
  31 + width: 9999px;
  32 + height: 1px;
  33 + background: black;
  34 + }
  35 + > span:before {
  36 + right: 100%;
  37 + margin-right: 15px;
  38 + }
  39 + > span:after {
  40 + left: 100%;
  41 + margin-left: 15px;
  42 + }
  43 +}
... ...
src/languages/en.json
  Diff comments   Edit   View file @738b024
... ... @@ -21,9 +21,10 @@
21 21 "activities.create_article.description": "has published on",
22 22 "activities.add_member_in_community.description": "has joined the community",
23 23 "activities.new_friendship.description": "has made {friends, plural, one{one new friend} other{# new friends}}:",
24   - "auth.title": "Login",
25   - "auth.form.login": "Login / Email address",
  24 + "auth.title": "Great to have you back!",
  25 + "auth.form.login": "Username or Email address",
26 26 "auth.form.password": "Password",
  27 + "auth.form.keepLoggedIn": "Keep me logged in",
27 28 "auth.form.login_button": "Login",
28 29 "navbar.content_viewer_actions.new_item": "New Item",
29 30 "navbar.profile_actions.new_item": "New Item",
... ...
src/languages/pt.json
  Diff comments   Edit   View file @738b024
... ... @@ -21,9 +21,10 @@
21 21 "activities.create_article.description": "publicou em",
22 22 "activities.add_member_in_community.description": "entrou na comunidade",
23 23 "activities.new_friendship.description": "fez {friends, plural, one{um novo amigo} other{# novos amigos}}:",
24   - "auth.title": "Login",
25   - "auth.form.login": "Login / Email",
  24 + "auth.title": "Legal ter você de volta!",
  25 + "auth.form.login": "Nome de usuário ou Email",
26 26 "auth.form.password": "Senha",
  27 + "auth.form.keepLoggedIn": "Continuar logado",
27 28 "auth.form.login_button": "Login",
28 29 "navbar.content_viewer_actions.new_item": "Novo Item",
29 30 "navbar.profile_actions.new_item": "Novo Item",
... ...
  • 0743c2eb05e68c92baa5f8c498995a20?s=40&d=identicon
    Link here  
    Daniela Feitosa @daniela

    mentioned in issue #46

    Choose File ...   File name...
    Cancel
  • Fcd7708520a028e7cdb9f57fcc5e438e?s=40&d=identicon
    Link here  
    Caio Almeida @caiosba

    Looks good! Unfortunately, I don't have enough permissions to merge it.

    Choose File ...   File name...
    Cancel
  • Me
    Link here  
    Michel Felipe @mfdeveloper

    Reassigned to @mfdeveloper

    Choose File ...   File name...
    Cancel
  • Me
    Link here  
    Michel Felipe @mfdeveloper

    No problem @caiosba . I will validated this MR and release a merge if everything is ok :)

    Choose File ...   File name...
    Cancel
  • Me
    Link here  
    Michel Felipe @mfdeveloper

    mentioned in issue #46

    Choose File ...   File name...
    Cancel
  • 5bf9bf341e9d00ebd854cdaf1a4299b2?s=40&d=identicon
    Link here  
    Leandro Santos @leandronunes

    @caiosba Now you have the permission

    Choose File ...   File name...
    Cancel
    • Me
    Show/hide discussion
    Michel Felipe started a discussion on the diff
    last updated by Michel Felipe
    src/app/layout/blocks/login-block/login-block.html
    15 15 <div class="logged-user-info" ng-show="!ctrl.currentUser">
    16 16 <form>
    17 17 <div class="form-group">
    18   - <label for="exampleInputEmail1">{{"auth.form.login" | translate}}</label>
    19   - <input type="text" class="form-control" id="exampleInputEmail1" placeholder="Login / Email" ng-model="ctrl.credentials.username">
      18 + <label for="email">{{"auth.form.login" | translate}}</label>
    1
    • Me
      Link here  
      Michel Felipe @mfdeveloper (Edited )

      Why did you repeat the same value to label tag and placeholder attribute of the input?

      Choose File ...   File name...
      Cancel
    Me
    Show/hide discussion
    Michel Felipe started a discussion on the outdated diff
    last updated by Daniela Feitosa
    src/app/login/login.html
    7   - <label for="exampleInputEmail1">{{"auth.form.login" | translate}}</label>
    8   - <input type="text" class="form-control" id="exampleInputEmail1" placeholder="Login / Email" ng-model="vm.credentials.username">
      7 + <label for="email">{{"auth.form.login" | translate}}</label>
      8 + <input type="text" class="form-control" id="email" placeholder="{{'auth.form.login' | translate}}" ng-model="vm.credentials.username">
    9 9 </div>
    10 10 <div class="form-group">
    11   - <label for="exampleInputPassword1">{{"auth.form.password" | translate}}</label>
    12   - <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" ng-model="vm.credentials.password">
      11 + <label for="passwd">{{"auth.form.password" | translate}}</label>
      12 + <input type="password" class="form-control" id="passwd" placeholder="{{'auth.form.password' | translate}}" ng-model="vm.credentials.password">
    13 13 </div>
    14   - <button type="submit" class="btn btn-default" ng-click="vm.login()">{{"auth.form.login_button" | translate}}</button>
      14 + <div class="form-inline">
      15 + <div class="checkbox">
      16 + <label>
      17 + <input type="checkbox" > {{"auth.form.keepLoggedIn" | translate}}
    2
    • Me
      Link here  
      Michel Felipe @mfdeveloper (Edited )

      Why "Keep logged in" checkbox was not added to login-block.html like in this file? Do you have some special reason ?

      Choose File ...   File name...
      Cancel
    • 0743c2eb05e68c92baa5f8c498995a20?s=40&d=identicon
      Link here  
      Daniela Feitosa @daniela

      No special reason.. I just forgot :)

      I'll add it there

      Choose File ...   File name...
      Cancel
    Me
    Show/hide discussion
    Michel Felipe started a discussion on the outdated diff
    last updated by Michel Felipe
    src/app/login/login.scss 0 → 100644
      1 +.modal-content{
      2 + padding: 40px;
      3 +}
      4 +.modal-header {
      5 + border-bottom: 0;
      6 + text-align: center;
      7 +}
      8 +form {
      9 + margin-bottom: 30px;
      10 +}
      11 +form button {
    1
    • Me
      Link here  
      Michel Felipe @mfdeveloper (Edited )

      Please, move the button selector like a child of form selector. This is a sass feature. See a code snippet below:

      form {
   margin-bottom: 30px;

   button {
       margin-top: 20px;
       text-transform: uppercase;
   }
}
      Choose File ...   File name...
      Cancel
    Me
    Show/hide discussion
    Michel Felipe started a discussion on the outdated diff
    last updated by Michel Felipe
    src/app/login/login.scss 0 → 100644
      8 +form {
      9 + margin-bottom: 30px;
      10 +}
      11 +form button {
      12 + margin-top: 20px;
      13 + text-transform: uppercase;
      14 +}
      15 +.strike {
      16 + display: block;
      17 + text-align: center;
      18 + overflow: hidden;
      19 + white-space: nowrap;
      20 + padding: 25px 0;
      21 +}
      22 +
      23 +.strike > span {
    1
    Me
    Show/hide discussion
    Michel Felipe started a discussion on the outdated diff
    last updated by Michel Felipe
    src/app/login/login.scss 0 → 100644
      23 +.strike > span {
      24 + position: relative;
      25 + display: inline-block;
      26 +}
      27 +
      28 +.strike > span:before,
      29 +.strike > span:after {
      30 + content: "";
      31 + position: absolute;
      32 + top: 50%;
      33 + width: 9999px;
      34 + height: 1px;
      35 + background: black;
      36 +}
      37 +
      38 +.strike > span:before {
    1
    • Me
      Link here  
      Michel Felipe @mfdeveloper (Edited )

      Seems like a unecessary duplicated use of the .strike > span:before here. Please, see the sass documentation of @extend. Maybe this can be more clear :)

      PS: A similar situation for .strike > span:after at line 43

      Choose File ...   File name...
      Cancel
  • Me
    Link here  
    Michel Felipe @mfdeveloper (Edited )

    Visual suggestion:

    More clean login, without <label> tags, inputs with icons aligned to left and blue highlited border, like this screen below:

    Choose File ...   File name...
    Cancel
    Login inputs1
    login-inputs1.png
    • Me
    Show/hide discussion
    Michel Felipe started a discussion on the diff
    last updated by Michel Felipe
    src/languages/en.json
    20 20 "activities.create_article.description": "has published on",
    21 21 "activities.add_member_in_community.description": "has joined the community",
    22 22 "activities.new_friendship.description": "has made {friends, plural, one{one new friend} other{# new friends}}:",
    23   - "auth.title": "Login",
    24   - "auth.form.login": "Login / Email address",
      23 + "auth.title": "Great to have you back!",
    1
    • Me
      Link here  
      Michel Felipe @mfdeveloper

      When the user access the app by first time, he will see "back"? Maybe this text will confuse him. What do you think about this?

      Choose File ...   File name...
      Cancel
    Me
    Show/hide discussion
    Michel Felipe started a discussion on the outdated diff
    last updated by Michel Felipe
    src/app/login/login.scss 0 → 100644
      25 + display: inline-block;
      26 +}
      27 +
      28 +.strike > span:before,
      29 +.strike > span:after {
      30 + content: "";
      31 + position: absolute;
      32 + top: 50%;
      33 + width: 9999px;
      34 + height: 1px;
      35 + background: black;
      36 +}
      37 +
      38 +.strike > span:before {
      39 + right: 100%;
      40 + margin-right: 15px;
    1
    • Me
      Link here  
      Michel Felipe @mfdeveloper

      The 15px value is used more than once. Maybe for a better approach, use a variable with this value, something like: $login-margin on top of this file or into the variable.scss general file.

      Choose File ...   File name...
      Cancel
    Me
    Show/hide discussion
    Michel Felipe started a discussion on the outdated diff
    last updated by Michel Felipe
    src/app/login/login.html
    5 5 <form>
    6 6 <div class="form-group">
    7   - <label for="exampleInputEmail1">{{"auth.form.login" | translate}}</label>
    8   - <input type="text" class="form-control" id="exampleInputEmail1" placeholder="Login / Email" ng-model="vm.credentials.username">
      7 + <label for="email">{{"auth.form.login" | translate}}</label>
      8 + <input type="text" class="form-control" id="email" placeholder="{{'auth.form.login' | translate}}" ng-model="vm.credentials.username">
    9 9 </div>
    10 10 <div class="form-group">
    11   - <label for="exampleInputPassword1">{{"auth.form.password" | translate}}</label>
    12   - <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" ng-model="vm.credentials.password">
      11 + <label for="passwd">{{"auth.form.password" | translate}}</label>
      12 + <input type="password" class="form-control" id="passwd" placeholder="{{'auth.form.password' | translate}}" ng-model="vm.credentials.password">
    13 13 </div>
    14   - <button type="submit" class="btn btn-default" ng-click="vm.login()">{{"auth.form.login_button" | translate}}</button>
      14 + <div class="form-inline">
      15 + <div class="checkbox">
    1
  • 0743c2eb05e68c92baa5f8c498995a20?s=40&d=identicon
    Link here  
    Daniela Feitosa @daniela

    @mfdeveloper I'll see the visual suggestions, edit the scss files and ping you when I update the MR.

    Choose File ...   File name...
    Cancel
  • Me
    Link here  
    Michel Felipe @mfdeveloper

    Added 34 new commits:

    • da20ce18 - fixed search tests
    • 69ff070c - Component to search for articles in the environment
    • 5bc45a30 - fixed pt translation
    • 575daccf - changed search.component and the search-form.component to fill the query field w…
    • d0fa7823 - Merge branch 'search' into 'master'
    • 7057a9e1 - initial commit for the design mode feature
    • 46f6b264 - Merge branch 'master' into design-mode
    • bbeb5848 - changing designModeToggler to use toggle-switch angular directive
    • b9f6daf6 - better css definition to the design toggler. increased the test coverage to the …
    • 139f17f3 - added a toolbar under the navbar to add layout change buttons
    • a8b16135 - Fix application startup process
    • f4964918 - merge with master. fixed toolbar background-color. small fixes on BootstrapSwitcherItem
    • 9d2ce382 - Merge branch 'design-mode' into 'master'
    • 3963f52f - Rename BlockComponent to BlockContentComponent
    • 167edf00 - Add components to edit block settings
    • 62f85230 - Move logic that show/hide blocks to block component
    • 6e7c76e6 - Get available languages from translator service in block edition
    • 0e0b4a70 - Fix style of edition buttons for blocks
    • 0c28a983 - Merge branch 'edit-blocks'
    • b7f58749 - Merge branch 'master' of softwarepublico.gov.br:noosfero-themes/angular-theme
    • 18b99fd3 - Enable block edition when toggle design mode
    • 2ea040a4 - Enable header and footer edition when toggle design mode
    • 906a13d3 - Small fix in block style
    • dc8c43fd - adding KNOWN ISSUES section to README.md
    • 6a66f44b - Merge branch 'master' of softwarepublico.gov.br:noosfero-themes/angular-theme
    • d00c6e8c - Added export comments button on comment paragraph plugin
    • ba519042 - Display button to export comments only to users with permission to edit article
    • 36e4d9d9 - Merge branch 'export-comments' into 'master'
    • f276722d - New npm config 'skin' to allow sass by theme skins
    • 04a99db3 - Merge branch 'theme-skin-yellow'
    • 12da3fdc - fix invisible block title
    • 2c6cca64 - Merge branch 'fix-invisible-block-title'
    • 49a048fb - Improvements to login modal
    • e3d50634 - New 'checkbox-nice' form UI
    Choose File ...   File name...
    Cancel
  • Me
    Link here  
    Michel Felipe @mfdeveloper (Edited )

    Awesome @daniela ! I pushed a update with a new checkbox style. On the last commit, I'm using the skin scheme and sass @mixin feature. Please, check this :)

    Choose File ...   File name...
    Cancel
  • Fcd7708520a028e7cdb9f57fcc5e438e?s=40&d=identicon
    Link here  
    Caio Almeida @caiosba

    I can review that, @daniela - just ping me when it's updated.

    Choose File ...   File name...
    Cancel
  • 0743c2eb05e68c92baa5f8c498995a20?s=40&d=identicon
    Link here  
    Daniela Feitosa @daniela

    Added 8 new commits:

    • 2841288e - Ticket #85: Fields of Interest block
    • fa8a58b8 - Fix design mode for blocks
    • 2484eb92 - Merge branch 'master' of softwarepublico.gov.br:noosfero-themes/angular-theme
    • 6c67e997 - Fix responsive style of boxes
    • ae05af8e - Fixing conflict
    • 34620a12 - Improvements to login modal
    • e8a886be - New 'checkbox-nice' form UI
    • 738b0244 - Add "Keep logged in" on login block
    Choose File ...   File name...
    Cancel
  • Fcd7708520a028e7cdb9f57fcc5e438e?s=40&d=identicon
    Link here  
    Caio Almeida @caiosba

    mentioned in commit f75c68d0d61523573ff871a3300568a988bab186

    Choose File ...   File name...
    Cancel