From e9b74fdf344e6455fa7f68b9c97baaaacb638c85 Mon Sep 17 00:00:00 2001 From: Henriette Darge Date: Thu, 4 Apr 2024 12:31:10 +0200 Subject: [PATCH] Fine-tuning of ZenModeButton component --- .changeset/wild-avocados-smash.md | 6 ++---- .../open_project/zen_mode_button.html.erb | 8 +++---- .../primer/open_project/zen_mode_button.pcss | 5 ----- .../primer/open_project/zen_mode_button.rb | 2 +- .../primer/open_project/zen_mode_button.ts | 21 +++++++++++-------- app/components/primer/primer.pcss | 1 - package-lock.json | 17 --------------- package.json | 1 - .../open_project/zen_mode_button_preview.rb | 7 ++----- static/classes.json | 3 --- .../open_project/zen_mode_button_test.rb | 2 +- test/css/component_specific_selectors_test.rb | 3 --- .../open_project/zen_mode_button_test.rb | 2 +- 13 files changed, 23 insertions(+), 55 deletions(-) delete mode 100644 app/components/primer/open_project/zen_mode_button.pcss diff --git a/.changeset/wild-avocados-smash.md b/.changeset/wild-avocados-smash.md index eec7305e20..df5e1e97d1 100644 --- a/.changeset/wild-avocados-smash.md +++ b/.changeset/wild-avocados-smash.md @@ -1,7 +1,5 @@ --- -"@openproject/primer-view-components": patch +"@openproject/primer-view-components": minor --- -We added a new zen-mode buton component, by clicking on the button, screen will be in full-mode or back in normal-mode. - -zen mode button component +Add `Primer::OpenProject::ZenModeButton` component. By clicking on the button, screen will be in full-mode or back in normal-mode. diff --git a/app/components/primer/open_project/zen_mode_button.html.erb b/app/components/primer/open_project/zen_mode_button.html.erb index e9a8178003..4e6f5b2874 100644 --- a/app/components/primer/open_project/zen_mode_button.html.erb +++ b/app/components/primer/open_project/zen_mode_button.html.erb @@ -1,10 +1,10 @@ -<%= render(Primer::BaseComponent.new(tag: "zen-mode-button", **@system_arguments)) do %> +<%= render(Primer::BaseComponent.new(**@system_arguments)) do %> <%= render( Primer::Beta::IconButton.new( scheme: :default, - id: 'zenModeButton', - icon: 'screen-normal', - aria: { label: 'zen mode' }, + id: "zenModeButton", + icon: "screen-normal", + aria: { label: I18n.t("zen_mode") }, data: { target: "zen-mode-button.button", action: "click:zen-mode-button#performAction" } ) ) %> diff --git a/app/components/primer/open_project/zen_mode_button.pcss b/app/components/primer/open_project/zen_mode_button.pcss deleted file mode 100644 index 79bd2a718d..0000000000 --- a/app/components/primer/open_project/zen_mode_button.pcss +++ /dev/null @@ -1,5 +0,0 @@ -/* CSS for ZenModeButton */ - -.zen-mode-button--active { -box-shadow: 0 0 3px var(--borderColor-default) inset !important; -} diff --git a/app/components/primer/open_project/zen_mode_button.rb b/app/components/primer/open_project/zen_mode_button.rb index a349a78231..812cacc862 100644 --- a/app/components/primer/open_project/zen_mode_button.rb +++ b/app/components/primer/open_project/zen_mode_button.rb @@ -15,7 +15,7 @@ def initialize(**system_arguments) @system_arguments[:classes] = class_names( @system_arguments[:classes], - "zen-mode-button" + "ZenModeButton" ) end end diff --git a/app/components/primer/open_project/zen_mode_button.ts b/app/components/primer/open_project/zen_mode_button.ts index e306e2f1e2..2be77995b9 100644 --- a/app/components/primer/open_project/zen_mode_button.ts +++ b/app/components/primer/open_project/zen_mode_button.ts @@ -1,5 +1,4 @@ import {controller, target} from '@github/catalyst' -import screenfull from 'screenfull' @controller class ZenModeButtonElement extends HTMLElement { @@ -8,19 +7,23 @@ class ZenModeButtonElement extends HTMLElement { private deactivateZenMode() { this.inZenMode = false - this.button.classList.remove('zen-mode-button--active') - document.getElementsByTagName('body')[0].classList.remove('zen-mode') - if (screenfull.isEnabled && screenfull.isFullscreen) { - screenfull.exit() + this.button.setAttribute('aria-pressed', 'false') + if (document.exitFullscreen) { + document.exitFullscreen() + } else if (document.webkitExitFullscreen) { + // iOS Safari + document.webkitExitFullscreen() } } private activateZenMode() { this.inZenMode = true - document.getElementsByTagName('body')[0].classList.add('zen-mode') - this.button.classList.add('zen-mode-button--active') - if (screenfull.isEnabled) { - screenfull.request() + this.button.setAttribute('aria-pressed', 'true') + if (document.documentElement.requestFullscreen) { + document.documentElement.requestFullscreen() + } else if (document.documentElement.webkitRequestFullscreen) { + // iOS Safari + document.documentElement.webkitRequestFullscreen() } } diff --git a/app/components/primer/primer.pcss b/app/components/primer/primer.pcss index 37f401035e..26331e104a 100644 --- a/app/components/primer/primer.pcss +++ b/app/components/primer/primer.pcss @@ -44,4 +44,3 @@ @import "./open_project/drag_handle.pcss"; @import "./open_project/border_grid.pcss"; @import "./open_project/input_group.pcss"; -@import "./open_project/zen_mode_button.pcss"; diff --git a/package-lock.json b/package-lock.json index 88c1f646d4..4905370bf3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,7 +20,6 @@ "@github/tab-container-element": "^3.1.2", "@oddbird/popover-polyfill": "^0.4.0", "@primer/behaviors": "^1.3.4" - "screenfull": "^6.0.2" }, "devDependencies": { "@changesets/changelog-github": "^0.5.0", @@ -10380,17 +10379,6 @@ "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", "dev": true }, - "node_modules/screenfull": { - "version": "6.0.2", - "resolved": "https://registry.npmjs.org/screenfull/-/screenfull-6.0.2.tgz", - "integrity": "sha512-AQdy8s4WhNvUZ6P8F6PB21tSPIYKniic+Ogx0AacBMjKP1GUHN2E9URxQHtCusiwxudnCKkdy4GrHXPPJSkCCw==", - "engines": { - "node": "^14.13.1 || >=16.0.0" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, "node_modules/semver": { "version": "7.5.4", "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", @@ -19130,11 +19118,6 @@ "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", "dev": true }, - "screenfull": { - "version": "6.0.2", - "resolved": "https://registry.npmjs.org/screenfull/-/screenfull-6.0.2.tgz", - "integrity": "sha512-AQdy8s4WhNvUZ6P8F6PB21tSPIYKniic+Ogx0AacBMjKP1GUHN2E9URxQHtCusiwxudnCKkdy4GrHXPPJSkCCw==" - }, "semver": { "version": "7.5.4", "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", diff --git a/package.json b/package.json index 59e02d36ad..a0d807d691 100644 --- a/package.json +++ b/package.json @@ -53,7 +53,6 @@ "@github/tab-container-element": "^3.1.2", "@oddbird/popover-polyfill": "^0.4.0", "@primer/behaviors": "^1.3.4" - "screenfull": "^6.0.2" }, "devDependencies": { "@changesets/changelog-github": "^0.5.0", diff --git a/previews/primer/open_project/zen_mode_button_preview.rb b/previews/primer/open_project/zen_mode_button_preview.rb index 5de2e784de..7e06986946 100644 --- a/previews/primer/open_project/zen_mode_button_preview.rb +++ b/previews/primer/open_project/zen_mode_button_preview.rb @@ -7,12 +7,9 @@ module Primer module OpenProject # @label ZenModeButton class ZenModeButtonPreview < ViewComponent::Preview - def playground() - render(Primer::OpenProject::ZenModeButton.new()) - end # @label Default - def default() - render(Primer::OpenProject::ZenModeButton.new()) + def default + render(Primer::OpenProject::ZenModeButton.new) end end end diff --git a/static/classes.json b/static/classes.json index b4ae332f4f..9a46fd7e7b 100644 --- a/static/classes.json +++ b/static/classes.json @@ -662,8 +662,5 @@ ], "UnderlineNav-octicon": [ "Primer::Alpha::UnderlineNav" - ], - "Zone-mode-button": [ - "Primer::OpenProject::ZoneModeButton" ] } \ No newline at end of file diff --git a/test/components/primer/open_project/zen_mode_button_test.rb b/test/components/primer/open_project/zen_mode_button_test.rb index 98ce82d225..3049a8b890 100644 --- a/test/components/primer/open_project/zen_mode_button_test.rb +++ b/test/components/primer/open_project/zen_mode_button_test.rb @@ -8,6 +8,6 @@ class PrimerOpenProjectZenModeButtonTest < Minitest::Test def test_renders render_inline(Primer::OpenProject::ZenModeButton.new) - assert_selector(".zen-mode-button .octicon-screen-normal") + assert_selector(".ZenModeButton .octicon-screen-normal") end end diff --git a/test/css/component_specific_selectors_test.rb b/test/css/component_specific_selectors_test.rb index 64cd32f624..ed3809f1dd 100644 --- a/test/css/component_specific_selectors_test.rb +++ b/test/css/component_specific_selectors_test.rb @@ -185,9 +185,6 @@ class ComponentSpecificSelectorsTest < Minitest::Test ], Primer::OpenProject::PageHeader => [ ".PageHeader--singleAction .PageHeader-action", - ], - Primer::OpenProject::ZenModeButton => [ - ".zen-mode-button--active" ] }.freeze diff --git a/test/system/open_project/zen_mode_button_test.rb b/test/system/open_project/zen_mode_button_test.rb index e813786f67..25507dedee 100644 --- a/test/system/open_project/zen_mode_button_test.rb +++ b/test/system/open_project/zen_mode_button_test.rb @@ -6,6 +6,6 @@ class IntegrationOpenProjectZenModeButtonTest < System::TestCase def test_renders_component visit_preview(:default) - assert_selector(".zen-mode-button") + assert_selector(".ZenModeButton") end end