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 @@ | @@ -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 | %hr | 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 | %hr | 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 | %h3.page-title | 1 | %h3.page-title |
| 2 | Group: #{@group.name} | 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 | %i.icon-edit | 5 | %i.icon-edit |
| 6 | Edit | 6 | Edit |
| 7 | %hr | 7 | %hr |
| @@ -12,6 +12,8 @@ | @@ -12,6 +12,8 @@ | ||
| 12 | Group info: | 12 | Group info: |
| 13 | %ul.well-list | 13 | %ul.well-list |
| 14 | %li | 14 | %li |
| 15 | + = image_tag group_icon(@group.path), class: "avatar s60" | ||
| 16 | + %li | ||
| 15 | %span.light Name: | 17 | %span.light Name: |
| 16 | %strong= @group.name | 18 | %strong= @group.name |
| 17 | %li | 19 | %li |