From 12acf15c90d25a22e706737dc54f17466fb30320 Mon Sep 17 00:00:00 2001 From: Andrey Date: Fri, 25 Sep 2015 20:33:05 +0200 Subject: Project page Update refactoring buttons, fixes for projects filter on the dashboard and group page --- app/assets/stylesheets/base/mixins.scss | 2 +- app/assets/stylesheets/generic/buttons.scss | 138 +++++++++++++ app/assets/stylesheets/generic/header.scss | 1 - app/assets/stylesheets/generic/sidebar.scss | 3 +- app/assets/stylesheets/generic/typography.scss | 8 +- app/assets/stylesheets/pages/groups.scss | 6 + app/assets/stylesheets/pages/projects.scss | 218 +++++++-------------- app/views/dashboard/projects/_projects.html.haml | 2 +- app/views/groups/_projects.html.haml | 2 +- app/views/projects/buttons/_dropdown.html.haml | 2 +- .../projects/buttons/_notifications.html.haml | 2 +- app/views/projects/empty.html.haml | 74 +++---- 12 files changed, 263 insertions(+), 195 deletions(-) diff --git a/app/assets/stylesheets/base/mixins.scss b/app/assets/stylesheets/base/mixins.scss index cdebe498914..5a7e79ddecd 100644 --- a/app/assets/stylesheets/base/mixins.scss +++ b/app/assets/stylesheets/base/mixins.scss @@ -299,4 +299,4 @@ color: #78a; } } -} \ No newline at end of file +} diff --git a/app/assets/stylesheets/generic/buttons.scss b/app/assets/stylesheets/generic/buttons.scss index 46ef595ddf0..cf76f538e01 100644 --- a/app/assets/stylesheets/generic/buttons.scss +++ b/app/assets/stylesheets/generic/buttons.scss @@ -1,3 +1,6 @@ +body { + text-rendering: geometricPrecision; +} .btn { @extend .btn-default; @@ -88,3 +91,138 @@ } } } + +@mixin btn-info { + @include border-radius(2px); + + border-width: 1px; + border-style: solid; + text-transform: uppercase; + font-size: 13px; + font-weight: 600; + line-height: 18px; + padding: 11px 16px; + letter-spacing: .4px; + + &:hover { + border-width: 1px; + border-style: solid; + } + + &:focus { + border-width: 1px; + border-style: solid; + } + + &:active { + @include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12)); + border-width: 1px; + border-style: solid; + } +} + +@mixin btn-middle { + @include border-radius(2px); + + border-width: 1px; + border-style: solid; + text-transform: uppercase; + font-size: 13px; + font-weight: 600; + line-height: 18px; + padding: 11px 24px; + letter-spacing: .4px; + + &:hover { + border-width: 1px; + border-style: solid; + } + + &:focus { + border-width: 1px; + border-style: solid; + } + + &:active { + @include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12)); + border-width: 1px; + border-style: solid; + } +} + + +@mixin btn-green { + background-color: #28b061; + border: 1px solid #26a65c; + color: #fff; + + &:hover { + background-color: #26ab5d; + border: 1px solid #229954; + color: #fff; + } + + &:focus { + background-color: #26ab5d; + border: 1px solid #229954; + color: #fff; + } + + &:active { + @include box-shadow (inset 0 0 4px rgba(0, 0, 0, 0.12)); + + background-color: #23a158 !important; + border: 1px solid #229954 !important; + color: #fff !important; + } +} + +/*Butons*/ + +@mixin bnt-project { + background-color: #f0f2f5; + border-color: #dce0e5; + color: #313236; + + &:hover { + border-color:#dce0e5; + background-color: #ebeef2; + color: #313236; + } + + &:focus { + border-color: #dce0e5; + background-color: #ebeef2; + color: #313236; + } + + &:active { + @include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12)); + + color: #313236 !important; + border-color: #c6cacf !important; + background-color: #e4e7ed !important; + } +} + +@mixin btn-remove { + background-color: #f72e60; + border-color: #ee295a; + + &:hover { + background-color: #e82757; + border-color: #e32555; + } + + &:focus { + background-color: #e82757; + border-color: #e32555; + } + + &:active { + @include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12)); + background-color: #d42450 !important; + border-color: #e12554 !important; + } + +} \ No newline at end of file diff --git a/app/assets/stylesheets/generic/header.scss b/app/assets/stylesheets/generic/header.scss index b758a526fbb..543ce41ab52 100644 --- a/app/assets/stylesheets/generic/header.scss +++ b/app/assets/stylesheets/generic/header.scss @@ -26,7 +26,6 @@ header { min-height: $header-height; background-color: #fff; border: none; - border-bottom: 1px solid #EEE; .container-fluid { width: 100% !important; diff --git a/app/assets/stylesheets/generic/sidebar.scss b/app/assets/stylesheets/generic/sidebar.scss index 3d055f0e66f..c5ea3aca7ca 100644 --- a/app/assets/stylesheets/generic/sidebar.scss +++ b/app/assets/stylesheets/generic/sidebar.scss @@ -21,12 +21,11 @@ min-height: 100vh; width: 100%; padding: 20px; - background: #f1f4f8; + background: #EAEBEC; .container-fluid { background: #FFF; padding: $gl-padding; - border: 1px solid #e7e9ed; min-height: 90vh; &.container-blank { diff --git a/app/assets/stylesheets/generic/typography.scss b/app/assets/stylesheets/generic/typography.scss index bfb559c294b..0ccb21f3cd1 100644 --- a/app/assets/stylesheets/generic/typography.scss +++ b/app/assets/stylesheets/generic/typography.scss @@ -2,10 +2,10 @@ * Headers * */ - - body { - text-rendering: optimizeLegibility - } +body { + text-rendering:optimizeLegibility; + -webkit-text-shadow: rgba(255,255,255,0.01) 0 0 1px; +} .page-title { margin-top: 0px; diff --git a/app/assets/stylesheets/pages/groups.scss b/app/assets/stylesheets/pages/groups.scss index 2b1b747139a..07a38a19fad 100644 --- a/app/assets/stylesheets/pages/groups.scss +++ b/app/assets/stylesheets/pages/groups.scss @@ -10,3 +10,9 @@ .milestone-row { @include str-truncated(90%); } + +.dashboard .side .panel .panel-heading .input-group { + .form-control { + height: 42px; + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index 621ba2fe2c8..a5940543a9d 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -1,3 +1,14 @@ +.alert_holder { + margin: -16px; + + .alert-link { + font-weight: normal; + } +} +.no-ssh-key-message { + background-color: #f28d35; + margin-bottom: 16px; +} .new_project, .edit_project { fieldset.features { @@ -20,20 +31,20 @@ margin: -$gl-padding; padding: $gl-padding; padding: 44px 0 17px 0; - + .project-identicon-holder { margin-bottom: 16px; - + .avatar, .identicon { margin: 0 auto; float: none; } - + .identicon { @include border-radius(50%); } } - + .project-home-dropdown { margin: 11px 3px 0; } @@ -59,7 +70,7 @@ background: #FFF; font-size: 14px; height: 42px; - margin-left: -2px; + margin-left: -1px; } } @@ -75,45 +86,15 @@ top: 17px; margin-bottom: 44px; } + .project-repo-buttons { margin-top: 12px; margin-bottom: 0px; - + .btn { - @extend .btn-info; - @include border-radius(2px); + @include bnt-project; + @include btn-info; - background-color: #f0f2f5; - border: 1px solid #dce0e5; - text-transform: uppercase; - color: #313236; - font-size: 13px; - font-weight: 600; - line-height: 18px; - padding: 11px 16px; - margin-left: 12px; - - &:hover { - @include border-radius(2px); - color: #313236; - border: 1px solid #dce0e5; - background-color: #ebeef2; - } - - &:focus { - @include border-radius(2px); - color: #313236; - border: 1px solid #dce0e5; - background-color: #ebeef2; - } - - &:active { - @include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12)); - color: #313236 !important; - border: 1px solid #c6cacf !important; - background-color: #e4e7ed !important; - } - .count { display: inline-block; } @@ -123,6 +104,7 @@ .split-one { display: inline-table; + margin-right: 12px; a { margin: -1px !important; @@ -138,7 +120,7 @@ cursor: auto; @extend .monospace; background: #FAFAFA; - width: 100%; + width: 101%; } .input-group-addon { @@ -147,106 +129,66 @@ &.git-protocols { padding: 0; border: none; - + .input-group-btn:last-child > .btn { @include border-radius-right(0); border-left: 1px solid #c6cacf; margin-left: -2px !important; } - input-group-btn:first-child > .btn { - @include border-radius-left(0); - } } } } .projects-search-form { - .input-group .btn-success { - background-color: #2ebf6b !important; - border: 1px solid #28b061 !important; - color: #fff !important; - - &:hover { - background-color: #2eb867 !important; - } - - &:focus { - background-color: #2eb867 !important; - } - - &:active { - @include box-shadow (inset 0 0 4px rgba(0, 0, 0, 0.12)); - - background-color: #28b061 !important; - border: 1px solid #26a65c !important; - color: #fff !important; - } - } - .input-group .form-control { - height: 39px !important; + height: 42px; } - } -.input-group-btn > .btn { - background-color: #f0f2f5; - border: 1px solid #dce0e5; - text-transform: uppercase; - color: #313236; - font-size: 13px; - font-weight: 600; - - &:focus { - outline: none; - color: #313236; - border: 1px solid #dce0e5; - background-color: #ebeef2; - } - - &:hover { - outline: none; - color: #313236; - border: 1px solid #dce0e5; - background-color: #ebeef2; +.input-group-btn { + .btn { + @include bnt-project; + @include btn-middle; + + &:hover { + outline: none; + } + + &:focus { + outline: none; + } + + &:active { + outline: none; + } } - &:active { + .active { @include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12)); - color: #313236 !important; border: 1px solid #c6cacf !important; background-color: #e4e7ed !important; } - -} - -.input-group-btn > .btn.active { - @include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12)); - border-top-right-radius: 0px; - border-bottom-right-radius: 0px; - color: #313236 !important; - border: 1px solid #c6cacf !important; - background-color: #e4e7ed !important; + .btn-green { + @include btn-green + } + } .split-repo-buttons { display: inline-table; - margin-left: 12px; + margin: 0 12px 0 12px; - .btn { - margin: 0 !important; - } - - .dropdown { - margin: 0 !important; + .btn{ + @include bnt-project; + @include btn-info; } .dropdown-toggle { - margin: -5px !important; + margin: -5px; } } @@ -254,22 +196,25 @@ margin-left: 5px; } -.open > .dropdown-toggle.btn { +.dropdown-new { + margin-left: -5px; +} + +.open > .dropdown-new.btn { @include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12)); border: 1px solid #c6cacf !important; background-color: #e4e7ed !important; text-transform: uppercase; - color: #313236; + color: #313236 !important; font-size: 13px; font-weight: 600; - color: #313236 !important; } .dropdown-menu { @include box-shadow(rgba(76, 86, 103, 0.247059) 0px 0px 1px 0px, rgba(31, 37, 50, 0.317647) 0px 2px 18px 0px); @include border-radius (0px); - + border: none; padding: 16px 0; font-size: 14px; @@ -298,7 +243,7 @@ } .project-home-panel .project-home-dropdown { - margin: 13px 0px 0; + margin: 13px 0px 0; } .project-visibility-level-holder { @@ -431,32 +376,12 @@ table.table.protected-branches-list tr.no-border { } .nav > li > a { - border: 1px solid transparent; - color: #313236; - font-size: 13px; - font-weight: 600; - text-decoration: none; - text-transform: uppercase; - margin: 0 8px 0 0; - padding: 10px 16px 10px 16px; - - &:hover { - @include border-radius(2px); - border: 1px solid #dce0e5; - background-color: #f0f2f5; - } - - &:focus { - @include border-radius(2px); - border: 1px solid #dce0e5; - background-color: #f0f2f5; - } + @include btn-info; + @include bnt-project; - &:active { - @include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12)); - border: 1px solid #c6cacf; - background-color: #e4e7ed; - } + background-color: transparent; + border: 1px solid #f7f8fa; + margin-left: 12px; } li { @@ -501,29 +426,27 @@ pre.light-well { .light-well { @include border-radius (2px); - color: #5b6169 !important; - font-size: 13px !important; - line-height: 1.6em !important; + color: #5b6169; + font-size: 13px; + line-height: 1.6em; } } .prepend-top-20 { - margin: 20px 8px 20px 8px; + margin-top: 20px; .btn-remove { - @include border-radius (2px); + @include btn-middle; + @include btn-remove; - font-size: 13px; - font-weight: 600px; - text-transform: uppercase; float: left !important; - margin-bottom: 14px; } } /* * Projects list rendered on dashboard and user page */ + .projects-list { @include basic-list; @@ -581,3 +504,4 @@ pre.light-well { .inline-form { display: inline-block; } + diff --git a/app/views/dashboard/projects/_projects.html.haml b/app/views/dashboard/projects/_projects.html.haml index ef9b9ce756a..0afe4e651c7 100644 --- a/app/views/dashboard/projects/_projects.html.haml +++ b/app/views/dashboard/projects/_projects.html.haml @@ -4,7 +4,7 @@ = search_field_tag :filter_projects, nil, placeholder: 'Filter by name', class: 'projects-list-filter form-control' - if current_user.can_create_project? %span.input-group-btn - = link_to new_project_path, class: 'btn btn-success' do + = link_to new_project_path, class: 'btn btn-green' do New project = render 'shared/projects/list', projects: @projects diff --git a/app/views/groups/_projects.html.haml b/app/views/groups/_projects.html.haml index 9ac56b1e5fe..2b27a88794d 100644 --- a/app/views/groups/_projects.html.haml +++ b/app/views/groups/_projects.html.haml @@ -4,7 +4,7 @@ = search_field_tag :filter_projects, nil, placeholder: 'Filter by name', class: 'projects-list-filter form-control' - if can? current_user, :create_projects, @group %span.input-group-btn - = link_to new_project_path(namespace_id: @group.id), class: 'btn btn-success' do + = link_to new_project_path(namespace_id: @group.id), class: 'btn btn-green' do New project = render 'shared/projects/list', projects: @projects, projects_limit: 20, stars: false diff --git a/app/views/projects/buttons/_dropdown.html.haml b/app/views/projects/buttons/_dropdown.html.haml index bc7625e8989..4580c912692 100644 --- a/app/views/projects/buttons/_dropdown.html.haml +++ b/app/views/projects/buttons/_dropdown.html.haml @@ -1,6 +1,6 @@ - if current_user %span.dropdown - %a.dropdown-toggle.btn.btn-new{href: '#', "data-toggle" => "dropdown"} + %a.dropdown-new.btn.btn-new{href: '#', "data-toggle" => "dropdown"} = icon('plus') %ul.dropdown-menu.dropdown-menu-right.project-home-dropdown - if can?(current_user, :create_issue, @project) diff --git a/app/views/projects/buttons/_notifications.html.haml b/app/views/projects/buttons/_notifications.html.haml index 57f764178d5..4b69a6d7a6f 100644 --- a/app/views/projects/buttons/_notifications.html.haml +++ b/app/views/projects/buttons/_notifications.html.haml @@ -5,7 +5,7 @@ = hidden_field_tag :notification_id, @membership.id = hidden_field_tag :notification_level %span.dropdown - %a.dropdown-toggle.btn.btn-new#notifications-button{href: '#', "data-toggle" => "dropdown"} + %a.dropdown-new.btn.btn-new#notifications-button{href: '#', "data-toggle" => "dropdown"} = icon('bell') = notification_label(@membership) = icon('angle-down') diff --git a/app/views/projects/empty.html.haml b/app/views/projects/empty.html.haml index 185ebf23934..d8f9f692c0b 100644 --- a/app/views/projects/empty.html.haml +++ b/app/views/projects/empty.html.haml @@ -1,7 +1,8 @@ -- if current_user && can?(current_user, :download_code, @project) - = render 'shared/no_ssh' - = render 'shared/no_password' - +.alert_holder + - if current_user && can?(current_user, :download_code, @project) + = render 'shared/no_ssh' + = render 'shared/no_password' + = render "home_panel" .gray-content-block.center @@ -15,38 +16,39 @@ file to this project. .prepend-top-20 -%h3.page-title - Command line instructions -%div.git-empty - %fieldset - %h5 Git global setup - %pre.light-well - :preserve - git config --global user.name "#{h git_user_name}" - git config --global user.email "#{h git_user_email}" +.empty_wrapper + %h3.page-title + Command line instructions + %div.git-empty + %fieldset + %h5 Git global setup + %pre.light-well + :preserve + git config --global user.name "#{h git_user_name}" + git config --global user.email "#{h git_user_email}" - %fieldset - %h5 Create a new repository - %pre.light-well - :preserve - git clone #{ content_tag(:span, default_url_to_repo, class: 'clone')} - cd #{h @project.path} - touch README.md - git add README.md - git commit -m "add README" - git push -u origin master + %fieldset + %h5 Create a new repository + %pre.light-well + :preserve + git clone #{ content_tag(:span, default_url_to_repo, class: 'clone')} + cd #{h @project.path} + touch README.md + git add README.md + git commit -m "add README" + git push -u origin master - %fieldset - %h5 Existing folder or Git repository - %pre.light-well - :preserve - cd existing_folder - git init - git remote add origin #{ content_tag(:span, default_url_to_repo, class: 'clone')} - git add . - git commit - git push -u origin master + %fieldset + %h5 Existing folder or Git repository + %pre.light-well + :preserve + cd existing_folder + git init + git remote add origin #{ content_tag(:span, default_url_to_repo, class: 'clone')} + git add . + git commit + git push -u origin master -- if can? current_user, :remove_project, @project - .prepend-top-20 - = link_to 'Remove project', [@project.namespace.becomes(Namespace), @project], data: { confirm: remove_project_message(@project)}, method: :delete, class: "btn btn-remove pull-right" + - if can? current_user, :remove_project, @project + .prepend-top-20 + = link_to 'Remove project', [@project.namespace.becomes(Namespace), @project], data: { confirm: remove_project_message(@project)}, method: :delete, class: "btn btn-remove pull-right" -- cgit v1.2.1