From ad432583a91ada2e75a2546cef51982a566ecc0f Mon Sep 17 00:00:00 2001 From: Dmitriy Zaporozhets Date: Tue, 3 Jun 2014 16:40:50 +0300 Subject: Improve UI/UX for create/edit group in admin area Signed-off-by: Dmitriy Zaporozhets --- app/views/admin/groups/_form.html.haml | 57 ++++++++++++++++++++++++++++++++++ app/views/admin/groups/edit.html.haml | 32 ++----------------- app/views/admin/groups/new.html.haml | 32 ++----------------- app/views/admin/groups/show.html.haml | 4 ++- 4 files changed, 64 insertions(+), 61 deletions(-) create mode 100644 app/views/admin/groups/_form.html.haml (limited to 'app') diff --git a/app/views/admin/groups/_form.html.haml b/app/views/admin/groups/_form.html.haml new file mode 100644 index 00000000000..31990ee5932 --- /dev/null +++ b/app/views/admin/groups/_form.html.haml @@ -0,0 +1,57 @@ += form_for [:admin, @group], html: { class: "form-horizontal" } do |f| + - if @group.errors.any? + .alert.alert-danger + %span= @group.errors.full_messages.first + .form-group.group_name_holder + = f.label :name, class: 'control-label' do + Group name + .col-sm-10 + = f.text_field :name, placeholder: "Example Group", class: "form-control" + + .form-group.group-description-holder + = f.label :description, "Details", class: 'control-label' + .col-sm-10 + = f.text_area :description, maxlength: 250, class: "form-control js-gfm-input", rows: 4 + + .form-group.group-description-holder + = f.label :avatar, "Group avatar", class: 'control-label' + .col-sm-10 + %a.choose-btn.btn.btn-small.js-choose-group-avatar-button + %i.icon-paper-clip + %span Choose File ... +   + %span.file_name.js-avatar-filename File name... + = f.file_field :avatar, class: "js-group-avatar-input hidden" + .light The maximum file size allowed is 100KB. + + - if @group.new_record? + .form-group + .col-sm-2 + .col-sm-10 + .bs-callout.bs-callout-info + %ul + %li A group is a collection of several projects + %li Groups are private by default + %li Members of a group may only view projects they have permission to access + %li Group project URLs are prefixed with the group namespace + %li Existing projects may be moved into a group + .form-actions + = f.submit 'Create group', class: "btn btn-create" + = link_to 'Cancel', admin_groups_path, class: "btn btn-cancel" + + - else + .form-group.group_name_holder + = f.label :path, class: 'control-label' do + %span Group path + .col-sm-10 + = f.text_field :path, placeholder: "example-group", class: "form-control danger" + .bs-callout.bs-callout-danger + %ul + %li Changing group path can have unintended side effects. + %li Renaming group path will rename directory for all related projects + %li It will change web url for access group and group projects. + %li It will change the git path to repositories under this group. + .form-actions + = f.submit 'Save changes', class: "btn btn-primary" + = link_to 'Cancel', admin_group_path(@group), class: "btn btn-cancel" + diff --git a/app/views/admin/groups/edit.html.haml b/app/views/admin/groups/edit.html.haml index eb5c91050af..824e51c1cf1 100644 --- a/app/views/admin/groups/edit.html.haml +++ b/app/views/admin/groups/edit.html.haml @@ -1,31 +1,3 @@ -%h3.page-title Edit Group +%h3.page-title Edit group: #{@group.name} %hr -= form_for [:admin, @group], html: { class: "form-horizontal" } do |f| - - if @group.errors.any? - .alert.alert-danger - %span= @group.errors.full_messages.first - .form-group.group_name_holder - = f.label :name, class: 'control-label' do - Group name - .col-sm-10 - = f.text_field :name, placeholder: "Example Group", class: "form-control" - - .form-group.group-description-holder - = f.label :description, "Details", class: 'control-label' - .col-sm-10 - = f.text_area :description, maxlength: 250, class: "form-control js-gfm-input", rows: 4 - - .form-group.group_name_holder - = f.label :path, class: 'control-label' do - %span.cred Group path - .col-sm-10 - = f.text_field :path, placeholder: "example-group", class: "form-control danger" - %ul.cred - %li Changing group path can have unintended side effects. - %li Renaming group path will rename directory for all related projects - %li It will change web url for access group and group projects. - %li It will change the git path to repositories under this group. - - .form-actions - = f.submit 'Save changes', class: "btn btn-primary" - = link_to 'Cancel', admin_groups_path, class: "btn btn-cancel" += render 'form' diff --git a/app/views/admin/groups/new.html.haml b/app/views/admin/groups/new.html.haml index ae0604cf984..f46f45c5514 100644 --- a/app/views/admin/groups/new.html.haml +++ b/app/views/admin/groups/new.html.haml @@ -1,31 +1,3 @@ -%h3.page-title New Group +%h3.page-title New group %hr -= form_for [:admin, @group], html: { class: 'group-form form-horizontal' } do |f| - - if @group.errors.any? - .alert.alert-danger - %span= @group.errors.full_messages.first - .form-group - = f.label :name, class: 'control-label' do - Group name - .col-sm-10 - = f.text_field :name, placeholder: "Ex. OpenSource", class: "form-control" - - .form-group.group-description-holder - = f.label :description, "Details", class: 'control-label' - .col-sm-10 - = f.text_area :description, maxlength: 250, class: "form-control js-gfm-input", rows: 4 - - .form-group - .col-sm-2 - .col-sm-10 - %ul - %li A group is a collection of several projects - %li Groups are private by default - %li Members of a group may only view projects they have permission to access - %li Group project URLs are prefixed with the group namespace - %li Existing projects may be moved into a group - - .form-actions - = f.submit 'Create group', class: "btn btn-create" - - += render 'form' diff --git a/app/views/admin/groups/show.html.haml b/app/views/admin/groups/show.html.haml index b8068886be2..8634f46053d 100644 --- a/app/views/admin/groups/show.html.haml +++ b/app/views/admin/groups/show.html.haml @@ -1,7 +1,7 @@ %h3.page-title Group: #{@group.name} - = link_to edit_admin_group_path(@group), class: "btn btn-small pull-right" do + = link_to edit_admin_group_path(@group), class: "btn pull-right" do %i.icon-edit Edit %hr @@ -11,6 +11,8 @@ .panel-heading Group info: %ul.well-list + %li + = image_tag group_icon(@group.path), class: "avatar s60" %li %span.light Name: %strong= @group.name -- cgit v1.2.3