Commit daeed3fd authored by Dmitriy Zaporozhets's avatar Dmitriy Zaporozhets

Refactor colors and lists

* Introduce 2 color links: black and blue
* Use black color link for UI elements like lists
* Refactor lists to use .title nested under li
* Make all lists (events, todos, activity, projects etc) use style
* List colorschema is now 333 for links and 555 for text
Signed-off-by: default avatarDmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>
parent 5e272889
...@@ -111,14 +111,17 @@ ul.content-list { ...@@ -111,14 +111,17 @@ ul.content-list {
> li { > li {
border-color: $table-border-color; border-color: $table-border-color;
color: $list-text-color;
font-size: $list-font-size; font-size: $list-font-size;
color: $list-text-color;
.title { .title {
color: $list-title-color;
font-weight: 600; font-weight: 600;
} }
a {
color: $gl-dark-link-color;
}
.description { .description {
p { p {
@include str-truncated; @include str-truncated;
......
...@@ -20,13 +20,14 @@ $background-color: #faf9f9; ...@@ -20,13 +20,14 @@ $background-color: #faf9f9;
$gl-font-size: 15px; $gl-font-size: 15px;
$gl-title-color: #333; $gl-title-color: #333;
$gl-text-color: #555; $gl-text-color: #555;
$gl-placeholder-color: #8f8f8f;
$gl-text-green: #4a2; $gl-text-green: #4a2;
$gl-text-red: #d12f19; $gl-text-red: #d12f19;
$gl-text-orange: #d90; $gl-text-orange: #d90;
$gl-header-color: $gl-title-color; $gl-link-color: #3084bb;
$gl-link-color: #333c48; $gl-dark-link-color: #333;
$gl-placeholder-color: #8f8f8f;
$gl-gray: $gl-text-color; $gl-gray: $gl-text-color;
$gl-header-color: $gl-title-color;
/* /*
* Lists * Lists
...@@ -38,8 +39,8 @@ $list-text-color: $gl-text-color; ...@@ -38,8 +39,8 @@ $list-text-color: $gl-text-color;
/* /*
* Markdown * Markdown
*/ */
$md-text-color: #444; $md-text-color: $gl-text-color;
$md-link-color: #3084bb; $md-link-color: $gl-link-color;
/* /*
* Code * Code
......
...@@ -55,7 +55,7 @@ li.commit { ...@@ -55,7 +55,7 @@ li.commit {
} }
.commit-row-message { .commit-row-message {
color: $gl-link-color; color: $gl-dark-link-color;
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;
......
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
} }
a { a {
color: #4c4e54; color: $gl-dark-link-color;
} }
.avatar { .avatar {
...@@ -31,11 +31,7 @@ ...@@ -31,11 +31,7 @@
.event-title { .event-title {
@include str-truncated(calc(100% - 174px)); @include str-truncated(calc(100% - 174px));
font-weight: 600; font-weight: 600;
color: $list-title-color; color: $list-text-color;
a {
color: $list-title-color;
}
} }
.event-body { .event-body {
......
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
padding: 10px $gl-padding; padding: 10px $gl-padding;
position: relative; position: relative;
.issue-title { .title {
margin-bottom: 2px; margin-bottom: 2px;
} }
......
...@@ -14,26 +14,8 @@ ...@@ -14,26 +14,8 @@
} }
.todo-item { .todo-item {
font-size: $gl-font-size;
padding-left: $gl-avatar-size + $gl-padding-top;
color: $gl-text-color;
a {
color: #4c4e54;
}
.avatar {
margin-left: -($gl-avatar-size + $gl-padding-top);
}
.todo-title { .todo-title {
@include str-truncated(calc(100% - 174px)); @include str-truncated(calc(100% - 174px));
font-weight: 600;
color: $list-title-color;
a {
color: $list-title-color;
}
} }
.todo-body { .todo-body {
......
...@@ -41,7 +41,7 @@ ...@@ -41,7 +41,7 @@
vertical-align: middle; vertical-align: middle;
i, a { i, a {
color: $gl-link-color; color: $gl-dark-link-color;
} }
img { img {
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
.todo-item.todo-block .todo-item.todo-block
= image_tag avatar_icon(todo.author_email, 40), class: 'avatar s40', alt:'' = image_tag avatar_icon(todo.author_email, 40), class: 'avatar s40', alt:''
.todo-title .todo-title.title
%span.author-name %span.author-name
- if todo.author - if todo.author
= link_to_author(todo) = link_to_author(todo)
......
...@@ -51,7 +51,7 @@ ...@@ -51,7 +51,7 @@
.panel-heading .panel-heading
= link_to project.name_with_namespace, namespace_project_path(project.namespace, project) = link_to project.name_with_namespace, namespace_project_path(project.namespace, project)
%ul.well-list.todos-list %ul.content-list.todos-list
= render group[1] = render group[1]
= paginate @todos, theme: "gitlab" = paginate @todos, theme: "gitlab"
- else - else
......
...@@ -3,11 +3,11 @@ ...@@ -3,11 +3,11 @@
.issue-check .issue-check
= check_box_tag dom_id(issue,"selected"), nil, false, 'data-id' => issue.id, class: "selected_issue" = check_box_tag dom_id(issue,"selected"), nil, false, 'data-id' => issue.id, class: "selected_issue"
.issue-title .issue-title.title
%span.issue-title-text %span.issue-title-text
= confidential_icon(issue) = confidential_icon(issue)
= link_to_gfm issue.title, issue_path(issue), class: "title" = link_to_gfm issue.title, issue_path(issue)
%ul.controls.light %ul.controls
- if issue.closed? - if issue.closed?
%li %li
CLOSED CLOSED
......
%li{ class: mr_css_classes(merge_request) } %li{ class: mr_css_classes(merge_request) }
.merge-request-title .merge-request-title.title
%span.merge-request-title-text %span.merge-request-title-text
= link_to_gfm merge_request.title, merge_request_path(merge_request), class: "title" = link_to_gfm merge_request.title, merge_request_path(merge_request)
%ul.controls.light %ul.controls
- if merge_request.merged? - if merge_request.merged?
%li %li
MERGED MERGED
......
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
%i.fa.fa-cogs %i.fa.fa-cogs
= link_to leave_group_group_members_path(group), data: { confirm: leave_group_message(group.name) }, method: :delete, class: "btn-sm btn btn-grouped", title: 'Leave this group' do = link_to leave_group_group_members_path(group), data: { confirm: leave_group_message(group.name) }, method: :delete, class: "btn-sm btn btn-grouped", title: 'Leave this group' do
%i.fa.fa-sign-out = icon('sign-out')
.stats .stats
%span %span
...@@ -22,7 +22,8 @@ ...@@ -22,7 +22,8 @@
= number_with_delimiter(group.users.count) = number_with_delimiter(group.users.count)
= image_tag group_icon(group), class: "avatar s40 hidden-xs" = image_tag group_icon(group), class: "avatar s40 hidden-xs"
= link_to group, class: 'group-name title' do .title
= link_to group, class: 'group-name' do
= group.name = group.name
- if group_member - if group_member
......
...@@ -7,26 +7,11 @@ ...@@ -7,26 +7,11 @@
- show_last_commit_as_description = false unless local_assigns[:show_last_commit_as_description] == true && project.commit - show_last_commit_as_description = false unless local_assigns[:show_last_commit_as_description] == true && project.commit
- css_class += " no-description" if project.description.blank? && !show_last_commit_as_description - css_class += " no-description" if project.description.blank? && !show_last_commit_as_description
- ci_commit = project.ci_commit(project.commit.sha) if ci && !project.empty_repo? && project.commit - ci_commit = project.ci_commit(project.commit.sha) if ci && !project.empty_repo? && project.commit
- cache_key = [project.namespace, project, controller.controller_name, controller.action_name, current_application_settings, 'v2.2'] - cache_key = [project.namespace, project, controller.controller_name, controller.action_name, current_application_settings, 'v2.3']
- cache_key.push(ci_commit.status) if ci_commit - cache_key.push(ci_commit.status) if ci_commit
%li.project-row{ class: css_class } %li.project-row{ class: css_class }
= cache(cache_key) do = cache(cache_key) do
= link_to project_path(project), class: dom_class(project) do
- if avatar
.dash-project-avatar
- if use_creator_avatar
= image_tag avatar_icon(project.creator.email, 40), class: "avatar s40", alt:''
- else
= project_icon(project, alt: '', class: 'avatar project-avatar s40')
%span.project-full-name.title
%span.namespace-name
- if project.namespace && !skip_namespace
= project.namespace.human_name
\/
%span.project-name.filter-title
= project.name
.controls .controls
- if project.main_language - if project.main_language
%span %span
...@@ -45,6 +30,23 @@ ...@@ -45,6 +30,23 @@
%span.visibility-icon.has_tooltip{data: { container: 'body', placement: 'left' }, %span.visibility-icon.has_tooltip{data: { container: 'body', placement: 'left' },
title: "#{visibility_level_label(project.visibility_level)} - #{project_visibility_level_description(project.visibility_level)}"} title: "#{visibility_level_label(project.visibility_level)} - #{project_visibility_level_description(project.visibility_level)}"}
= visibility_level_icon(project.visibility_level, fw: false) = visibility_level_icon(project.visibility_level, fw: false)
.title
= link_to project_path(project), class: dom_class(project) do
- if avatar
.dash-project-avatar
- if use_creator_avatar
= image_tag avatar_icon(project.creator.email, 40), class: "avatar s40", alt:''
- else
= project_icon(project, alt: '', class: 'avatar project-avatar s40')
%span.project-full-name
%span.namespace-name
- if project.namespace && !skip_namespace
= project.namespace.human_name
\/
%span.project-name.filter-title
= project.name
- if show_last_commit_as_description - if show_last_commit_as_description
.description .description
= link_to_gfm project.commit.title, namespace_project_commit_path(project.namespace, project, project.commit), = link_to_gfm project.commit.title, namespace_project_commit_path(project.namespace, project, project.commit),
......
%li.snippet-row %li.snippet-row
= image_tag avatar_icon(snippet.author_email), class: "avatar s40 hidden-xs", alt: '' = image_tag avatar_icon(snippet.author_email), class: "avatar s40 hidden-xs", alt: ''
.snippet-title .title
= link_to reliable_snippet_path(snippet), class: 'title' do = link_to reliable_snippet_path(snippet) do
= truncate(snippet.title, length: 60) = truncate(snippet.title, length: 60)
- if snippet.private? - if snippet.private?
%span.label.label-gray %span.label.label-gray
......
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