Commit ad432583a91ada2e75a2546cef51982a566ecc0f
1 parent
5b87a4dc
Exists in
spb-stable
and in
2 other branches
Improve UI/UX for create/edit group in admin area
Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>
Showing
4 changed files
with
64 additions
and
61 deletions
Show diff stats
| ... | ... | @@ -0,0 +1,57 @@ |
| 1 | += form_for [:admin, @group], html: { class: "form-horizontal" } do |f| | |
| 2 | + - if @group.errors.any? | |
| 3 | + .alert.alert-danger | |
| 4 | + %span= @group.errors.full_messages.first | |
| 5 | + .form-group.group_name_holder | |
| 6 | + = f.label :name, class: 'control-label' do | |
| 7 | + Group name | |
| 8 | + .col-sm-10 | |
| 9 | + = f.text_field :name, placeholder: "Example Group", class: "form-control" | |
| 10 | + | |
| 11 | + .form-group.group-description-holder | |
| 12 | + = f.label :description, "Details", class: 'control-label' | |
| 13 | + .col-sm-10 | |
| 14 | + = f.text_area :description, maxlength: 250, class: "form-control js-gfm-input", rows: 4 | |
| 15 | + | |
| 16 | + .form-group.group-description-holder | |
| 17 | + = f.label :avatar, "Group avatar", class: 'control-label' | |
| 18 | + .col-sm-10 | |
| 19 | + %a.choose-btn.btn.btn-small.js-choose-group-avatar-button | |
| 20 | + %i.icon-paper-clip | |
| 21 | + %span Choose File ... | |
| 22 | + | |
| 23 | + %span.file_name.js-avatar-filename File name... | |
| 24 | + = f.file_field :avatar, class: "js-group-avatar-input hidden" | |
| 25 | + .light The maximum file size allowed is 100KB. | |
| 26 | + | |
| 27 | + - if @group.new_record? | |
| 28 | + .form-group | |
| 29 | + .col-sm-2 | |
| 30 | + .col-sm-10 | |
| 31 | + .bs-callout.bs-callout-info | |
| 32 | + %ul | |
| 33 | + %li A group is a collection of several projects | |
| 34 | + %li Groups are private by default | |
| 35 | + %li Members of a group may only view projects they have permission to access | |
| 36 | + %li Group project URLs are prefixed with the group namespace | |
| 37 | + %li Existing projects may be moved into a group | |
| 38 | + .form-actions | |
| 39 | + = f.submit 'Create group', class: "btn btn-create" | |
| 40 | + = link_to 'Cancel', admin_groups_path, class: "btn btn-cancel" | |
| 41 | + | |
| 42 | + - else | |
| 43 | + .form-group.group_name_holder | |
| 44 | + = f.label :path, class: 'control-label' do | |
| 45 | + %span Group path | |
| 46 | + .col-sm-10 | |
| 47 | + = f.text_field :path, placeholder: "example-group", class: "form-control danger" | |
| 48 | + .bs-callout.bs-callout-danger | |
| 49 | + %ul | |
| 50 | + %li Changing group path can have unintended side effects. | |
| 51 | + %li Renaming group path will rename directory for all related projects | |
| 52 | + %li It will change web url for access group and group projects. | |
| 53 | + %li It will change the git path to repositories under this group. | |
| 54 | + .form-actions | |
| 55 | + = f.submit 'Save changes', class: "btn btn-primary" | |
| 56 | + = link_to 'Cancel', admin_group_path(@group), class: "btn btn-cancel" | |
| 57 | + | ... | ... |
app/views/admin/groups/edit.html.haml
| 1 | -%h3.page-title Edit Group | |
| 1 | +%h3.page-title Edit group: #{@group.name} | |
| 2 | 2 | %hr |
| 3 | -= form_for [:admin, @group], html: { class: "form-horizontal" } do |f| | |
| 4 | - - if @group.errors.any? | |
| 5 | - .alert.alert-danger | |
| 6 | - %span= @group.errors.full_messages.first | |
| 7 | - .form-group.group_name_holder | |
| 8 | - = f.label :name, class: 'control-label' do | |
| 9 | - Group name | |
| 10 | - .col-sm-10 | |
| 11 | - = f.text_field :name, placeholder: "Example Group", class: "form-control" | |
| 12 | - | |
| 13 | - .form-group.group-description-holder | |
| 14 | - = f.label :description, "Details", class: 'control-label' | |
| 15 | - .col-sm-10 | |
| 16 | - = f.text_area :description, maxlength: 250, class: "form-control js-gfm-input", rows: 4 | |
| 17 | - | |
| 18 | - .form-group.group_name_holder | |
| 19 | - = f.label :path, class: 'control-label' do | |
| 20 | - %span.cred Group path | |
| 21 | - .col-sm-10 | |
| 22 | - = f.text_field :path, placeholder: "example-group", class: "form-control danger" | |
| 23 | - %ul.cred | |
| 24 | - %li Changing group path can have unintended side effects. | |
| 25 | - %li Renaming group path will rename directory for all related projects | |
| 26 | - %li It will change web url for access group and group projects. | |
| 27 | - %li It will change the git path to repositories under this group. | |
| 28 | - | |
| 29 | - .form-actions | |
| 30 | - = f.submit 'Save changes', class: "btn btn-primary" | |
| 31 | - = link_to 'Cancel', admin_groups_path, class: "btn btn-cancel" | |
| 3 | += render 'form' | ... | ... |
app/views/admin/groups/new.html.haml
| 1 | -%h3.page-title New Group | |
| 1 | +%h3.page-title New group | |
| 2 | 2 | %hr |
| 3 | -= form_for [:admin, @group], html: { class: 'group-form form-horizontal' } do |f| | |
| 4 | - - if @group.errors.any? | |
| 5 | - .alert.alert-danger | |
| 6 | - %span= @group.errors.full_messages.first | |
| 7 | - .form-group | |
| 8 | - = f.label :name, class: 'control-label' do | |
| 9 | - Group name | |
| 10 | - .col-sm-10 | |
| 11 | - = f.text_field :name, placeholder: "Ex. OpenSource", class: "form-control" | |
| 12 | - | |
| 13 | - .form-group.group-description-holder | |
| 14 | - = f.label :description, "Details", class: 'control-label' | |
| 15 | - .col-sm-10 | |
| 16 | - = f.text_area :description, maxlength: 250, class: "form-control js-gfm-input", rows: 4 | |
| 17 | - | |
| 18 | - .form-group | |
| 19 | - .col-sm-2 | |
| 20 | - .col-sm-10 | |
| 21 | - %ul | |
| 22 | - %li A group is a collection of several projects | |
| 23 | - %li Groups are private by default | |
| 24 | - %li Members of a group may only view projects they have permission to access | |
| 25 | - %li Group project URLs are prefixed with the group namespace | |
| 26 | - %li Existing projects may be moved into a group | |
| 27 | - | |
| 28 | - .form-actions | |
| 29 | - = f.submit 'Create group', class: "btn btn-create" | |
| 30 | - | |
| 31 | - | |
| 3 | += render 'form' | ... | ... |
app/views/admin/groups/show.html.haml
| 1 | 1 | %h3.page-title |
| 2 | 2 | Group: #{@group.name} |
| 3 | 3 | |
| 4 | - = link_to edit_admin_group_path(@group), class: "btn btn-small pull-right" do | |
| 4 | + = link_to edit_admin_group_path(@group), class: "btn pull-right" do | |
| 5 | 5 | %i.icon-edit |
| 6 | 6 | Edit |
| 7 | 7 | %hr |
| ... | ... | @@ -12,6 +12,8 @@ |
| 12 | 12 | Group info: |
| 13 | 13 | %ul.well-list |
| 14 | 14 | %li |
| 15 | + = image_tag group_icon(@group.path), class: "avatar s60" | |
| 16 | + %li | |
| 15 | 17 | %span.light Name: |
| 16 | 18 | %strong= @group.name |
| 17 | 19 | %li | ... | ... |