From d4700e3dac274ee71a79766b7e9ae73c5c042ab3 Mon Sep 17 00:00:00 2001 From: Sarah German Date: Tue, 26 Jul 2022 16:57:18 -0500 Subject: Backport Versions menu to 13.12 --- commands/frontend.rb | 9 - content/_data/versions.yaml | 2 +- content/assets/stylesheets/stylesheet.scss | 45 ++++- .../frontend/default/components/versions_menu.vue | 94 +++++++++ content/frontend/default/default.js | 17 ++ content/frontend/default/environment.js | 22 ++ content/frontend/services/fetch_versions.js | 8 + layouts/cta.html | 2 +- layouts/default.html | 1 + layouts/header.html | 34 +--- layouts/home.html | 2 + package.json | 7 +- patches/@gitlab+ui+29.38.1.patch | 19 ++ rollup.config.js | 8 +- .../components/helpers/versions_menu_helper.js | 14 ++ .../default/components/versions_menu_spec.js | 87 ++++++++ yarn.lock | 225 +++++++++++++++++---- 17 files changed, 513 insertions(+), 83 deletions(-) create mode 100644 content/frontend/default/components/versions_menu.vue create mode 100644 content/frontend/default/environment.js create mode 100644 content/frontend/services/fetch_versions.js create mode 100644 patches/@gitlab+ui+29.38.1.patch create mode 100644 spec/frontend/default/components/helpers/versions_menu_helper.js create mode 100644 spec/frontend/default/components/versions_menu_spec.js diff --git a/commands/frontend.rb b/commands/frontend.rb index ed4a5346..532fe54c 100644 --- a/commands/frontend.rb +++ b/commands/frontend.rb @@ -26,13 +26,4 @@ run do |opts, args, cmd| ERROR end - puts 'Create icons.svg ...' - root = File.expand_path('../', __dir__) - path = 'node_modules/@gitlab/svgs/dist/icons.svg' - - if File.write('public/assets/images/icons.svg', File.read("#{root}/#{path}")) - puts 'Done!' - else - puts 'Failed to create icons.svg!' - end end diff --git a/content/_data/versions.yaml b/content/_data/versions.yaml index f45415ce..b95595bc 100644 --- a/content/_data/versions.yaml +++ b/content/_data/versions.yaml @@ -9,6 +9,7 @@ previous_majors: online: - "15.2" - "15.1" + - "15.0" # The last version before the next major release. Verify near 14.10 as there may be more 14.X versions. last_before_new_major: @@ -17,7 +18,6 @@ last_before_new_major: # Versions not appearing in the dropdown, but available as Docker images # https://docs.gitlab.com/archives/#offline-archives offline: - - "15.0" - "14.9" - "14.8" - "14.7" diff --git a/content/assets/stylesheets/stylesheet.scss b/content/assets/stylesheets/stylesheet.scss index 0dd5e910..0c5ad447 100644 --- a/content/assets/stylesheets/stylesheet.scss +++ b/content/assets/stylesheets/stylesheet.scss @@ -243,11 +243,6 @@ h1 { } } - .btn { - line-height: 1rem; - font-size: 0.875rem; - } - .navbar-nav { margin-top: 0; @@ -295,8 +290,44 @@ h1 { } } - .dropdown-toggle { + .btn, + .gl-dropdown-toggle.gl-button.btn-default, + .gl-dropdown-toggle.gl-button.btn-default:hover, + .gl-dropdown-toggle.gl-button.btn-default:focus { background-color: $help-indigo-500; + font-size: 0.875rem; + line-height: 1; + color: $gds-white; + box-shadow: none; + svg { + fill: $gds-white; + } + } + .dropdown-menu:focus-visible, + .gl-new-dropdown-inner:focus-visible, + .gl-new-dropdown-contents:focus-visible { + outline: none; + } + .gl-new-dropdown ul { + margin: 0.125rem 0 0 !important; + padding-left: 0; + } + hr.dropdown-divider { + margin: 0.5rem 0; + } + li.gl-new-dropdown-item { + margin-bottom: 0; + } + a.dropdown-item, + a.dropdown-item:hover { + border-bottom: 0; + color: $gds-gray-900; + } + p.gl-new-dropdown-item-text-primary { + margin: 0; + } + .dropdown-toggle::after { + display: none; } @media all and (max-width: $bp-md) { @@ -451,7 +482,7 @@ h1 { } .btn-cta { - background-color: $header-free-trial-button-color; + background-color: $header-free-trial-button-color !important; } h2[id]::before, diff --git a/content/frontend/default/components/versions_menu.vue b/content/frontend/default/components/versions_menu.vue new file mode 100644 index 00000000..f29e7af5 --- /dev/null +++ b/content/frontend/default/components/versions_menu.vue @@ -0,0 +1,94 @@ + + + diff --git a/content/frontend/default/default.js b/content/frontend/default/default.js index fa6933be..3935d9e2 100644 --- a/content/frontend/default/default.js +++ b/content/frontend/default/default.js @@ -1,10 +1,15 @@ import Vue from 'vue'; import NavigationToggle from './components/navigation_toggle.vue'; import VersionBanner from './components/version_banner.vue'; +import VersionsMenu from './components/versions_menu.vue'; import { setupTableOfContents } from './setup_table_of_contents'; document.addEventListener('DOMContentLoaded', () => { const versionBanner = document.querySelector('#js-version-banner'); + if (!versionBanner) { + return; + } + const isOutdated = versionBanner.hasAttribute('data-is-outdated'); const { latestVersionUrl, archivesUrl } = versionBanner.dataset; @@ -44,3 +49,15 @@ document.addEventListener('DOMContentLoaded', () => { setupTableOfContents(); }); + +document.addEventListener('DOMContentLoaded', () => { + return new Vue({ + el: '.js-versions-menu', + components: { + VersionsMenu, + }, + render(createElement) { + return createElement(VersionsMenu); + }, + }); +}); diff --git a/content/frontend/default/environment.js b/content/frontend/default/environment.js new file mode 100644 index 00000000..05e8ced5 --- /dev/null +++ b/content/frontend/default/environment.js @@ -0,0 +1,22 @@ +/** + * Utilities for determining site environment. + */ + +export const GlHosts = [ + { + environment: 'production', + host: 'docs.gitlab.com', + }, + { + environment: 'review', + host: '35.193.151.162.nip.io', + }, + { + environment: 'local', + host: 'localhost', + }, +]; + +export function isGitLabHosted() { + return GlHosts.some((e) => window.location.host.includes(e.host)); +} diff --git a/content/frontend/services/fetch_versions.js b/content/frontend/services/fetch_versions.js new file mode 100644 index 00000000..e65f396c --- /dev/null +++ b/content/frontend/services/fetch_versions.js @@ -0,0 +1,8 @@ +export function getVersions() { + return fetch('https://docs.gitlab.com/versions.json') + .then((response) => response.json()) + .then((data) => { + return data[0]; + }) + .catch((error) => console.error(error)); // eslint-disable-line no-console +} diff --git a/layouts/cta.html b/layouts/cta.html index 03e12984..bdfb35dd 100644 --- a/layouts/cta.html +++ b/layouts/cta.html @@ -1,3 +1,3 @@ - + Get free trial diff --git a/layouts/default.html b/layouts/default.html index 939a6583..c15eb766 100644 --- a/layouts/default.html +++ b/layouts/default.html @@ -95,6 +95,7 @@ + diff --git a/layouts/header.html b/layouts/header.html index 343ad61f..3b14398b 100644 --- a/layouts/header.html +++ b/layouts/header.html @@ -21,35 +21,13 @@ +
+