Skip to content

G
gitlab-ce
Commit 12acf15c authored by Andrey's avatar Andrey
Browse files
Options

Project page Update 

refactoring buttons, fixes for projects filter on the dashboard and
group page
parent 1868c8b2
Show whitespace changes
Inline Side-by-side
Showing with 263 additions and 195 deletions
app/assets/stylesheets/generic/buttons.scss
View file @ 12acf15c
body {
text-rendering: geometricPrecision;
}
.btn { .btn {
@extend .btn-default; @extend .btn-default;
...@@ -88,3 +91,138 @@ ...@@ -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
app/assets/stylesheets/generic/header.scss
View file @ 12acf15c
...@@ -26,7 +26,6 @@ header { ...@@ -26,7 +26,6 @@ header {
min-height: $header-height; min-height: $header-height;
background-color: #fff; background-color: #fff;
border: none; border: none;
border-bottom: 1px solid #EEE;
.container-fluid { .container-fluid {
width: 100% !important; width: 100% !important;
......
app/assets/stylesheets/generic/sidebar.scss
View file @ 12acf15c
...@@ -21,12 +21,11 @@ ...@@ -21,12 +21,11 @@
min-height: 100vh; min-height: 100vh;
width: 100%; width: 100%;
padding: 20px; padding: 20px;
background: #f1f4f8; background: #EAEBEC;
.container-fluid { .container-fluid {
background: #FFF; background: #FFF;
padding: $gl-padding; padding: $gl-padding;
border: 1px solid #e7e9ed;
min-height: 90vh; min-height: 90vh;
&.container-blank { &.container-blank {
......
app/assets/stylesheets/generic/typography.scss
View file @ 12acf15c
...@@ -2,10 +2,10 @@ ...@@ -2,10 +2,10 @@
* Headers * Headers
* *
*/ */
body {
body { text-rendering:optimizeLegibility;
text-rendering: optimizeLegibility -webkit-text-shadow: rgba(255,255,255,0.01) 0 0 1px;
} }
.page-title { .page-title {
margin-top: 0px; margin-top: 0px;
......
app/assets/stylesheets/pages/groups.scss
View file @ 12acf15c
...@@ -10,3 +10,9 @@ ...@@ -10,3 +10,9 @@
.milestone-row { .milestone-row {
@include str-truncated(90%); @include str-truncated(90%);
} }
.dashboard .side .panel .panel-heading .input-group {
.form-control {
height: 42px;
}
}
\ No newline at end of file
app/assets/stylesheets/pages/projects.scss
View file @ 12acf15c
.alert_holder {
margin: -16px;
.alert-link {
font-weight: normal;
}
}
.no-ssh-key-message {
background-color: #f28d35;
margin-bottom: 16px;
}
.new_project, .new_project,
.edit_project { .edit_project {
fieldset.features { fieldset.features {
...@@ -59,7 +70,7 @@ ...@@ -59,7 +70,7 @@
background: #FFF; background: #FFF;
font-size: 14px; font-size: 14px;
height: 42px; height: 42px;
margin-left: -2px; margin-left: -1px;
} }
} }
...@@ -75,44 +86,14 @@ ...@@ -75,44 +86,14 @@
top: 17px; top: 17px;
margin-bottom: 44px; margin-bottom: 44px;
} }
.project-repo-buttons { .project-repo-buttons {
margin-top: 12px; margin-top: 12px;
margin-bottom: 0px; margin-bottom: 0px;
.btn { .btn {
@extend .btn-info; @include bnt-project;
@include border-radius(2px); @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 { .count {
display: inline-block; display: inline-block;
...@@ -123,6 +104,7 @@ ...@@ -123,6 +104,7 @@
.split-one { .split-one {
display: inline-table; display: inline-table;
margin-right: 12px;
a { a {
margin: -1px !important; margin: -1px !important;
...@@ -138,7 +120,7 @@ ...@@ -138,7 +120,7 @@
cursor: auto; cursor: auto;
@extend .monospace; @extend .monospace;
background: #FAFAFA; background: #FAFAFA;
width: 100%; width: 101%;
} }
.input-group-addon { .input-group-addon {
...@@ -154,99 +136,59 @@ ...@@ -154,99 +136,59 @@
border-left: 1px solid #c6cacf; border-left: 1px solid #c6cacf;
margin-left: -2px !important; margin-left: -2px !important;
} }
input-group-btn:first-child > .btn {
@include border-radius-left(0);
}
} }
} }
} }
.projects-search-form { .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 { .input-group .form-control {
height: 39px !important; height: 42px;
} }
} }
.input-group-btn > .btn { .input-group-btn {
background-color: #f0f2f5; .btn {
border: 1px solid #dce0e5; @include bnt-project;
text-transform: uppercase; @include btn-middle;
color: #313236;
font-size: 13px;
font-weight: 600;
&:focus { &:hover {
outline: none; outline: none;
color: #313236;
border: 1px solid #dce0e5;
background-color: #ebeef2;
} }
&:hover { &:focus {
outline: none; outline: none;
color: #313236;
border: 1px solid #dce0e5;
background-color: #ebeef2;
} }
&:active { &:active {
outline: none;
}
}
.active {
@include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12)); @include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12));
color: #313236 !important;
border: 1px solid #c6cacf !important; border: 1px solid #c6cacf !important;
background-color: #e4e7ed !important; background-color: #e4e7ed !important;
} }
} .btn-green {
@include btn-green
.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;
} }
.split-repo-buttons { .split-repo-buttons {
display: inline-table; display: inline-table;
margin-left: 12px; margin: 0 12px 0 12px;
.btn { .btn{
margin: 0 !important; @include bnt-project;
} @include btn-info;
.dropdown {
margin: 0 !important;
} }
.dropdown-toggle { .dropdown-toggle {
margin: -5px !important; margin: -5px;
} }
} }
...@@ -254,16 +196,19 @@ ...@@ -254,16 +196,19 @@
margin-left: 5px; 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)); @include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12));
border: 1px solid #c6cacf !important; border: 1px solid #c6cacf !important;
background-color: #e4e7ed !important; background-color: #e4e7ed !important;
text-transform: uppercase; text-transform: uppercase;
color: #313236; color: #313236 !important;
font-size: 13px; font-size: 13px;
font-weight: 600; font-weight: 600;
color: #313236 !important;
} }
.dropdown-menu { .dropdown-menu {
...@@ -431,32 +376,12 @@ table.table.protected-branches-list tr.no-border { ...@@ -431,32 +376,12 @@ table.table.protected-branches-list tr.no-border {
} }
.nav > li > a { .nav > li > a {
border: 1px solid transparent; @include btn-info;
color: #313236; @include bnt-project;
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;
}
&:active { background-color: transparent;
@include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12)); border: 1px solid #f7f8fa;
border: 1px solid #c6cacf; margin-left: 12px;
background-color: #e4e7ed;
}
} }
li { li {
...@@ -501,29 +426,27 @@ pre.light-well { ...@@ -501,29 +426,27 @@ pre.light-well {
.light-well { .light-well {
@include border-radius (2px); @include border-radius (2px);
color: #5b6169 !important; color: #5b6169;
font-size: 13px !important; font-size: 13px;
line-height: 1.6em !important; line-height: 1.6em;
} }
} }
.prepend-top-20 { .prepend-top-20 {
margin: 20px 8px 20px 8px; margin-top: 20px;
.btn-remove { .btn-remove {
@include border-radius (2px); @include btn-middle;
@include btn-remove;
font-size: 13px;
font-weight: 600px;
text-transform: uppercase;
float: left !important; float: left !important;
margin-bottom: 14px;
} }
} }
/* /*
* Projects list rendered on dashboard and user page * Projects list rendered on dashboard and user page
*/ */
.projects-list { .projects-list {
@include basic-list; @include basic-list;
...@@ -581,3 +504,4 @@ pre.light-well { ...@@ -581,3 +504,4 @@ pre.light-well {
.inline-form { .inline-form {
display: inline-block; display: inline-block;
} }
app/views/dashboard/projects/_projects.html.haml
View file @ 12acf15c
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
= search_field_tag :filter_projects, nil, placeholder: 'Filter by name', class: 'projects-list-filter form-control' = search_field_tag :filter_projects, nil, placeholder: 'Filter by name', class: 'projects-list-filter form-control'
- if current_user.can_create_project? - if current_user.can_create_project?
%span.input-group-btn %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 New project
= render 'shared/projects/list', projects: @projects = render 'shared/projects/list', projects: @projects
app/views/groups/_projects.html.haml
View file @ 12acf15c
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
= search_field_tag :filter_projects, nil, placeholder: 'Filter by name', class: 'projects-list-filter form-control' = search_field_tag :filter_projects, nil, placeholder: 'Filter by name', class: 'projects-list-filter form-control'
- if can? current_user, :create_projects, @group - if can? current_user, :create_projects, @group
%span.input-group-btn %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 New project
= render 'shared/projects/list', projects: @projects, projects_limit: 20, stars: false = render 'shared/projects/list', projects: @projects, projects_limit: 20, stars: false
app/views/projects/buttons/_dropdown.html.haml
View file @ 12acf15c
- if current_user - if current_user
%span.dropdown %span.dropdown
%a.dropdown-toggle.btn.btn-new{href: '#', "data-toggle" => "dropdown"} %a.dropdown-new.btn.btn-new{href: '#', "data-toggle" => "dropdown"}
= icon('plus') = icon('plus')
%ul.dropdown-menu.dropdown-menu-right.project-home-dropdown %ul.dropdown-menu.dropdown-menu-right.project-home-dropdown
- if can?(current_user, :create_issue, @project) - if can?(current_user, :create_issue, @project)
......
app/views/projects/buttons/_notifications.html.haml
View file @ 12acf15c
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
= hidden_field_tag :notification_id, @membership.id = hidden_field_tag :notification_id, @membership.id
= hidden_field_tag :notification_level = hidden_field_tag :notification_level
%span.dropdown %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') = icon('bell')
= notification_label(@membership) = notification_label(@membership)
= icon('angle-down') = icon('angle-down')
......
app/views/projects/empty.html.haml
View file @ 12acf15c
- if current_user && can?(current_user, :download_code, @project) .alert_holder
- if current_user && can?(current_user, :download_code, @project)
= render 'shared/no_ssh' = render 'shared/no_ssh'
= render 'shared/no_password' = render 'shared/no_password'
...@@ -15,9 +16,10 @@ ...@@ -15,9 +16,10 @@
file to this project. file to this project.
.prepend-top-20 .prepend-top-20
%h3.page-title .empty_wrapper
%h3.page-title
Command line instructions Command line instructions
%div.git-empty %div.git-empty
%fieldset %fieldset
%h5 Git global setup %h5 Git global setup
%pre.light-well %pre.light-well
...@@ -47,6 +49,6 @@ ...@@ -47,6 +49,6 @@
git commit git commit
git push -u origin master git push -u origin master
- if can? current_user, :remove_project, @project - if can? current_user, :remove_project, @project
.prepend-top-20 .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" = link_to 'Remove project', [@project.namespace.becomes(Namespace), @project], data: { confirm: remove_project_message(@project)}, method: :delete, class: "btn btn-remove pull-right"
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7