From 90740f2767b6b7cd4ba6f66b0df834bab91e1448 Mon Sep 17 00:00:00 2001 From: Stephen Oldham Date: Fri, 18 Dec 2020 21:30:09 +0000 Subject: [PATCH 01/13] Updated header with new tabs nav. Added new footer to layout. Updated some tests to allow for responsive changes to version display. --- cypress/integration/load.js | 8 +- cypress/integration/version.js | 20 ++-- .../shell-chrome/src/devtools/devtools.js | 27 +++-- .../views/_components/tab-link.edge | 13 +++ .../shell-chrome/views/_partials/footer.edge | 109 +++++++++++++++++ .../shell-chrome/views/_partials/header.edge | 110 ++++++++---------- .../views/_partials/tabs/components.edge | 74 ++++++++++++ packages/shell-chrome/views/panel.edge | 84 +++---------- tailwind.config.js | 6 + 9 files changed, 297 insertions(+), 154 deletions(-) create mode 100644 packages/shell-chrome/views/_components/tab-link.edge create mode 100644 packages/shell-chrome/views/_partials/footer.edge create mode 100644 packages/shell-chrome/views/_partials/tabs/components.edge diff --git a/cypress/integration/load.js b/cypress/integration/load.js index 04c27796..32756589 100644 --- a/cypress/integration/load.js +++ b/cypress/integration/load.js @@ -14,9 +14,7 @@ it('should load devtools', () => { .should('equal', AlpineVersion) // Devtools initialised - cy.get('[data-testid=status-line]') - .should('have.attr', 'title', 'Latest Version') - .contains(`Alpine.js v${AlpineVersion} detected`) + cy.get('[data-testid=version-line]').should('have.attr', 'title', 'Latest Version').contains(`v${AlpineVersion}`) cy.get('[data-testid=component-name]').should('have.length.above', 0) cy.get('[data-testid=select-component-message]').should('have.text', 'Select a component to view') @@ -38,9 +36,7 @@ it('should load devtools when no components found', () => { .should('equal', AlpineVersion) // Devtools initialised - cy.get('[data-testid=status-line]') - .should('have.attr', 'title', 'Latest Version') - .contains(`Alpine.js v${AlpineVersion} detected`) + cy.get('[data-testid=version-line]').should('have.attr', 'title', 'Latest Version').contains(`v${AlpineVersion}`) cy.get('[data-testid=component-name]').should('have.length', 0) cy.get('[data-testid=no-components-message]').should('be.visible').should('contain.text', 'No components found') diff --git a/cypress/integration/version.js b/cypress/integration/version.js index b530a8e0..555d42af 100644 --- a/cypress/integration/version.js +++ b/cypress/integration/version.js @@ -23,9 +23,9 @@ it('should display link + message for undefined outdated Alpine version (pre 2.3 .window() .its('Alpine.version') .should('equal', AlpineVersion) - .get('[data-testid=status-line]') + .get('[data-testid=version-line]') .should('have.attr', 'title', `Latest Version: ${AlpineVersion}`) - .should('contain', 'Alpine.js { .window() .its('Alpine.version') .should('equal', AlpineVersion) - .get('[data-testid=status-line]') + .get('[data-testid=version-line]') .should('have.attr', 'title', `Latest Version: ${AlpineVersion}`) - .should('contain', 'Alpine.js v2.6.0 detected') + .should('contain', 'v2.6.0') .get('a') .should('have.attr', 'href', 'https://github.com/alpinejs/alpine/releases') }) @@ -55,9 +55,9 @@ it('should display message for up to date version of Alpine.version', () => { .window() .its('Alpine.version') .should('equal', AlpineVersion) - .get('[data-testid=status-line]') + .get('[data-testid=version-line]') .should('have.attr', 'title', `Latest Version`) - .should('contain', `Alpine.js v${AlpineVersion} detected`) + .should('contain', `v${AlpineVersion}`) .get('a') .should('have.attr', 'href', '#') }) @@ -71,9 +71,9 @@ it('should display message for future Alpine versions', () => { .window() .its('Alpine.version') .should('equal', AlpineVersion) - .get('[data-testid=status-line]') + .get('[data-testid=version-line]') .should('have.attr', 'title', `Latest Version`) - .should('contain', `Alpine.js v4.0.0 detected`) + .should('contain', 'v4.0.0') .get('a') .should('have.attr', 'href', '#') }) @@ -99,9 +99,9 @@ it('should display message with latest Alpine version from npm registry', () => .its('Alpine.version') .should('equal', AlpineVersion) .wait('@registryRequest') - .get('[data-testid=status-line]') + .get('[data-testid=version-line]') .should('have.attr', 'title', `Latest Version: 5.0.0`) - .should('contain', `Alpine.js v4.0.0 detected`) + .should('contain', 'v4.0.0') .get('a') .should('have.attr', 'href', 'https://github.com/alpinejs/alpine/releases') }) diff --git a/packages/shell-chrome/src/devtools/devtools.js b/packages/shell-chrome/src/devtools/devtools.js index 605e2d84..7058d17b 100644 --- a/packages/shell-chrome/src/devtools/devtools.js +++ b/packages/shell-chrome/src/devtools/devtools.js @@ -41,6 +41,7 @@ export default function devtools() { showTools: false, showTimeout: 1500, activeTheme: 'dark-header', + loadingText: 'Alpine.js tools loading', orientation: getOrientation(), split: null, @@ -50,6 +51,9 @@ export default function devtools() { settingsPanelEnabled: process.env.NODE_ENV !== 'production', settingsPanelOpen: false, + tabsEnabled: process.env.NODE_ENV !== 'production', + activeTab: 'components', + get isLatest() { if (!this.version || !this.latest) return null return isRequiredVersion(this.latest, this.version) @@ -60,11 +64,11 @@ export default function devtools() { }, get detected() { - if (!this.showTools) { - return 'Alpine.js tools loading' - } + return this.version ? `v${this.version}` : ' { if (!this.showTools) { fetchWithTimeout('https://registry.npmjs.com/alpinejs', { timeout: this.showTimeout }) @@ -114,14 +119,14 @@ export default function devtools() { } const key = this.isLandscape ? 'columnGutters' : 'rowGutters' - splitOptions[key] = [ - { - track: 1, - element: this.$refs.handle, - }, - ] - this.$nextTick(() => { + splitOptions[key] = [ + { + track: 1, + element: this.$refs.handle, + }, + ] + this.split = Split(splitOptions) }) }, diff --git a/packages/shell-chrome/views/_components/tab-link.edge b/packages/shell-chrome/views/_components/tab-link.edge new file mode 100644 index 00000000..47ea0473 --- /dev/null +++ b/packages/shell-chrome/views/_components/tab-link.edge @@ -0,0 +1,13 @@ + + @!yield($slot.main) + + diff --git a/packages/shell-chrome/views/_partials/footer.edge b/packages/shell-chrome/views/_partials/footer.edge new file mode 100644 index 00000000..77de17e2 --- /dev/null +++ b/packages/shell-chrome/views/_partials/footer.edge @@ -0,0 +1,109 @@ +
+
+
+
+ + @verbatim +
+ + + + + + + + +
+ @endverbatim +
+
+ +
+ + + + + + + + + + + +
+
diff --git a/packages/shell-chrome/views/_partials/header.edge b/packages/shell-chrome/views/_partials/header.edge index 0c3fe13d..eb51c383 100644 --- a/packages/shell-chrome/views/_partials/header.edge +++ b/packages/shell-chrome/views/_partials/header.edge @@ -2,8 +2,9 @@ :class="{ 'bg-gray-100': !showTools, [theme['bg-header']]: showTools, + 'py-2': !tabsEnabled }" - class="flex py-2 pl-3 pr-4 text-base leading-9 tracking-tight font-bold text-white border-b border-gray-300 transition duration-700 transition-colors ease-in-out sm:leading-10" + class="flex items-center h-15 pl-3 pr-1 xs:pr-3 text-base tracking-tight font-bold text-white border-b border-gray-300 transition duration-700 transition-colors ease-in-out" >
@@ -34,82 +35,73 @@ @verbatim
- +
@endverbatim
- - - - - - - - - - - + + + @endcomponent @component('_components.tab-link', { tab: 'warnings' }) + + + + @endcomponent
diff --git a/packages/shell-chrome/views/_partials/tabs/components.edge b/packages/shell-chrome/views/_partials/tabs/components.edge new file mode 100644 index 00000000..4224f5fb --- /dev/null +++ b/packages/shell-chrome/views/_partials/tabs/components.edge @@ -0,0 +1,74 @@ +
+ +
+ +
+ +
+
+ + + @include('_partials.handle') + + +
+ + + + +
+ +
+
+
diff --git a/packages/shell-chrome/views/panel.edge b/packages/shell-chrome/views/panel.edge index 0c580e96..308f6d03 100644 --- a/packages/shell-chrome/views/panel.edge +++ b/packages/shell-chrome/views/panel.edge @@ -17,81 +17,29 @@
- @include('_partials.header') + @include('_partials.header') {{-- +
+ --}} @include('_partials.tabs.components') {{-- +
+ --}} -
- -
- -
- + - - @include('_partials.handle') - - -
- - - - -
- + - @include('_partials.settings') + @include('_partials.footer') @include('_partials.settings')
diff --git a/tailwind.config.js b/tailwind.config.js index ecc7f113..04fbd476 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -67,6 +67,12 @@ module.exports = { zIndex: { max: '2147483647', }, + borderWidth: { + 3: '3px', + }, + screens: { + xs: '560px', + }, }, }, variants: { From bea825ea7454edf6ac5e731dd68f09acdf9c0ae2 Mon Sep 17 00:00:00 2001 From: Stephen Oldham Date: Fri, 18 Dec 2020 21:44:02 +0000 Subject: [PATCH 02/13] Corrected formatting --- packages/shell-chrome/views/_partials/footer.edge | 2 +- packages/shell-chrome/views/panel.edge | 8 +++----- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/packages/shell-chrome/views/_partials/footer.edge b/packages/shell-chrome/views/_partials/footer.edge index 77de17e2..c4353352 100644 --- a/packages/shell-chrome/views/_partials/footer.edge +++ b/packages/shell-chrome/views/_partials/footer.edge @@ -30,9 +30,9 @@ diff --git a/packages/shell-chrome/views/panel.edge b/packages/shell-chrome/views/panel.edge index 308f6d03..000115bc 100644 --- a/packages/shell-chrome/views/panel.edge +++ b/packages/shell-chrome/views/panel.edge @@ -17,11 +17,9 @@
- @include('_partials.header') {{-- -
- --}} @include('_partials.tabs.components') {{-- -
- --}} + @include('_partials.header') + +
@include('_partials.tabs.components')