Skip to content

G
gitlab-ce
Commit 52d2f2c5 authored by Tom Quirk's avatar Tom Quirk
Browse files
Options

Improve jira connect app styling and translations 

- remove global text centering
- allow alerts to be wider than body content
- convert some scss to gitlab-ui utilities
- mark index template for translations
parent adef80ad
Hide whitespace changes
Inline Side-by-side
Showing with 88 additions and 87 deletions
app/assets/javascripts/jira_connect/components/app.vue
View file @ 52d2f2c5
......@@ -60,15 +60,15 @@ export default {
<template>
<div>
<gl-alert v-if="errorMessage" class="gl-mb-6" variant="danger" :dismissible="false">
<gl-alert v-if="errorMessage" class="gl-mb-7" variant="danger" :dismissible="false">
{{ errorMessage }}
</gl-alert>
<h2>{{ s__('JiraService|GitLab for Jira Configuration') }}</h2>
<h2 class="gl-text-center">{{ s__('JiraService|GitLab for Jira Configuration') }}</h2>
<div
v-if="showNewUI"
class="gl-display-flex gl-justify-content-space-between gl-my-7 gl-pb-4 gl-border-b-solid gl-border-b-1 gl-border-b-gray-200"
class="jira-connect-app-body gl-display-flex gl-justify-content-space-between gl-my-7 gl-pb-4 gl-border-b-solid gl-border-b-1 gl-border-b-gray-200"
>
<h5 class="gl-align-self-center gl-mb-0" data-testid="new-jira-connect-ui-heading">
{{ s__('Integrations|Linked namespaces') }}
......
app/assets/javascripts/jira_connect/index.js
View file @ 52d2f2c5
......@@ -77,6 +77,7 @@ export async function initJiraConnect() {
Vue.use(GlFeatureFlagsPlugin);
const { groupsPath, subscriptionsPath, usersPath } = el.dataset;
AP.sizeToParent();
return new Vue({
el,
......
app/assets/stylesheets/page_bundles/jira_connect.scss
View file @ 52d2f2c5
......@@ -20,36 +20,23 @@
@import '@gitlab/ui/src/components/base/tooltip/tooltip';
$atlaskit-border-color: #dfe1e6;
$header-height: 40px;
.ac-content {
margin: 20px;
.subscription-form {
margin-bottom: 20px;
.field-group-input {
display: flex;
padding-top: $gl-padding-4;
.jira-connect-subscription-form {
.field-group-input {
display: flex;
padding-top: $gl-padding-4;
.ak-button {
align-items: center;
height: auto;
margin-left: $btn-margin-5;
}
.ak-button {
align-items: center;
height: auto;
margin-left: $btn-margin-5;
}
}
}
$header-height: 40px;
.jira-connect-header {
border-bottom: 1px solid $gray-100;
display: flex;
align-items: center;
justify-content: center;
min-height: $header-height;
padding-left: 16px;
padding-right: 16px;
position: fixed;
top: 0;
left: 0;
......@@ -57,7 +44,6 @@ $header-height: 40px;
}
.jira-connect-user {
font-size: $gl-font-size;
position: fixed;
top: 10px;
right: 20px;
......@@ -65,20 +51,17 @@ $header-height: 40px;
.jira-connect-app {
margin-top: $header-height;
height: calc(100% - #{$header-height});
max-width: 1000px;
}
.jira-connect-app-body {
max-width: 600px;
min-height: 95vh;
padding-top: 48px;
padding-left: 16px;
padding-right: 16px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.gl-mt-5 {
margin-top: 16px;
}
// for external_link buttons
svg {
fill: currentColor;
......@@ -115,12 +98,3 @@ svg {
}
}
}
.empty-subscriptions {
color: $gray-900;
}
.browser-limitations-notice {
font-size: $gl-font-size;
margin-top: 32px;
}
app/views/jira_connect/subscriptions/index.html.haml
View file @ 52d2f2c5
%header.jira-connect-header
= brand_header_logo
%header.jira-connect-header.gl-display-flex.gl-align-items-center.gl-justify-content-center.gl-px-5.gl-border-b-solid.gl-border-b-gray-100.gl-border-b-1.gl-bg-white
= link_to brand_header_logo, Gitlab.config.gitlab.url, target: '_blank', rel: 'noopener noreferrer'
.jira-connect-user
.jira-connect-user.gl-font-base
- if current_user
- user_link = link_to(current_user.to_reference, jira_connect_users_path, target: '_blank', rel: 'noopener noreferrer', class: 'js-jira-connect-sign-in')
= _('Signed in to GitLab as %{user_link}').html_safe % { user_link: user_link }
- elsif @subscriptions.present?
= link_to _('Sign in to GitLab'), jira_connect_users_path, target: '_blank', rel: 'noopener noreferrer', class: 'js-jira-connect-sign-in'
.jira-connect-app
%main.jira-connect-app.gl-px-5.gl-pt-7.gl-mx-auto
- if current_user.blank? && @subscriptions.empty?
%h2= s_('JiraService|GitLab for Jira Configuration')
%p= s_('JiraService|Sign in to GitLab.com to get started.')
.jira-connect-app-body.gl-text-center
%h2= s_('JiraService|GitLab for Jira Configuration')
%p= s_('JiraService|Sign in to GitLab.com to get started.')
.gl-mt-7
- sign_in_button_class = new_jira_connect_ui? ? 'btn gl-button btn-confirm' : 'ak-button ak-button__appearance-primary'
= external_link _('Sign in to GitLab'), jira_connect_users_path, class: "#{sign_in_button_class} js-jira-connect-sign-in"
.gl-mt-7
- sign_in_button_class = new_jira_connect_ui? ? 'btn gl-button btn-confirm' : 'ak-button ak-button__appearance-primary'
= external_link _('Sign in to GitLab'), jira_connect_users_path, class: "#{sign_in_button_class} js-jira-connect-sign-in"
.gl-mt-7
%p Note: this integration only works with accounts on GitLab.com (SaaS).
.gl-mt-7
%p= s_('Integrations|Note: this integration only works with accounts on GitLab.com (SaaS).')
- else
.js-jira-connect-app{ data: jira_connect_app_data(@subscriptions) }
- unless new_jira_connect_ui?
%form#add-subscription-form.subscription-form{ action: jira_connect_subscriptions_path }
.ak-field-group
%label
GitLab namespace
.jira-connect-app-body
- unless new_jira_connect_ui?
%form#add-subscription-form.jira-connect-subscription-form.gl-mb-5{ action: jira_connect_subscriptions_path }
.ak-field-group
%label= _('GitLab namespace')
.ak-field-group.field-group-input
%input#namespace-input.ak-field-text{ type: 'text', required: true, placeholder: 'e.g. "MyCompany" or "MyCompany/GroupName"' }
%button.ak-button.ak-button__appearance-primary{ type: 'submit' }
Link namespace to Jira
.ak-field-group.field-group-input
%input#namespace-input.ak-field-text{ type: 'text', required: true, placeholder: 'e.g. "MyCompany" or "MyCompany/GroupName"' }
%button.ak-button.ak-button__appearance-primary{ type: 'submit' }
= s_('Integrations|Link namespace to Jira')
- if @subscriptions.present?
%table.subscriptions.gl-w-full
%thead
%tr
%th Namespace
%th Added
%th
%tbody
- @subscriptions.each do |subscription|
- if @subscriptions.present?
%table.subscriptions.gl-w-full
%thead
%tr
%td= subscription.namespace.full_path
%td= subscription.created_at
%td= link_to 'Remove', jira_connect_subscription_path(subscription), class: 'js-jira-connect-remove-subscription'
- else
%h4.empty-subscriptions
No linked namespaces
%p= s_('Integrations|Namespaces are your GitLab groups and subgroups that will be linked to this Jira instance.')
%th= _('Namespace')
%th= s_('Integrations|Added')
%th
%tbody
- @subscriptions.each do |subscription|
%tr
%td= subscription.namespace.full_path
%td= subscription.created_at
%td= link_to _('Remove'), jira_connect_subscription_path(subscription), class: 'js-jira-connect-remove-subscription'
- else
.gl-text-center
%h4= s_('Integrations|No linked namespaces')
%p= s_('Integrations|Namespaces are your GitLab groups and subgroups that will be linked to this Jira instance.')
%p.browser-limitations-notice
%strong Browser limitations:
Adding a namespace currently works only in browsers that allow cross‑site cookies. Please make sure to use
%a{ href: 'https://www.mozilla.org/en-US/firefox/', target: '_blank', rel: 'noopener noreferrer' } Firefox
or enable cross‑site cookies in your browser when adding a namespace.
%p.jira-connect-app-body.gl-mt-7.gl-font-base.gl-text-center
%strong= s_('Integrations|Browser limitations')
- firefox_link_url = 'https://www.mozilla.org/en-US/firefox/'
- firefox_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: firefox_link_url }
= s_('Integrations|Adding a namespace currently works only in browsers that allow cross‑site cookies. Please make sure to use %{firefox_link_start}Firefox%{firefox_link_end} or enable cross‑site cookies in your browser when adding a namespace.').html_safe % { firefox_link_start: firefox_link_start, firefox_link_end: '</a>'.html_safe }
= link_to _('Learn more'), 'https://gitlab.com/gitlab-org/gitlab/-/issues/284211', target: '_blank', rel: 'noopener noreferrer'
= webpack_bundle_tag 'performance_bar' if performance_bar_enabled?
......
app/views/layouts/jira_connect.html.haml
View file @ 52d2f2c5
......@@ -12,5 +12,4 @@
= Gon::Base.render_data(nonce: content_security_policy_nonce)
= yield :head
%body
.ac-content
= yield
= yield
changelogs/unreleased/jira-connect-app-style-cleanup.yml 0 → 100644
View file @ 52d2f2c5
---
title: Improve Jira connect app styling and i18n
merge_request: 53441
author:
type: changed
locale/gitlab.pot
View file @ 52d2f2c5
......@@ -13681,6 +13681,9 @@ msgstr ""
msgid "GitLab metadata URL"
msgstr ""
msgid "GitLab namespace"
msgstr ""
msgid "GitLab project export"
msgstr ""
......@@ -16057,12 +16060,21 @@ msgstr ""
msgid "Integrations|Add namespace"
msgstr ""
msgid "Integrations|Added"
msgstr ""
msgid "Integrations|Adding a namespace currently works only in browsers that allow cross‑site cookies. Please make sure to use %{firefox_link_start}Firefox%{firefox_link_end} or enable cross‑site cookies in your browser when adding a namespace."
msgstr ""
msgid "Integrations|All details"
msgstr ""
msgid "Integrations|All projects inheriting these settings will also be reset."
msgstr ""
msgid "Integrations|Browser limitations"
msgstr ""
msgid "Integrations|Comment detail:"
msgstr ""
......@@ -16102,6 +16114,9 @@ msgstr ""
msgid "Integrations|Issues created in Jira are shown here once you have created the issues in project setup in Jira."
msgstr ""
msgid "Integrations|Link namespace to Jira"
msgstr ""
msgid "Integrations|Link namespaces"
msgstr ""
......@@ -16114,6 +16129,12 @@ msgstr ""
msgid "Integrations|No available namespaces."
msgstr ""
msgid "Integrations|No linked namespaces"
msgstr ""
msgid "Integrations|Note: this integration only works with accounts on GitLab.com (SaaS)."
msgstr ""
msgid "Integrations|Projects using custom settings will not be affected."
msgstr ""
......
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