Skip to content

Commit febde10

Browse files
SharonStratsSharonStrats
authored
Merge pull request #211 from SolidOS/feat/header-clean
Feature Header
2 parents 3863847 + ef1a829 commit febde10

26 files changed

Lines changed: 709 additions & 368 deletions

‎declarations.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
/// <reference types="vite-plugin-lit-css/client" />
2+
/// <reference types="unplugin-icons/types/web-components" />

‎package-lock.json‎

Lines changed: 32 additions & 21 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "source-pane",
3-
"version": "3.1.1-4",
3+
"version": "3.1.1-5",
44
"description": "Solid-compatible Panes: Source editor",
55
"main": "dist/index.cjs.js",
66
"exports": {
@@ -55,6 +55,7 @@
5555
},
5656
"homepage": "https://github.com/SolidOS/source-pane",
5757
"devDependencies": {
58+
"@iconify-json/lucide": "^1.2.116",
5859
"@types/mime-types": "^3.0.1",
5960
"@types/node": "^22.20.0",
6061
"@vitest/coverage-v8": "^4.0.18",

‎src/Header.ts‎

Lines changed: 0 additions & 50 deletions
This file was deleted.

‎src/StatusSection.css‎

Lines changed: 37 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,46 @@
66

77
.sourcePaneStatus[data-visible='true'] {
88
display: block;
9+
margin: 0;
10+
padding: 12px;
11+
background: var(--dialog-error-background, var(--pink-500, #ffdde6));
12+
border-radius: 5px;
13+
border: 1px solid var(--dialog-error-border, var(--pink-700, #ff98b3));
14+
}
15+
16+
#statusMessageArea {
17+
display: flex;
18+
align-items: center;
19+
gap: 6px;
920
}
1021

1122
.error-text {
1223
margin: 0;
13-
padding: 12px;
14-
background-color: #fde8e8;
15-
border: 1px solid #f8b4b4;
16-
border-radius: 4px;
17-
color: #9b1c1c;
24+
padding: 10px 12px;
25+
background-color: transparent;
26+
border: 0;
27+
border-radius: 0;
28+
color: var(--solid-ui-color-error, #b00020);
1829
font-weight: 500;
30+
flex: 1;
31+
}
32+
33+
.statusCloseButton {
34+
flex: 0 0 auto;
35+
margin-top: 0;
36+
align-self: center;
37+
width: 28px;
38+
height: 28px;
39+
border: 0;
40+
border-radius: 5px;
41+
background: transparent;
42+
color: var(--solid-ui-color-error, #b00020);
43+
font-weight: 600;
44+
line-height: 1;
45+
padding: 0;
46+
cursor: pointer;
47+
}
48+
49+
.statusCloseButton:hover {
50+
background: color-mix(in srgb, var(--solid-ui-color-error, #b00020) 10%, transparent);
1951
}

‎src/StatusSection.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export function getStatusSection(){
3939
<section class="sourcePaneStatus" role="alert" data-visible="false">
4040
<div id="statusMessageArea" hidden>
4141
<p class="error-text">${statusMessage}</p>
42-
<button @click=${() => clearError()}>X</button>
42+
<button class="statusCloseButton" aria-label="Dismiss error" @click=${() => clearError()}>X</button>
4343
</div>
4444
</section>
4545
`

‎src/components/header/SourceHeader.styles.css‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
:host {
2+
header {
3+
display: flex;
4+
justify-content: space-between;
5+
align-items: center;
6+
gap: 6px;
7+
flex-wrap: nowrap;
8+
width: 100%;
9+
text-align: right;
10+
padding: 15px;
11+
}
12+
}

‎src/components/header/SourceHeader.ts‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { WebComponent } from 'solid-ui'
2+
import { customElement } from 'lit/decorators.js'
3+
import { html } from 'lit'
4+
import 'solid-ui/components/button'
5+
import { consume } from '@lit/context'
6+
import { sourceContext, SourceContext } from '../../primitives/context'
7+
import '~icons/lucide/share-2'
8+
import '~icons/lucide/pencil'
9+
import '~icons/lucide/ellipsis-vertical'
10+
import styles from './SourceHeader.styles.css'
11+
import './SourceHeaderSummary'
12+
import './SourceHeaderControls'
13+
14+
@customElement('source-pane-source-header')
15+
export default class SourceHeader extends WebComponent {
16+
static styles = styles
17+
18+
@consume({ context: sourceContext, subscribe: true })
19+
accessor sourceContext: SourceContext = undefined as unknown as SourceContext
20+
21+
render () {
22+
return html`
23+
<header>
24+
<source-pane-source-header-summary></source-pane-source-header-summary>
25+
<source-pane-source-header-controls></source-pane-source-header-controls>
26+
</header>
27+
`
28+
}
29+
}

‎src/components/header/SourceHeaderControls.styles.css‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
:host {
2+
div {
3+
display: flex;
4+
justify-content: flex-end;
5+
align-items: center;
6+
gap: 6px;
7+
flex: 0 0 auto;
8+
text-align: right;
9+
}
10+
11+
/* generative ai */
12+
div > * {
13+
flex: 0 1 auto;
14+
}
15+
16+
@media (max-width: 900px) {
17+
div {
18+
padding-right: 3px;
19+
}
20+
}
21+
22+
@media (max-width: 600px) {
23+
div {
24+
justify-content: flex-start;
25+
gap: 5px;
26+
}
27+
}
28+
}

‎src/components/header/SourceHeaderControls.ts‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import { WebComponent } from 'solid-ui'
2+
import { customElement } from 'lit/decorators.js'
3+
import { html } from 'lit'
4+
import 'solid-ui/components/button'
5+
import { consume } from '@lit/context'
6+
import { sourceContext, SourceContext } from '../../primitives/context'
7+
import '~icons/lucide/share-2'
8+
import '~icons/lucide/pencil'
9+
import '~icons/lucide/ellipsis-vertical'
10+
import styles from './SourceHeaderControls.styles.css'
11+
import './SourceHeaderSummary'
12+
13+
@customElement('source-pane-source-header-controls')
14+
export default class SourceHeaderControls extends WebComponent {
15+
static styles = styles
16+
17+
@consume({ context: sourceContext, subscribe: true })
18+
accessor sourceContext: SourceContext = undefined as unknown as SourceContext
19+
20+
/* private canEditSource (subject: NamedNode, sourcePaneState: SourcePaneState) {
21+
const { allowed } = sourcePaneState
22+
return !subject.uri.endsWith('/') && (!allowed || allowed.includes('PUT'))
23+
} */
24+
25+
private setEditable() {
26+
const sourcePaneState = this.sourceContext?.sourcePaneState
27+
const { canEdit } = this.sourceContext?.headerMetadata ?? { canEdit: false }
28+
const subject = this.sourceContext?.subject
29+
if (!sourcePaneState || !canEdit || sourcePaneState.broken || (subject && subject.endsWith('/'))) return
30+
31+
this.sourceContext?.setEditing?.()
32+
}
33+
34+
render () {
35+
return html`
36+
<div>
37+
<solid-ui-button class="sourcePanePrettyButton" variant="ghost" title="Share">
38+
<icon-lucide-share-2 slot="icon"></icon-lucide-share-2>
39+
</solid-ui-button>
40+
<solid-ui-button class="sourcePanePrettyButton" variant="ghost" @click=${() => this.setEditable()}>
41+
<icon-lucide-pencil slot="icon"></icon-lucide-pencil>
42+
</solid-ui-button>
43+
<solid-ui-button class="sourcePanePrettyButton" variant="ghost" title="More options">
44+
<icon-lucide-ellipsis-vertical slot="icon"></icon-lucide-ellipsis-vertical>
45+
</solid-ui-button>
46+
</div>
47+
`
48+
}
49+
}

0 commit comments

Comments
 (0)