diff options
author | Martin Wortschack <mwortschack@gitlab.com> | 2018-12-13 15:37:54 +0300 |
---|---|---|
committer | Sean McGivern <sean@gitlab.com> | 2018-12-13 15:37:54 +0300 |
commit | 388d4170907d2cad58c5999d32a74c1629681e4f (patch) | |
tree | 7a68bf6eb17f5c3e1439ea2e1de4fffbb0ccb6e7 /app/assets | |
parent | b96150d8d59d124de8e3a4acc6facff0726ddce0 (diff) |
Resolve "Redesign project lists UI"
Diffstat (limited to 'app/assets')
-rw-r--r-- | app/assets/javascripts/pages/dashboard/projects/index.js | 6 | ||||
-rw-r--r-- | app/assets/javascripts/pages/root/index.js | 5 | ||||
-rw-r--r-- | app/assets/javascripts/pages/users/user_tabs.js | 6 | ||||
-rw-r--r-- | app/assets/javascripts/star.js | 15 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/avatar.scss | 2 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/variables.scss | 2 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/projects.scss | 202 |
7 files changed, 218 insertions, 20 deletions
diff --git a/app/assets/javascripts/pages/dashboard/projects/index.js b/app/assets/javascripts/pages/dashboard/projects/index.js index 0c585e162cb..8f98be79640 100644 --- a/app/assets/javascripts/pages/dashboard/projects/index.js +++ b/app/assets/javascripts/pages/dashboard/projects/index.js @@ -1,3 +1,7 @@ import ProjectsList from '~/projects_list'; +import Star from '../../../star'; -document.addEventListener('DOMContentLoaded', () => new ProjectsList()); +document.addEventListener('DOMContentLoaded', () => { + new ProjectsList(); // eslint-disable-line no-new + new Star('.project-row'); // eslint-disable-line no-new +}); diff --git a/app/assets/javascripts/pages/root/index.js b/app/assets/javascripts/pages/root/index.js new file mode 100644 index 00000000000..09f8185d3b5 --- /dev/null +++ b/app/assets/javascripts/pages/root/index.js @@ -0,0 +1,5 @@ +// if the "projects dashboard" is a user's default dashboard, when they visit the +// instance root index, the dashboard will be served by the root controller instead +// of a dashboard controller. The root index redirects for all other default dashboards. + +import '../dashboard/projects/index'; diff --git a/app/assets/javascripts/pages/users/user_tabs.js b/app/assets/javascripts/pages/users/user_tabs.js index aa537d4a43e..006eaa08cd1 100644 --- a/app/assets/javascripts/pages/users/user_tabs.js +++ b/app/assets/javascripts/pages/users/user_tabs.js @@ -151,8 +151,10 @@ export default class UserTabs { loadTab(action, endpoint) { this.toggleLoading(true); + const params = action === 'projects' ? { skip_namespace: true } : {}; + return axios - .get(endpoint) + .get(endpoint, { params }) .then(({ data }) => { const tabSelector = `div#${action}`; this.$parentEl.find(tabSelector).html(data.html); @@ -188,7 +190,7 @@ export default class UserTabs { requestParams: { limit: 10 }, }); UserTabs.renderMostRecentBlocks('#js-overview .projects-block', { - requestParams: { limit: 10, skip_pagination: true }, + requestParams: { limit: 10, skip_pagination: true, skip_namespace: true, compact_mode: true }, }); this.loaded.overview = true; diff --git a/app/assets/javascripts/star.js b/app/assets/javascripts/star.js index 9af5d5b23cb..7404dfbf22a 100644 --- a/app/assets/javascripts/star.js +++ b/app/assets/javascripts/star.js @@ -5,11 +5,12 @@ import { spriteIcon } from './lib/utils/common_utils'; import axios from './lib/utils/axios_utils'; export default class Star { - constructor() { - $('.project-home-panel .toggle-star').on('click', function toggleStarClickCallback() { + constructor(container = '.project-home-panel') { + $(`${container} .toggle-star`).on('click', function toggleStarClickCallback() { const $this = $(this); const $starSpan = $this.find('span'); - const $startIcon = $this.find('svg'); + const $starIcon = $this.find('svg'); + const iconClasses = $starIcon.attr('class').split(' '); axios .post($this.data('endpoint')) @@ -22,12 +23,12 @@ export default class Star { if (isStarred) { $starSpan.removeClass('starred').text(s__('StarProject|Star')); - $startIcon.remove(); - $this.prepend(spriteIcon('star-o', 'icon')); + $starIcon.remove(); + $this.prepend(spriteIcon('star-o', iconClasses)); } else { $starSpan.addClass('starred').text(__('Unstar')); - $startIcon.remove(); - $this.prepend(spriteIcon('star', 'icon')); + $starIcon.remove(); + $this.prepend(spriteIcon('star', iconClasses)); } }) .catch(() => Flash('Star toggle failed. Try again later.')); diff --git a/app/assets/stylesheets/framework/avatar.scss b/app/assets/stylesheets/framework/avatar.scss index 054c75912ea..e132aa4c216 100644 --- a/app/assets/stylesheets/framework/avatar.scss +++ b/app/assets/stylesheets/framework/avatar.scss @@ -108,6 +108,7 @@ width: 100%; height: 100%; display: flex; + text-decoration: none; } .avatar { @@ -120,6 +121,7 @@ } &.s40 { min-width: 40px; min-height: 40px; } + &.s64 { min-width: 64px; min-height: 64px; } } .avatar-counter { diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index 5310195d9c5..0fc8cc10b7c 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -198,6 +198,7 @@ $well-light-text-color: #5b6169; $gl-font-size: 14px; $gl-font-size-xs: 11px; $gl-font-size-small: 12px; +$gl-font-size-medium: 1.43rem; $gl-font-size-large: 16px; $gl-font-weight-normal: 400; $gl-font-weight-bold: 600; @@ -276,6 +277,7 @@ $project-title-row-height: 64px; $project-avatar-mobile-size: 24px; $gl-line-height: 16px; $gl-line-height-24: 24px; +$gl-line-height-14: 14px; /* * Common component specific colors diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index 278800aba95..0ce0db038a7 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -969,34 +969,73 @@ pre.light-well { @include basic-list-stats; display: flex; align-items: center; - } + color: $gl-text-color-secondary; + padding: $gl-padding 0; - h3 { - font-size: $gl-font-size; + @include media-breakpoint-up(lg) { + padding: $gl-padding-24 0; + } + + &.no-description { + @include media-breakpoint-up(sm) { + .avatar-container { + align-self: center; + } + + .metadata-info { + margin-bottom: 0; + } + } + } } - .avatar-container, - .controls { - flex: 0 0 auto; + h2 { + font-size: $gl-font-size-medium; + font-weight: $gl-font-weight-bold; + margin-bottom: 0; + + @include media-breakpoint-up(sm) { + .namespace-name { + font-weight: $gl-font-weight-normal; + } + } } .avatar-container { + flex: 0 0 auto; align-self: flex-start; } .project-details { min-width: 0; + line-height: $gl-line-height; + + .flex-wrapper { + min-width: 0; + margin-top: -$gl-padding-8; // negative margin required for flex-wrap + } p, .commit-row-message { @include str-truncated(100%); margin-bottom: 0; } - } - .controls { - margin-left: auto; - text-align: right; + .user-access-role { + margin: 0; + } + + @include media-breakpoint-up(md) { + .description { + color: $gl-text-color; + } + } + + @include media-breakpoint-down(md) { + .user-access-role { + line-height: $gl-line-height-14; + } + } } .ci-status-link { @@ -1008,6 +1047,149 @@ pre.light-well { text-decoration: none; } } + + .controls { + margin-top: $gl-padding; + + @include media-breakpoint-down(md) { + margin-top: 0; + } + + @include media-breakpoint-down(xs) { + margin-top: $gl-padding-8; + } + + .icon-wrapper { + color: inherit; + margin-right: $gl-padding; + + @include media-breakpoint-down(md) { + margin-right: 0; + margin-left: $gl-padding-8; + } + + @include media-breakpoint-down(xs) { + &:first-child { + margin-left: 0; + } + } + } + + .ci-status-link { + display: inline-flex; + } + } + + .star-button { + .icon { + top: 0; + } + } + + .icon-container { + @include media-breakpoint-down(xs) { + margin-right: $gl-padding-8; + } + } + + &.compact { + .project-row { + padding: $gl-padding 0; + } + + h2 { + font-size: $gl-font-size; + } + + .avatar-container { + @include avatar-size(40px, 10px); + min-height: 40px; + min-width: 40px; + + .identicon.s64 { + font-size: 16px; + } + } + + .controls { + @include media-breakpoint-up(sm) { + margin-top: 0; + } + } + + .updated-note { + @include media-breakpoint-up(sm) { + margin-top: $gl-padding-8; + } + } + + .icon-wrapper { + margin-left: $gl-padding-8; + margin-right: 0; + + @include media-breakpoint-down(xs) { + &:first-child { + margin-left: 0; + } + } + } + + .user-access-role { + line-height: $gl-line-height-14; + } + } + + @include media-breakpoint-down(md) { + h2 { + font-size: $gl-font-size; + } + + .avatar-container { + @include avatar-size(40px, 10px); + min-height: 40px; + min-width: 40px; + + .identicon.s64 { + font-size: 16px; + } + } + } + + @include media-breakpoint-down(md) { + .updated-note { + margin-top: $gl-padding-8; + text-align: right; + } + } + + .forks, + .pipeline-status, + .updated-note { + display: flex; + } + + @include media-breakpoint-down(md) { + &:not(.explore) { + .forks { + display: none; + + } + } + + &.explore { + .pipeline-status, + .updated-note { + display: none !important; + } + } + } + + @include media-breakpoint-down(xs) { + .updated-note { + margin-top: 0; + text-align: left; + } + } } .card .projects-list li { |