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
Hide whitespace changes
Inline Side-by-side
Showing with 263 additions and 195 deletions
app/assets/stylesheets/base/mixins.scss
View file @ 12acf15c
...@@ -299,4 +299,4 @@ ...@@ -299,4 +299,4 @@
color: #78a; color: #78a;
} }
} }
} }
\ No newline at end of file
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 {
...@@ -20,20 +31,20 @@ ...@@ -20,20 +31,20 @@
margin: -$gl-padding; margin: -$gl-padding;
padding: $gl-padding; padding: $gl-padding;
padding: 44px 0 17px 0; padding: 44px 0 17px 0;
.project-identicon-holder { .project-identicon-holder {
margin-bottom: 16px; margin-bottom: 16px;
.avatar, .identicon { .avatar, .identicon {
margin: 0 auto; margin: 0 auto;
float: none; float: none;
} }
.identicon { .identicon {
@include border-radius(50%); @include border-radius(50%);
} }
} }
.project-home-dropdown { .project-home-dropdown {
margin: 11px 3px 0; margin: 11px 3px 0;
} }
...@@ -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,45 +86,15 @@ ...@@ -75,45 +86,15 @@
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 {
...@@ -147,106 +129,66 @@ ...@@ -147,106 +129,66 @@
&.git-protocols { &.git-protocols {
padding: 0; padding: 0;
border: none; border: none;
.input-group-btn:last-child > .btn { .input-group-btn:last-child > .btn {
@include border-radius-right(0); @include border-radius-right(0);
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; &:hover {
font-weight: 600; outline: none;
}
&:focus {
outline: none; &:focus {
color: #313236; outline: none;
border: 1px solid #dce0e5; }
background-color: #ebeef2;
} &:active {
outline: none;
&:hover { }
outline: none;
color: #313236;
border: 1px solid #dce0e5;
background-color: #ebeef2;
} }
&:active { .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;
} }
}
.input-group-btn > .btn.active {
@include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12));
border-top-right-radius: 0px; .btn-green {
border-bottom-right-radius: 0px; @include btn-green
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,22 +196,25 @@ ...@@ -254,22 +196,25 @@
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 {
@include box-shadow(rgba(76, 86, 103, 0.247059) 0px 0px 1px 0px, rgba(31, 37, 50, 0.317647) 0px 2px 18px 0px); @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); @include border-radius (0px);
border: none; border: none;
padding: 16px 0; padding: 16px 0;
font-size: 14px; font-size: 14px;
...@@ -298,7 +243,7 @@ ...@@ -298,7 +243,7 @@
} }
.project-home-panel .project-home-dropdown { .project-home-panel .project-home-dropdown {
margin: 13px 0px 0; margin: 13px 0px 0;
} }
.project-visibility-level-holder { .project-visibility-level-holder {
...@@ -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
= render 'shared/no_ssh' - if current_user && can?(current_user, :download_code, @project)
= render 'shared/no_password' = render 'shared/no_ssh'
= render 'shared/no_password'
= render "home_panel" = render "home_panel"
.gray-content-block.center .gray-content-block.center
...@@ -15,38 +16,39 @@ ...@@ -15,38 +16,39 @@
file to this project. file to this project.
.prepend-top-20 .prepend-top-20
%h3.page-title .empty_wrapper
Command line instructions %h3.page-title
%div.git-empty Command line instructions
%fieldset %div.git-empty
%h5 Git global setup %fieldset
%pre.light-well %h5 Git global setup
:preserve %pre.light-well
git config --global user.name "#{h git_user_name}" :preserve
git config --global user.email "#{h git_user_email}" git config --global user.name "#{h git_user_name}"
git config --global user.email "#{h git_user_email}"
%fieldset %fieldset
%h5 Create a new repository %h5 Create a new repository
%pre.light-well %pre.light-well
:preserve :preserve
git clone #{ content_tag(:span, default_url_to_repo, class: 'clone')} git clone #{ content_tag(:span, default_url_to_repo, class: 'clone')}
cd #{h @project.path} cd #{h @project.path}
touch README.md touch README.md
git add README.md git add README.md
git commit -m "add README" git commit -m "add README"
git push -u origin master git push -u origin master
%fieldset %fieldset
%h5 Existing folder or Git repository %h5 Existing folder or Git repository
%pre.light-well %pre.light-well
:preserve :preserve
cd existing_folder cd existing_folder
git init git init
git remote add origin #{ content_tag(:span, default_url_to_repo, class: 'clone')} git remote add origin #{ content_tag(:span, default_url_to_repo, class: 'clone')}
git add . git add .
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