Merge branch 'ui-panel-boxes' into 'master'

UI panel boxes Replace custom ui-box with bootstrap `panels`. No sense to use custom components if we can use bootstrap. UI different is minimal so no screenshots

Merge branch 'ui-panel-boxes' into 'master'
UI panel boxes Replace custom ui-box with bootstrap `panels`. No sense to use custom components if we can use bootstrap. UI different is minimal so no screenshots
e9c440d2 · Dmitriy Zaporozhets · 5e20b0a7 · 4c51619d · e9c440d2 · e9c440d2
Commit e9c440d2 authored May 29, 2014 by Dmitriy Zaporozhets
38 changed files
--- a/app/assets/javascripts/dashboard.js.coffee
+++ b/app/assets/javascripts/dashboard.js.coffee
@@ -4,7 +4,7 @@ class Dashboard
    $(".dash-filter").keyup ->
      terms = $(this).val()
-      uiBox = $(this).parents('.ui-box').first()
+      uiBox = $(this).parents('.panel').first()
      if terms == "" || terms == undefined
        uiBox.find(".dash-list li").show()
      else

--- a/app/assets/stylesheets/generic/lists.scss
+++ b/app/assets/stylesheets/generic/lists.scss
@@ -72,6 +72,15 @@
      font-size: 14px;
      line-height: 18px;
    }
+    .row_title {
+      font-weight: 500;
+      color: #444;
+      &:hover {
+        color: #444;
+        text-decoration: underline;
+      }
+    }
  }
 }

--- a/app/assets/stylesheets/generic/ui_box.scss
+++ b/app/assets/stylesheets/generic/ui_box.scss
-/**
- * UI box:
- * Block element for separating information on page.
- * Used for storing issues lists, grouped data.
- * You can have multiple ui boxes on one page
- *
- * Classes:
- *   .ui-box   - for any block & widgets
- *   .ui-box.ui-box-small - same but with smaller title
- *   .ui-box.ui-box-danger - with red title
- *
- * Ex. 1: List
- *   .ui-box
- *     .title
- *       # title here
- *     %ul
- *       # content here
- *
- * Ex. 2: Block data
- *   .ui-box
- *     .title
- *       # title here
- *     .body
- *       # content here
- *
- */
-.ui-box {
-  background: #FFF;
-  margin-bottom: 20px;
-  border: 1px solid #DDD;
-  word-wrap: break-word;
-  img {
-    max-width: 100%;
-  }
-  pre {
-    code {
-      background: none !important;
-    }
-  }
-  ul {
-    margin: 0;
-    padding: 0;
-  }
-  .title {
-    background-color: #EEE;
-    border-bottom: 1px solid #DDD;
-    color: #666;
-    font-size: 16px;
-    text-shadow: 0 1px 1px #fff;
-    padding: 0 10px;
-    font-size: 14px;
-    line-height: 40px;
-    font-weight: normal;
-    margin: 0;
-    > a {
-      text-shadow: 0 1px 1px #fff;
-    }
-    form {
-      margin-bottom: 0;
-      margin-top: 0;
-    }
-    .btn {
-      vertical-align: middle;
-      padding: 4px 12px;
-      @include box-shadow(0 0px 1px 1px #f2f2f2);
-    }
-    .nav-pills {
-      > li {
-        > a {
-          padding: 13px;
-          margin: 0;
-          font-size: 13px;
-        }
-        &.active {
-          > a {
-            background: #D5D5D5;
-            color: $style_color;
-            @include border-radius(0);
-            border-radius: 0;
-            border-left: 1px solid #CCC;
-            border-right: 1px solid #CCC;
-          }
-        }
-      }
-    }
-  }
-  .body {
-    padding: 10px;
-  }
-  &.padded {
-    h5, .title {
-      margin: -20px;
-      margin-bottom: 0;
-      padding: 5px 20px;
-    }
-  }
-  .row_title {
-    font-weight: 500;
-    color: #444;
-    &:hover {
-      color: #444;
-      text-decoration: underline;
-    }
-  }
-  .form-holder {
-    padding-top: 20px;
-    form {
-      margin-bottom: 0;
-      legend {
-        text-indent: 10px;
-      }
-      .form-actions {
-        margin-bottom: 0;
-      }
-    }
-  }
-}
-/*
- * Small box
- */
-.ui-box.ui-box-small {
-  margin-bottom: 10px;
-  .title {
-    font-size: 13px;
-    line-height: 30px;
-    a {
-      color: #666;
-      &:hover {
-        text-decoration: underline;
-      }
-    }
-  }
-}
-/*
- * Danger box
- */
-.ui-box.ui-box-danger {
-  background: #f7f7f7;
-  border: none;
-  .title {
-    background: #D65;
-    color: #fff;
-    text-shadow: none;
-    font-weight: 500;
-  }
-}
-/*
- * Block under tw-bootstrap tabs
- */
-.tab-pane {
-  .ui-box {
-    margin: 3px 3px 25px 3px;
-  }
-}
--- a/app/assets/stylesheets/gl_bootstrap.scss
+++ b/app/assets/stylesheets/gl_bootstrap.scss
@@ -221,3 +221,20 @@ ul.breadcrumb {
  position: relative;
  white-space: nowrap;
 }
+/**
+ * Add some extra stuff to panels
+ *
+ */
+.panel {
+  .panel-heading {
+    font-size: 14px;
+    line-height: 18px;
+    .panel-head-actions {
+      position: relative;
+      top: -7px;
+      float: right;
+    }
+  }
+}
--- a/app/assets/stylesheets/sections/dashboard.scss
+++ b/app/assets/stylesheets/sections/dashboard.scss
 .dashboard {
  .side {
-    .ui-box {
+    .panel {
-      margin: 0px;
+      .panel-heading {
-      box-shadow: none;
+        background: #EEE;
+        border-top-left-radius: 0;
-      .nav-projects-tabs li { padding: 0; }
+      }
+      border-top-left-radius: 0;
    }
  }
 }
@@ -24,9 +25,7 @@
 .dashboard {
  .dash-filter {
-    margin: 7px 0;
+    width: 205px;
-    padding: 4px 6px;
-    width: 220px;
    float: left;
    height: inherit;
  }
@@ -34,7 +33,7 @@
 @media (max-width: 1200px) {
  .dashboard .dash-filter {
-    width: 150px;
+    width: 140px;
  }
 }

--- a/app/views/admin/background_jobs/show.html.haml
+++ b/app/views/admin/background_jobs/show.html.haml
@@ -3,9 +3,9 @@
 %hr
-.ui-box
+.panel.panel-default
-  .title Sidekiq running processes
+  .panel-heading Sidekiq running processes
-  .body
+  .panel-body
    - if @sidekiq_processes.empty?
      %h4.cred
        %i.icon-warning-sign
@@ -40,5 +40,5 @@
-.ui-box
+.panel.panel-default
  %iframe{src: sidekiq_path, width: '100%', height: 900, style: "border: none"}
--- a/app/views/admin/groups/show.html.haml
+++ b/app/views/admin/groups/show.html.haml
@@ -7,8 +7,8 @@
 %hr
 .row
  .col-md-6
-    .ui-box
+    .panel.panel-default
-      .title
+      .panel-heading
        Group info:
      %ul.well-list
        %li
@@ -29,8 +29,8 @@
          %strong
            = @group.created_at.stamp("March 1, 1999")
-    .ui-box
+    .panel.panel-default
-      .title
+      .panel-heading
        Projects
        %small
          (#{@group.projects.count})
@@ -45,10 +45,10 @@
              %span.monospace= project.path_with_namespace + ".git"
  .col-md-6
-    .ui-box
+    .panel.panel-default
-      .title
+      .panel-heading
        Add user(s) to the group:
-      .body.form-holder
+      .panel-body.form-holder
        %p.light
          Read more about project permissions
          %strong= link_to "here", help_page_path("permissions", "permissions"), class: "vlink"
@@ -60,8 +60,8 @@
            = select_tag :group_access, options_for_select(UsersGroup.group_access_roles), class: "project-access-select select2"
          %hr
          = submit_tag 'Add users into group', class: "btn btn-create"
-    .ui-box
+    .panel.panel-default
-      .title
+      .panel-heading
        %strong #{@group.name}
        Group Members
        %small

--- a/app/views/admin/hooks/index.html.haml
+++ b/app/views/admin/hooks/index.html.haml
@@ -22,8 +22,8 @@
 %hr
 -if @hooks.any?
-  .ui-box
+  .panel.panel-default
-    .title
+    .panel-heading
      System hooks (#{@hooks.count})
    %ul.well-list
      - @hooks.each do |hook|

--- a/app/views/admin/projects/index.html.haml
+++ b/app/views/admin/projects/index.html.haml
@@ -37,10 +37,10 @@
          = link_to "Reset", admin_projects_path, class: "btn"
  .col-md-8
-    .ui-box
+    .panel.panel-default
-      .title
+      .panel-heading
        Projects (#{@projects.total_count})
-        .pull-right
+        .panel-head-actions
          .dropdown.inline
            %a.dropdown-toggle.btn{href: '#', "data-toggle" => "dropdown"}
              %span.light sort:

--- a/app/views/admin/projects/show.html.haml
+++ b/app/views/admin/projects/show.html.haml
@@ -6,8 +6,8 @@
 %hr
 .row
  .col-md-6
-    .ui-box
+    .panel.panel-default
-      .title
+      .panel-heading
        Project info:
      %ul.well-list
        %li
@@ -75,10 +75,10 @@
              = visibility_level_icon(@project.visibility_level)
              = visibility_level_label(@project.visibility_level)
-    .ui-box
+    .panel.panel-default
-      .title
+      .panel-heading
        Transfer project
-      .body
+      .panel-body
        = form_for @project, url: transfer_admin_project_path(@project), method: :put, html: { class: 'form-horizontal' } do |f|
          .form-group
            = f.label :namespace_id, "Namespace", class: 'control-label'
@@ -92,8 +92,8 @@
  .col-md-6
    - if @group
-      .ui-box
+      .panel.panel-default
-        .title
+        .panel-heading
          %strong #{@group.name}
          group members (#{@group.users_groups.count})
          .pull-right
@@ -103,8 +103,8 @@
          - @group.users_groups.order('group_access DESC').each do |member|
            = render 'users_groups/users_group', member: member, show_controls: false
-    .ui-box
+    .panel.panel-default
-      .title
+      .panel-heading
        Project members
        %small
          (#{@project.users.count})

--- a/app/views/admin/users/index.html.haml
+++ b/app/views/admin/users/index.html.haml
@@ -28,10 +28,10 @@
      = link_to 'Reset', admin_users_path, class: "btn btn-cancel"
  .col-md-9
-    .ui-box
+    .panel.panel-default
-      .title
+      .panel-heading
        Users (#{@users.total_count})
-        .pull-right
+        .panel-head-actions
          = link_to 'New User', new_admin_user_path, class: "btn btn-new"
      %ul.well-list
        - @users.each do |user|

--- a/app/views/admin/users/show.html.haml
+++ b/app/views/admin/users/show.html.haml
@@ -14,8 +14,8 @@
 .row
  .col-md-6
-    .ui-box
+    .panel.panel-default
-      .title
+      .panel-heading
        Account:
        .pull-right
          = image_tag avatar_icon(@user.email, 32), class: "avatar s32"
@@ -118,8 +118,8 @@
  .col-md-6
    - if @user.users_groups.present?
-      .ui-box
+      .panel.panel-default
-        .title Groups:
+        .panel-heading Groups:
        %ul.well-list
          - @user.users_groups.each do |user_group|
            - group = user_group.group
@@ -132,8 +132,8 @@
                  = link_to group_users_group_path(group, user_group), data: { confirm: remove_user_from_group_message(group, @user) }, method: :delete, remote: true, class: "btn-tiny btn btn-remove", title: 'Remove user from group' do
                    %i.icon-remove.icon-white
-    .ui-box
+    .panel.panel-default
-      .title Projects (#{@projects.count})
+      .panel-heading Projects (#{@projects.count})
      %ul.well-list
        - @projects.sort_by(&:name_with_namespace).each do |project|
          - tm = project.team.find_tm(@user.id)

--- a/app/views/dashboard/_groups.html.haml
+++ b/app/views/dashboard/_groups.html.haml
-.ui-box
+.panel.panel-default
-  .title.clearfix
+  .panel-heading.clearfix
    = search_field_tag :filter_group, nil, placeholder: 'Filter by name', class: 'dash-filter form-control'
    - if current_user.can_create_group?
      %span.pull-right

--- a/app/views/dashboard/_projects.html.haml
+++ b/app/views/dashboard/_projects.html.haml
-.ui-box
+.panel.panel-default
-  .title.clearfix
+  .panel-heading.clearfix
    = search_field_tag :filter_projects, nil, placeholder: 'Filter by name', class: 'dash-filter form-control'
    - if current_user.can_create_project?
      %span.pull-right

--- a/app/views/groups/_projects.html.haml
+++ b/app/views/groups/_projects.html.haml
-.ui-box
+.panel.panel-default
-  .title
+  .panel-heading
    Projects (#{projects.count})
    - if can? current_user, :create_projects, @group
-      %span.pull-right
+      .panel-head-actions
        = link_to new_project_path(namespace_id: @group.id), class: "btn btn-new" do
          %i.icon-plus
          New project

--- a/app/views/groups/edit.html.haml
+++ b/app/views/groups/edit.html.haml
@@ -17,8 +17,8 @@
  .col-md-10
    .tab-content
      .tab-pane.active#tab-edit
-        .ui-box
+        .panel.panel-default
-          .title
+          .panel-heading
            %strong= @group.name
            group settings:
          %div.form-holder
@@ -61,8 +61,8 @@
                = f.submit 'Save group', class: "btn btn-save"
      .tab-pane#tab-projects
-        .ui-box
+        .panel.panel-default
-          .title
+          .panel-heading
            %strong= @group.name
            projects:
            - if can? current_user, :manage_group, @group
@@ -84,9 +84,9 @@
              .nothing-here-block This group has no projects yet
      .tab-pane#tab-remove
-        .ui-box.ui-box-danger
+        .panel.panel-default.panel.panel-danger
-          .title Remove group
+          .panel-heading Remove group
-          .body
+          .panel-body
            %p
              Removing group will cause all child projects and resources to be removed.
            %p

--- a/app/views/groups/members.html.haml
+++ b/app/views/groups/members.html.haml
@@ -24,8 +24,8 @@
    .js-toggle-content.hide.new-group-member-holder
      = render "new_group_member"
-.ui-box.prepend-top-20
+.panel.panel-default.prepend-top-20
-  .title
+  .panel-heading
    %strong #{@group.name}
    group members
    %small

--- a/app/views/help/index.html.haml
+++ b/app/views/help/index.html.haml
@@ -18,8 +18,8 @@
 .row
  .col-md-4
-    .ui-box
+    .panel.panel-default
-      .title
+      .panel-heading
        Quick help
      %ul.well-list
        %li
@@ -34,8 +34,8 @@
          = link_to "shortcuts", '#', onclick: "new Shortcuts()"
  .col-md-8
-    .ui-box.documentation
+    .panel.panel-default.documentation
-      .title Documentation
+      .panel-heading Documentation
      = preserve do
        - readme_text = File.read(Rails.root.join("doc", "README.md"))

--- a/app/views/profiles/emails/index.html.haml
+++ b/app/views/profiles/emails/index.html.haml
@@ -9,8 +9,8 @@
 %hr
-.ui-box
+.panel.panel-default
-  .title
+  .panel-heading
    Emails (#{@emails.count + 1})
  %ul.well-list#emails-table
    %li

--- a/app/views/profiles/groups/index.html.haml
+++ b/app/views/profiles/groups/index.html.haml
@@ -8,8 +8,8 @@
 %p.light
  Group members have access to all a group's projects
 %hr
-.ui-box
+.panel.panel-default
-  .title
+  .panel-heading
    %strong Groups
    (#{@user_groups.count})
  %ul.well-list

--- a/app/views/profiles/keys/index.html.haml
+++ b/app/views/profiles/keys/index.html.haml
@@ -10,8 +10,8 @@
 %hr
-.ui-box
+.panel.panel-default
-  .title
+  .panel-heading
    SSH Keys (#{@keys.count})
  %ul.well-list#keys-table
    = render @keys

--- a/app/views/profiles/keys/show.html.haml
+++ b/app/views/profiles/keys/show.html.haml
 .row
  .col-md-4
-    .ui-box
+    .panel.panel-default
-      .title
+      .panel-heading
        SSH Key
      %ul.well-list
        %li

--- a/app/views/projects/compare/show.html.haml
+++ b/app/views/projects/compare/show.html.haml
@@ -6,8 +6,8 @@
 = render "form"
 - if @commits.present?
-  %div.ui-box
+  %div.panel.panel-default
-    .title
+    .panel-heading
      Commits (#{@commits.count})
    - if @commits.size > MergeRequestDiff::COMMITS_SAFE_SIZE
      %ul.well-list

--- a/app/views/projects/edit.html.haml
+++ b/app/views/projects/edit.html.haml
@@ -6,7 +6,7 @@
        Project settings:
      %p.light Some settings, such as "Transfer Project", are hidden inside the danger area below
      %hr
-      .form-holder
+      .panel-body
        = form_for @project, remote: true, html: { class: "edit_project form-horizontal" } do |f|
          %fieldset
            .form-group.project_name_holder
@@ -106,13 +106,13 @@
      .js-toggle-content.hide
        - if can? current_user, :archive_project, @project
-          .ui-box.ui-box-danger
+          .panel.panel-default.panel.panel-danger
-            .title
+            .panel-heading
              - if @project.archived?
                Unarchive project
              - else
                Archive project
-            .body
+            .panel-body
              - if @project.archived?
                %p
                  Unarchiving the project will mark its repository as active.
@@ -137,10 +137,10 @@
          .nothing-here-block Only the project owner can archive a project
        - if can?(current_user, :change_namespace, @project)
-          .ui-box.ui-box-danger
+          .panel.panel-default.panel.panel-danger
-            .title Transfer project
+            .panel-heading Transfer project
            .errors-holder
-            .form-holder
+            .panel-body
              = form_for(@project, url: transfer_project_path(@project), method: :put, remote: true, html: { class: 'transfer-project form-horizontal' }) do |f|
                .form-group
                  = f.label :namespace_id, class: 'control-label' do
@@ -157,10 +157,10 @@
        - else
          .nothing-here-block Only the project owner can transfer a project
-        .ui-box.ui-box-danger
+        .panel.panel-default.panel.panel-danger
-          .title Rename repository
+          .panel-heading Rename repository
          .errors-holder
-          .form-holder
+          .panel-body
            = form_for(@project, html: { class: 'form-horizontal' }) do |f|
              .form-group
                = f.label :path, class: 'control-label' do
@@ -177,9 +177,9 @@
                = f.submit 'Rename', class: "btn btn-remove"
        - if can?(current_user, :remove_project, @project)
-          .ui-box.ui-box-danger
+          .panel.panel-default.panel.panel-danger
-            .title Remove project
+            .panel-heading Remove project
-            .body
+            .panel-body
              %p
                Removing the project will delete its repository and all related resources including issues, merge requests etc.
                %br

--- a/app/views/projects/hooks/index.html.haml
+++ b/app/views/projects/hooks/index.html.haml
@@ -51,8 +51,8 @@
    = f.submit "Add Web Hook", class: "btn btn-create"
 -if @hooks.any?
-  .ui-box
+  .panel.panel-default
-    .title
+    .panel-heading
      Web hooks (#{@hooks.count})
    %ul.well-list
      - @hooks.each do |hook|

--- a/app/views/projects/issues/_issues.html.haml
+++ b/app/views/projects/issues/_issues.html.haml
@@ -61,7 +61,7 @@
        = hidden_field_tag :status, params[:status]
        = button_tag "Update issues", class: "btn update_selected_issues btn-save"
-.ui-box
+.panel.panel-default
  %ul.well-list.issues-list
    = render @issues
    - if @issues.blank?

--- a/app/views/projects/merge_requests/_new_submit.html.haml
+++ b/app/views/projects/merge_requests/_new_submit.html.haml
@@ -58,8 +58,8 @@
      = f.submit 'Submit merge request', class: "btn btn-create"
 .mr-compare
-  %div.ui-box
+  %div.panel.panel-default
-    .title
+    .panel-heading
      Commits (#{@commits.count})
    - if @commits.size > MergeRequestDiff::COMMITS_SAFE_SIZE
      %ul.well-list

--- a/app/views/projects/merge_requests/index.html.haml
+++ b/app/views/projects/merge_requests/index.html.haml
@@ -61,7 +61,7 @@
      .pull-right
        = render 'shared/sort_dropdown'
-    .ui-box
+    .panel.panel-default
      %ul.well-list.mr-list
        = render @merge_requests
        - if @merge_requests.blank?

--- a/app/views/projects/merge_requests/show/_commits.html.haml
+++ b/app/views/projects/merge_requests/show/_commits.html.haml
 - if @commits.present?
-  .ui-box
+  .panel.panel-default
-    .title
+    .panel-heading
      %i.icon-list
      Commits (#{@commits.count})
    .commits

--- a/app/views/projects/milestones/_issues.html.haml
+++ b/app/views/projects/milestones/_issues.html.haml
-.ui-box
+.panel.panel-default
-  .title= title
+  .panel-heading= title
  %ul.well-list
    - issues.each do |issue|
      %li

--- a/app/views/projects/milestones/index.html.haml
+++ b/app/views/projects/milestones/index.html.haml
@@ -20,7 +20,7 @@
          = link_to project_milestones_path(@project, f: "all") do
            All
    .col-md-9
-      .ui-box
+      .panel.panel-default
        %ul.well-list
          = render @milestones

--- a/app/views/projects/milestones/show.html.haml
+++ b/app/views/projects/milestones/show.html.haml
@@ -84,14 +84,14 @@
  .tab-pane#tab-merge-requests
    .row
      .col-md-6
-        .ui-box
+        .panel.panel-default
-          .title Open
+          .panel-heading Open
          %ul.well-list
            - @merge_requests.opened.each do |merge_request|
              = render 'merge_request', merge_request: merge_request
      .col-md-6
-        .ui-box
+        .panel.panel-default
-          .title Closed
+          .panel-heading Closed
          %ul.well-list
            - @merge_requests.closed.each do |merge_request|
              = render 'merge_request', merge_request: merge_request

--- a/app/views/projects/team_members/_group_members.html.haml
+++ b/app/views/projects/team_members/_group_members.html.haml
 - group_users_count = @group.users_groups.count
-.ui-box
+.panel.panel-default
-  .title
+  .panel-heading
    %strong #{@group.name}
    group members (#{group_users_count})
    .pull-right

--- a/app/views/projects/team_members/_team.html.haml
+++ b/app/views/projects/team_members/_team.html.haml
 .team-table
  - can_admin_project = (can? current_user, :admin_project, @project)
-  .ui-box
+  .panel.panel-default
-    .title
+    .panel-heading
      %strong #{@project.name}
      project members (#{members.count})
    %ul.well-list

--- a/app/views/shared/_issues.html.haml
+++ b/app/views/shared/_issues.html.haml
 - if @issues.any?
  - @issues.group_by(&:project).each do |group|
-    .ui-box.ui-box-small
+    .panel.panel-default.panel.panel-default-small
      - project = group[0]
-      .title
+      .panel-heading
        = link_to_project project
        = link_to 'show all', project_issues_path(project), class: 'pull-right'

--- a/app/views/shared/_merge_requests.html.haml
+++ b/app/views/shared/_merge_requests.html.haml
 - if @merge_requests.any?
  - @merge_requests.group_by(&:target_project).each do |group|
-    .ui-box.ui-box-small
+    .panel.panel-default.panel.panel-default-small
      - project = group[0]
-      .title
+      .panel-heading
        = link_to_project project
        = link_to 'show all', project_merge_requests_path(project), class: 'pull-right'
      %ul.well-list.mr-list

--- a/app/views/users/_profile.html.haml
+++ b/app/views/users/_profile.html.haml
-.ui-box
+.panel.panel-default
-  .title
+  .panel-heading
    Profile
  %ul.well-list
    %li

--- a/app/views/users/_projects.html.haml
+++ b/app/views/users/_projects.html.haml
-.ui-box
+.panel.panel-default
-  .title Projects
+  .panel-heading Projects
  %ul.well-list
    - @projects.each do |project|
      %li