Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature: Add tabs and footer #137

Merged
merged 14 commits into from
Jan 5, 2021
Merged

Feature: Add tabs and footer #137

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
90740f2
Updated header with new tabs nav. Added new footer to layout. Updated…
stephenoldham Dec 18, 2020
bea825e
Corrected formatting
stephenoldham Dec 18, 2020
89fa427
Disabled prettier for .edge files as formatting using html parser now…
stephenoldham Dec 18, 2020
f35bfa3
Small change to tests for new location of version line
stephenoldham Dec 21, 2020
322c686
Fix for garbled template files.
stephenoldham Dec 21, 2020
ca029b4
Fix for scroll bug in components panels in new layout.
stephenoldham Dec 21, 2020
c159c9e
Removed unnecessary bound classed. Updated main footer hidden class i…
stephenoldham Dec 21, 2020
4293182
Pivoted to using edge to show/hide tabs feature content based on envi…
stephenoldham Dec 21, 2020
971634f
Added test for compoenents watched message in footer
stephenoldham Dec 21, 2020
dcfdde5
Update lib/edge/render.js
stephenoldham Dec 22, 2020
e87546a
Update packages/shell-chrome/views/_partials/header.edge
stephenoldham Dec 22, 2020
f563789
Update packages/shell-chrome/views/panel.edge
stephenoldham Dec 22, 2020
f0da84c
Update packages/shell-chrome/views/_partials/header.edge
stephenoldham Dec 22, 2020
cd393d3
Merge branch 'master' into feature/add-tabs-and-footer
HugoDF Jan 5, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 0 additions & 6 deletions .prettierrc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,4 @@ module.exports = {
singleQuote: true,
tabWidth: 4,
trailingComma: 'all',
overrides: [
{
files: '*.edge',
options: { parser: 'html' },
},
],
}
8 changes: 2 additions & 6 deletions cypress/integration/load.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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')
Expand All @@ -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')
Expand Down
30 changes: 15 additions & 15 deletions cypress/integration/version.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,10 +23,10 @@ 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 <v2.3.1 detected')
.get('a')
.should('contain', '<v2.3.1')
.get('[data-testid=version-line] a')
.should('have.attr', 'href', 'https://github.com/alpinejs/alpine/releases')
})

Expand All @@ -39,10 +39,10 @@ it('should display link + message for outdated version', () => {
.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')
.get('a')
.should('contain', 'v2.6.0')
.get('[data-testid=version-line] a')
.should('have.attr', 'href', 'https://github.com/alpinejs/alpine/releases')
})

Expand All @@ -55,10 +55,10 @@ 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`)
.get('a')
.should('contain', `v${AlpineVersion}`)
.get('[data-testid=version-line] a')
.should('have.attr', 'href', '#')
})

Expand All @@ -71,10 +71,10 @@ 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`)
.get('a')
.should('contain', 'v4.0.0')
.get('[data-testid=version-line] a')
.should('have.attr', 'href', '#')
})

Expand All @@ -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`)
.get('a')
.should('contain', 'v4.0.0')
.get('[data-testid=version-line] a')
.should('have.attr', 'href', 'https://github.com/alpinejs/alpine/releases')
})
4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
"test": "jest",
"cy:run": "cypress run",
"cy:open": "cypress open",
"format": "prettier './{packages/**/,cypress/**/*,}*.{js,html,edge,css}' --write",
"format": "prettier './{packages/**/,cypress/**/*,}*.{js,html,css}' --write",
"check:format": "prettier './{packages/**/,cypress/**/*,}*.{js,html,css}' -c",
"prepackage": "npm run build",
"package": "cd ./dist/chrome && zip -r ../alpine-devtools-$npm_package_version.zip . && rm -rf ../chrome"
Expand Down Expand Up @@ -46,6 +46,6 @@
}
},
"lint-staged": {
"*.{js,css,md,html,edge}": "prettier --write"
"*.{js,css,md,html}": "prettier --write"
}
}
27 changes: 16 additions & 11 deletions packages/shell-chrome/src/devtools/devtools.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ export default function devtools() {
showTools: false,
showTimeout: 1500,
activeTheme: 'dark-header',
loadingText: 'Alpine.js tools loading',

orientation: getOrientation(),
split: null,
Expand All @@ -50,6 +51,9 @@ export default function devtools() {
settingsPanelEnabled: process.env.NODE_ENV !== 'production',
settingsPanelOpen: false,

tabsEnabled: process.env.NODE_ENV !== 'production',
stephenoldham marked this conversation as resolved.
Show resolved Hide resolved
activeTab: 'components',

get isLatest() {
if (!this.version || !this.latest) return null
return isRequiredVersion(this.latest, this.version)
Expand All @@ -60,11 +64,11 @@ export default function devtools() {
},

get detected() {
if (!this.showTools) {
return 'Alpine.js tools loading'
}
return this.version ? `v${this.version}` : '<v2.3.1'
},

return this.version ? `Alpine.js v${this.version} detected` : 'Alpine.js <v2.3.1 detected'
get footerText() {
return `Watching ${this.components.length} components`
},

get openComponent() {
Expand All @@ -81,6 +85,7 @@ export default function devtools() {

init() {
this.initSplitPanes()

this.$watch('components', () => {
if (!this.showTools) {
fetchWithTimeout('https://registry.npmjs.com/alpinejs', { timeout: this.showTimeout })
Expand Down Expand Up @@ -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)
})
},
Expand Down
13 changes: 13 additions & 0 deletions packages/shell-chrome/views/_components/tab-link.edge
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<a
href="#"
title="{{ label || upperFirst(tab) }}"
HugoDF marked this conversation as resolved.
Show resolved Hide resolved
:class="{
'text-white border-ice-500 cursor-default': activeTab === '{{ tab }}',
'border-transparent hover:text-white hover:border-ice-700': activeTab !== '{{ tab }}',
}"
class="px-4 border-b-3 xs:pl-2 xs:pr-3"
@click="activeTab = '{{ tab }}'"
>
@!yield($slot.main)
<span class="hidden xs:inline-block">{{ label || upperFirst(tab) }}</span>
HugoDF marked this conversation as resolved.
Show resolved Hide resolved
</a>
4 changes: 2 additions & 2 deletions packages/shell-chrome/views/_partials/component.edge
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
@verbatim
<a
:class="{
'text-white bg-alpine-300' : component.isOpened,
'text-gray-600 hover:bg-blue-200' : !component.isOpened,
'text-white bg-alpine-300': component.isOpened,
'text-gray-600 hover:bg-blue-200': !component.isOpened,
}"
class="block cursor-pointer rounded"
:style="`padding-left: ${component.depth * 20}px; `"
Expand Down
109 changes: 109 additions & 0 deletions packages/shell-chrome/views/_partials/footer.edge
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
<div
:class="{
'hidden': !showTools,
}"
class="flex font-bold text-gray-400 border-t border-gray-300 bg-white"
>
<div class="flex-1">
<div class="flex items-center text-xs leading-9 font-medium font-mono">
<div class="flex-1 pl-3" x-text="footerText"></div>
HugoDF marked this conversation as resolved.
Show resolved Hide resolved

@verbatim
<div
:class="{
'hidden': !showTools,
'bg-gray-300 bg-opacity-50 text-gray-600': !showTools,
HugoDF marked this conversation as resolved.
Show resolved Hide resolved
}"
data-testid="version-line"
class="flex items-center transition transition-colors duration-700 ease-in-out"
:title="'Latest Version' + (isLatest? '' : `: ${latest}`)"
>
<svg
:class="{
'text-green-500': showTools && isLatest,
'text-orange-500': showTools && !isLatest,
}"
class="mr-1.5 h-2 w-2 transition transition-colors duration-700 ease-in-out"
fill="currentColor"
viewBox="0 0 8 8"
>
<circle cx="4" cy="4" r="3" />
</svg>
<a
:class="isLatest ? 'pointer-events-none' : ''"
class="inline-flex items-center xs:space-x-1"
:href="isLatest ? '#' : 'https://github.com/alpinejs/alpine/releases'"
>
<span class="hidden xs:block">Alpine.js</span>
<span x-text="detected"></span>
<span class="hidden xs:block">detected</span>
</a>
</div>
@endverbatim
</div>
</div>

<div
:class="{
'hidden sm:block': !showTools,
}"
class="flex items-center ml-3 px-2.5 space-x-1 border-l border-gray-300 transition transition-colors duration-700"
>
<a href="https://github.com/alpinejs/alpine" target="_blank" title="Alpine.js Docs" class="hover:opacity-75">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
class="w-5 h-5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
/>
</svg>
</a>
<a
href="https://github.com/alpine-collective/alpinejs-devtools"
target="_blank"
title="Alpine Collective GitHub"
class="hover:opacity-75"
>
<svg class="fill-current w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 24 24">
<path
d="M10 0a10 10 0 0 0-3.16 19.49c.5.1.68-.22.68-.48l-.01-1.7c-2.78.6-3.37-1.34-3.37-1.34-.46-1.16-1.11-1.47-1.11-1.47-.9-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.9 1.52 2.34 1.08 2.91.83.1-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.94 0-1.1.39-1.99 1.03-2.69a3.6 3.6 0 0 1 .1-2.64s.84-.27 2.75 1.02a9.58 9.58 0 0 1 5 0c1.91-1.3 2.75-1.02 2.75-1.02.55 1.37.2 2.4.1 2.64.64.7 1.03 1.6 1.03 2.69 0 3.84-2.34 4.68-4.57 4.93.36.31.68.92.68 1.85l-.01 2.75c0 .26.18.58.69.48A10 10 0 0 0 10 0"
></path>
</svg>
</a>
<button
data-testid="settings-panel-open-button"
class="hover:opacity-75 focus:outline-none"
x-show="settingsPanelEnabled"
@click="settingsPanelOpen = true"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
class="w-5 h-5"
>
<title>Settings</title>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
/>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
/>
</svg>
</button>
</div>
</div>
Loading