Skip to content

Commit

Permalink
wip: handle multiple open files
Browse files Browse the repository at this point in the history
  • Loading branch information
@ca-d
ca-d committed May 3, 2024
1 parent db1b6c8 commit e03eeeb
Show file tree
Hide file tree
Showing 4 changed files with 398 additions and 4 deletions.
20 changes: 20 additions & 0 deletions localization/de.xlf
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,26 @@
<source>Your editing history will be displayed here.</source>
<target>Hier wird Ihre Bearbeitungshistorie angezeigt.</target>
</trans-unit>
<trans-unit id="s690714fde574c188">
<source>Filename</source>
<target>Dateiname</target>
</trans-unit>
<trans-unit id="s1b528387ae29637a">
<source>Extension</source>
<target>Dateiendung</target>
</trans-unit>
<trans-unit id="s737e3dbdf9c08cdf">
<source>Close file</source>
<target>Datei schließen</target>
</trans-unit>
<trans-unit id="s2ceb11be2290bb1b">
<source>Cancel</source>
<target>Abbrechen</target>
</trans-unit>
<trans-unit id="s60320a18282b2b33">
<source>Rename</source>
<target>Umbenennen</target>
</trans-unit>
<trans-unit id="s5e8250fb85d64c23">
<source>Close</source>
<target>Schließen</target>
Expand Down
166 changes: 162 additions & 4 deletions open-scd.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,18 @@ import '@material/mwc-drawer';
import '@material/mwc-icon';
import '@material/mwc-icon-button';
import '@material/mwc-list';
import '@material/mwc-menu';
import '@material/mwc-select';
import '@material/mwc-tab-bar';
import '@material/mwc-textfield';
import '@material/mwc-top-app-bar-fixed';
import type { ActionDetail } from '@material/mwc-list';
import type { ActionDetail, SingleSelectedEvent } from '@material/mwc-list';
import type { Dialog } from '@material/mwc-dialog';
import type { Drawer } from '@material/mwc-drawer';
import type { IconButton } from '@material/mwc-icon-button';
import type { Menu } from '@material/mwc-menu';
import type { Select } from '@material/mwc-select';
import type { TextField } from '@material/mwc-textfield';

import { allLocales, sourceLocale, targetLocales } from './locales.js';

Expand Down Expand Up @@ -142,6 +149,27 @@ export class OpenSCD extends LitElement {
/** The name of the [[`doc`]] currently being edited */
@property({ type: String, reflect: true }) docName = '';

/** The file endings of editable files */
@property({ type: Array, reflect: true }) editable = [
'cid',
'icd',
'iid',
'scd',
'sed',
'ssd',
];

isEditable(docName: string): boolean {
return !!this.editable.find(ext =>
docName.toLowerCase().endsWith(`.${ext}`)
);
}

@state()
get editableDocs(): string[] {
return Object.keys(this.docs).filter(name => this.isEditable(name));
}

#loadedPlugins = new Map<string, Plugin>();

@state()
Expand Down Expand Up @@ -173,8 +201,8 @@ export class OpenSCD extends LitElement {
}

handleOpenDoc({ detail: { docName, doc } }: OpenEvent) {
this.docName = docName;
this.docs[this.docName] = doc;
this.docs[docName] = doc;
if (this.isEditable(docName)) this.docName = docName;
}

handleEditEvent(event: EditEvent) {
Expand Down Expand Up @@ -203,9 +231,24 @@ export class OpenSCD extends LitElement {
@query('#log')
logUI!: Dialog;

@query('#editFile')
editFileUI!: Dialog;

@query('#menu')
menuUI!: Drawer;

@query('#fileName')
fileNameUI!: TextField;

@query('#fileExtension')
fileExtensionUI!: Select;

@query('#fileMenu')
fileMenuUI!: Menu;

@query('#fileMenuButton')
fileMenuButtonUI!: IconButton;

@property({ type: String, reflect: true })
get locale() {
return getLocale() as LocaleTag;
Expand Down Expand Up @@ -379,7 +422,41 @@ export class OpenSCD extends LitElement {
</mwc-list>
<mwc-top-app-bar-fixed slot="appContent">
${renderActionItem(this.controls.menu, 'navigationIcon')}
<div slot="title" id="title">${this.docName}</div>
<div
slot="title"
id="title"
style="position: relative; --mdc-icon-button-size: 32px"
>
${this.editableDocs.length > 1
? html`<mwc-icon-button
icon="arrow_drop_down"
id="fileMenuButton"
@click=${() => this.fileMenuUI.show()}
></mwc-icon-button
><mwc-menu
fixed
x="28"
y="28"
id="fileMenu"
@selected=${({
detail: { index },
}: SingleSelectedEvent) => {
this.docName = this.editableDocs[index];
}}
>
${this.editableDocs.map(
name => html`<mwc-list-item>${name}</mwc-list-item>`
)}
</mwc-menu>`
: nothing}
${this.docName}
${this.docName
? html`<mwc-icon-button
icon="edit"
@click=${() => this.editFileUI.show()}
></mwc-icon-button>`
: nothing}
</div>
${this.#actions.map(op => renderActionItem(op))}
<mwc-tab-bar
activeIndex=${this.editors.filter(p => !p.isDisabled()).length
Expand Down Expand Up @@ -411,6 +488,62 @@ export class OpenSCD extends LitElement {
: nothing}
</mwc-top-app-bar-fixed>
</mwc-drawer>
<mwc-dialog
id="editFile"
heading="${this.docName}"
@closed=${({ detail: { action } }: { detail: { action: string } }) => {
if (action === 'rename') {
const newDocName = `${this.fileNameUI.value}.${this.fileExtensionUI.value}`;
if (this.docs[newDocName]) return;
this.docs[newDocName] = this.doc;
delete this.docs[this.docName];
this.docName = newDocName;
} else if (action === 'remove') {
delete this.docs[this.docName];
this.docName = this.editableDocs[0] || '';
}
}}
>
<mwc-textfield
id="fileName"
label="${msg('Filename')}"
value="${this.docName.replace(/\.[^.]+$/, '')}"
dialogInitialFocus
></mwc-textfield>
<mwc-select
label="${msg('Extension')}"
fixedMenuPosition
id="fileExtension"
>
${this.editable.map(
ext =>
html`<mwc-list-item
?selected=${this.docName.endsWith(`.${ext}`)}
value="${ext}"
>${ext}</mwc-list-item
>`
)}
</mwc-select>
<mwc-button
slot="secondaryAction"
icon="delete"
style="--mdc-theme-primary: var(--oscd-error)"
dialogAction="remove"
>
${msg('Close file')}
</mwc-button>
<mwc-button slot="secondaryAction" dialogAction="close">
${msg('Cancel')}
</mwc-button>
<mwc-button
slot="primaryAction"
icon="edit"
dialogAction="rename"
trailingIcon
>
${msg('Rename')}
</mwc-button>
</mwc-dialog>
<mwc-dialog id="log" heading="${this.controls.log.getName()}">
<mwc-list wrapFocus>${this.renderHistory()}</mwc-list>
<mwc-button
Expand Down Expand Up @@ -453,6 +586,18 @@ export class OpenSCD extends LitElement {
}

static styles = css`
.fileext {
opacity: 0.81;
}
.filename {
caret-color: var(--oscd-secondary);
}
.filename:focus {
outline: none;
}
aside {
position: absolute;
top: 0;
Expand Down Expand Up @@ -529,6 +674,19 @@ export class OpenSCD extends LitElement {
--mdc-dialog-heading-ink-color: var(--oscd-base00);
--mdc-text-field-fill-color: var(--oscd-base2);
--mdc-text-field-ink-color: var(--oscd-base02);
--mdc-text-field-label-ink-color: var(--oscd-base01);
--mdc-text-field-idle-line-color: var(--oscd-base00);
--mdc-text-field-hover-line-color: var(--oscd-base02);
--mdc-select-fill-color: var(--oscd-base2);
--mdc-select-ink-color: var(--oscd-base02);
--mdc-select-label-ink-color: var(--oscd-base01);
--mdc-select-idle-line-color: var(--oscd-base00);
--mdc-select-hover-line-color: var(--oscd-base02);
--mdc-select-dropdown-icon-color: var(--oscd-base01);
--mdc-typography-font-family: var(--oscd-text-font);
--mdc-icon-font: var(--oscd-icon-font);
}
Expand Down
Loading

0 comments on commit e03eeeb

Please sign in to comment.