Skip to content

Commit 1657a80

Browse files
SharonStratsSharonStrats
committed
defaultpane mobile plus typescript
1 parent 622505a commit 1657a80

3 files changed

Lines changed: 149 additions & 13 deletions

File tree

‎src/defaultPane.css‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
.defaultPane .bottom-border {
2+
border: 0.2rem solid transparent;
3+
width: 100%;
4+
}
5+
6+
.defaultPane .bottom-border-active {
7+
cursor: copy;
8+
border: 0.2rem solid;
9+
border-color: var(--color-bottom-border-highlight, rgb(100%, 65%, 0%));
10+
}
11+
12+
.defaultPane {
13+
--default-pane-predicate-column: 16rem;
14+
--default-pane-object-indent: 1.75rem;
15+
}
16+
17+
.defaultPane > tr {
18+
display: grid;
19+
grid-template-columns: minmax(0, var(--default-pane-predicate-column)) minmax(0, 1fr);
20+
align-items: flex-start;
21+
}
22+
23+
.defaultPane > tr > td.pred {
24+
grid-column: 1;
25+
display: flex;
26+
align-items: flex-start;
27+
padding-left: 0 !important;
28+
box-sizing: border-box;
29+
min-width: 0;
30+
}
31+
32+
.defaultPane > tr > td.pred > .labelTD {
33+
flex: 1 1 auto;
34+
min-width: 0;
35+
margin: 0;
36+
padding-top: 0;
37+
padding-bottom: 0;
38+
}
39+
40+
.defaultPane > tr > td.pred > .iconTD {
41+
flex: 0 0 auto;
42+
width: auto;
43+
margin: 0;
44+
}
45+
46+
.defaultPane > tr > td.obj {
47+
grid-column: 2;
48+
min-width: 0;
49+
box-sizing: border-box;
50+
align-self: start;
51+
}
52+
53+
.defaultPane > tr > td[colspan='2'] {
54+
grid-column: 1 / -1;
55+
}
56+
57+
.defaultPane[data-layout='mobile'] > tr {
58+
grid-template-columns: minmax(0, 1fr);
59+
}
60+
61+
.defaultPane[data-layout='mobile'] > tr > td.pred,
62+
.defaultPane[data-layout='mobile'] > tr > td.obj {
63+
display: block;
64+
grid-column: 1;
65+
width: 100%;
66+
box-sizing: border-box;
67+
}
68+
69+
.defaultPane[data-layout='mobile'] > tr > td.pred {
70+
padding-bottom: var(--spacing-small, 0.1rem);
71+
}
72+
73+
.defaultPane[data-layout='mobile'] > tr > td.obj {
74+
padding-left: var(--default-pane-object-indent) !important;
75+
}
76+
77+
@media (max-width: 700px) {
78+
.defaultPane > tr {
79+
grid-template-columns: minmax(0, 1fr);
80+
}
81+
82+
.defaultPane > tr > td.pred,
83+
.defaultPane > tr > td.obj {
84+
display: block;
85+
grid-column: 1;
86+
width: 100%;
87+
box-sizing: border-box;
88+
}
89+
90+
.defaultPane > tr > td.pred {
91+
padding-bottom: var(--spacing-small, 0.1rem);
92+
}
93+
94+
.defaultPane > tr > td.obj {
95+
padding-left: var(--default-pane-object-indent) !important;
96+
}
97+
}

src/defaultPane.js renamed to src/defaultPane.ts

Lines changed: 50 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -7,24 +7,58 @@
77

88
import * as UI from 'solid-ui'
99
import * as $rdf from 'rdflib'
10+
import type { DataBrowserContext, RenderEnvironment } from 'pane-registry'
11+
import type { BlankNode, Literal, NamedNode, Statement } from 'rdflib'
12+
import './defaultPane.css'
1013

1114
const ns = UI.ns
15+
/* Types were generated by Generative AI (GPT-5.4 in GitHub Copilot) based on the following prompt:
16+
Generate TypeScript types for the default pane. */
17+
type DefaultPaneSubject = NamedNode | BlankNode | Literal
1218

13-
export const defaultPane = {
19+
type DefaultPaneDefinition = {
20+
icon: string
21+
name: string
22+
audience: NamedNode[]
23+
label: (subject: DefaultPaneSubject) => string
24+
render: (subject: DefaultPaneSubject, context: DataBrowserContext) => HTMLDivElement
25+
}
26+
27+
type DefaultPaneOutliner = {
28+
appendPropertyTRs: (
29+
parent: HTMLElement,
30+
statements: Statement[],
31+
inverse: boolean,
32+
filter: (pred: NamedNode, inverse: boolean) => boolean
33+
) => void
34+
UserInput: {
35+
addNewPredicateObject: (event: Event) => void
36+
}
37+
}
38+
39+
export const defaultPane: DefaultPaneDefinition = {
1440
icon: UI.icons.originalIconBase + 'about.png',
1541

1642
name: 'default',
1743

1844
audience: [ns.solid('Developer')],
1945

20-
label: function (_subject) {
46+
label: function (_subject: DefaultPaneSubject): string {
2147
return 'about '
2248
},
2349

24-
render: function (subject, context) {
50+
render: function (
51+
subject: DefaultPaneSubject,
52+
context: DataBrowserContext
53+
): HTMLDivElement {
2554
const dom = context.dom
2655

27-
const filter = function (pred, inverse) {
56+
function applyEnvironmentAttributes (element: HTMLDivElement): void {
57+
const environment = (context.environment ?? {}) as Partial<RenderEnvironment>
58+
element.dataset.layout = environment.layout ?? 'desktop'
59+
}
60+
61+
const filter = function (pred: NamedNode, inverse: boolean): boolean {
2862
if (
2963
typeof context.session.paneRegistry.byName('internal').predicates[
3064
pred.uri
@@ -41,19 +75,23 @@ export const defaultPane = {
4175
return true
4276
}
4377

44-
const outliner = context.getOutliner(dom)
78+
const outliner = context.getOutliner(dom) as DefaultPaneOutliner
4579
const kb = context.session.store
4680
// var outline = outliner; // @@
4781
UI.log.info('@defaultPane.render, dom is now ' + dom.location)
48-
subject = kb.canon(subject)
82+
subject = kb.canon(subject) as DefaultPaneSubject
4983
const div = dom.createElement('div')
5084
div.setAttribute('class', 'defaultPane')
85+
applyEnvironmentAttributes(div)
5186
// appendRemoveIcon(div, subject, div)
5287

53-
let plist = kb.statementsMatching(subject)
88+
let plist = subject.termType === 'Literal' ? [] : kb.statementsMatching(subject)
5489
outliner.appendPropertyTRs(div, plist, false, filter)
5590
plist = kb.statementsMatching(undefined, undefined, subject)
5691
outliner.appendPropertyTRs(div, plist, true, filter)
92+
const subjectStatement = subject.termType === 'BlankNode'
93+
? kb.anyStatementMatching(subject)
94+
: undefined
5795
if (
5896
subject.termType === 'Literal' &&
5997
subject.value.slice(0, 7) === 'http://'
@@ -69,10 +107,11 @@ export const defaultPane = {
69107
(subject.termType === 'NamedNode' &&
70108
kb.updater.editable($rdf.Util.uri.docpart(subject.uri), kb)) ||
71109
(subject.termType === 'BlankNode' &&
72-
kb.anyStatementMatching(subject) &&
73-
kb.anyStatementMatching(subject).why &&
74-
kb.anyStatementMatching(subject).why.uri &&
75-
kb.updater.editable(kb.anyStatementMatching(subject).why.uri))
110+
subjectStatement &&
111+
subjectStatement.why &&
112+
'uri' in subjectStatement.why &&
113+
typeof subjectStatement.why.uri === 'string' &&
114+
kb.updater.editable(subjectStatement.why.uri))
76115
// check the document containing something about of the bnode @@ what about as object?
77116
/* ! && HCIoptions["bottom insert highlights"].enabled */
78117
) {

‎src/registerPanes.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,15 +25,15 @@ import folderPane from 'folder-pane'
2525
import { classInstancePane } from './classInstancePane.js'
2626
import { slideshowPane } from './slideshow/slideshowPane.js'
2727
import { socialPane } from './social/socialPane'
28-
import humanReadablePane from './humanReadablePane.js'
28+
import humanReadablePane from './humanReadablePane'
2929

3030
import { dataContentPane } from './dataContentPane'
3131
import sourcePane from 'source-pane'
3232
import { n3Pane } from './n3Pane'
3333
import { RDFXMLPane } from './RDFXMLPane'
3434
import { formPane } from './form/pane.js'
3535
import { tableViewPane } from './tableViewPane.js'
36-
import { defaultPane } from './defaultPane.js'
36+
import { defaultPane } from './defaultPane'
3737
import uiPane from './ui/pane.js'
3838

3939
import sharingPane from './sharing/sharingPane'

0 commit comments

Comments
 (0)