Skip to content

feat: continued with web components #211

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

Open
SamTV12345 wants to merge 11 commits into
base: main
Choose a base branch
from
Open

feat: continued with web components #211

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
c79cba2
feat: continued with web components
SamTV12345 Apr 14, 2026
6a2e9ac
feat: added web component ref
SamTV12345 Apr 15, 2026
5cdd8f8
feat: fixed playwright tests
SamTV12345 Apr 15, 2026
f698756
feat: fixed playwright tests
SamTV12345 Apr 15, 2026
070d3a5
feat: fixed playwright tests
SamTV12345 Apr 15, 2026
ce23f51
feat: fixed playwright tests
SamTV12345 Apr 15, 2026
9df1e81
Merging
SamTV12345 Apr 22, 2026
7ccc586
Merging
SamTV12345 Apr 22, 2026
1c6ea92
Merging
SamTV12345 Apr 22, 2026
76f11d8
Merging
SamTV12345 Apr 22, 2026
ef0b5c2
Merging
SamTV12345 Apr 22, 2026
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
15 changes: 15 additions & 0 deletions assets/css/skin/colibris/src/components/popup.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,21 @@
.popup .dropdowns-container .nice-select {
min-width: 180px;
}
.popup .dropdowns-container .dropdown-select-trigger {
min-width: 180px;
padding: 6px 12px;
border: 1px solid var(--middle-color, #d2d2d2);
border-radius: 4px;
background: var(--bg-color, white);
color: var(--text-color, #485365);
font: inherit;
font-size: 14px;
text-align: left;
cursor: pointer;
}
.popup .dropdowns-container .dropdown-select-trigger:hover {
border-color: var(--dark-color, #576273);
}

#delete-pad {
background-color: #ff7b72;
Expand Down
57 changes: 28 additions & 29 deletions assets/pad/pad.templ
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,44 +96,45 @@ templ SettingsPopup(translations map[string]string, availablefonts []string, set
<h1 id="padSettingsTitle">{translations["pad.settings.padSettings"]}</h1>
<h2>{translations["pad.settings.myView"]}</h2>
<p class="hide-for-mobile">
<input type="checkbox" id="options-stickychat"/>
<label for="options-stickychat">{translations["pad.settings.stickychat"]}</label>
<ep-checkbox id="options-stickychat" label={translations["pad.settings.stickychat"]}></ep-checkbox>
</p>
<p class="hide-for-mobile">
<input type="checkbox" id="options-chatandusers" onClick="chat.chatAndUsers();"/>
<label for="options-chatandusers">{translations["pad.settings.chatandusers"]}</label>
<ep-checkbox id="options-chatandusers" label={translations["pad.settings.chatandusers"]}></ep-checkbox>
</p>
<p>
<input type="checkbox" id="options-colorscheck"/>
<label for="options-colorscheck">{translations["pad.settings.colorcheck"]}</label>
<ep-checkbox id="options-colorscheck" label={translations["pad.settings.colorcheck"]}></ep-checkbox>
</p>
<p>
<input type="checkbox" id="options-linenoscheck" checked/>
<label for="options-linenoscheck">{translations["pad.settings.linenocheck"]}</label>
<ep-checkbox id="options-linenoscheck" checked label={translations["pad.settings.linenocheck"]}></ep-checkbox>
</p>
<p>
<input type="checkbox" id="options-rtlcheck"/>
<label for="options-rtlcheck">{translations["pad.settings.rtlcheck"]}</label>
<ep-checkbox id="options-rtlcheck" label={translations["pad.settings.rtlcheck"]}></ep-checkbox>
</p>

<div class="dropdowns-container">
<p class="dropdown-line">
<label for="viewfontmenu">{translations["pad.settings.fontType"]}</label>
<select id="viewfontmenu">
<option value="">{translations["pad.settings.fontType.normal"]}</option>
for _, valueInLoop := range availablefonts {
<option value={valueInLoop}>{valueInLoop}</option>
}
</select>
<label>{translations["pad.settings.fontType"]}</label>
<ep-dropdown id="viewfontmenu" align="left" trigger="click">
<button slot="trigger" type="button" class="dropdown-select-trigger">{translations["pad.settings.fontType.normal"]}</button>
<div slot="content">
<ep-dropdown-item value="">{translations["pad.settings.fontType.normal"]}</ep-dropdown-item>
for _, valueInLoop := range availablefonts {
<ep-dropdown-item value={valueInLoop}>{valueInLoop}</ep-dropdown-item>
}
</div>
</ep-dropdown>
</p>

<p class="dropdown-line">
<label for="languagemenu">{translations["pad.settings.language"]}</label>
<select id="languagemenu">
for _, entry := range hooks.SortedAvailableLangs {
<option value={entry.Code}>{entry.Info.DisplayName}</option>
}
</select>
<label>{translations["pad.settings.language"]}</label>
<ep-dropdown id="languagemenu" align="left" trigger="click">
<button slot="trigger" type="button" class="dropdown-select-trigger">{translations["pad.settings.language"]}</button>
<div slot="content">
for _, entry := range hooks.SortedAvailableLangs {
<ep-dropdown-item value={entry.Code}>{entry.Info.DisplayName}</ep-dropdown-item>
}
</div>
</ep-dropdown>
</p>
</div>
<button id="delete-pad">{translations["pad.settings.deletePad"]}</button>
Expand All @@ -152,8 +153,7 @@ templ SettingsPopup(translations map[string]string, availablefonts []string, set
for _, group := range settingsGroups {
for _, item := range group.Items {
<p>
<input id={item.Id} type="checkbox" class="settings-plugin-item" data-key={item.Key}/>
<label for={item.Id}>{getTranslation(translations, item.Title)}</label>
<ep-checkbox id={item.Id} class="settings-plugin-item" data-key={item.Key} label={getTranslation(translations, item.Title)}></ep-checkbox>
</p>
}
}
Expand All @@ -168,8 +168,7 @@ templ EmbedPopup(translations map[string]string) {
<div id="embed" class="popup"><div class="popup-content">
<h1>{translations["pad.share"]}</h1>
<div id="embedreadonly" class="acl-write">
<input type="checkbox" id="readonlyinput"/>
<label for="readonlyinput">{translations["pad.share.readonly"]}</label>
<ep-checkbox id="readonlyinput" label={translations["pad.share.readonly"]}></ep-checkbox>
</div>
<div id="linkcode">
<h2>{translations["pad.share.link"]}</h2>
Expand All @@ -188,8 +187,7 @@ templ QrPopup(translations map[string]string) {
<div id="qrcodeheader">
<h1>{translations["pad.share"]}</h1>
<div id="qrreadonly" class="acl-write">
<input type="checkbox" id="qrreadonlyinput"/>
<label for="qrreadonlyinput">{translations["pad.share.readonly"]}</label>
<ep-checkbox id="qrreadonlyinput" label={translations["pad.share.readonly"]}></ep-checkbox>
</div>
</div>
<img id="qrcodeimg" alt="QR code for sharing this pad"/>
Expand Down Expand Up @@ -399,6 +397,7 @@ availableFonts []string, buttonGroups []pluginTypes.ToolbarButtonGroup, settings
<title>{settings.Title}</title>
<script type="module" src={jsScript}></script>
<link href="/css/static/pad.css" rel="stylesheet"/>
<link href="/css/static/iframe_editor.css" rel="stylesheet"/>
<link href={"/css/skin/"+ settings.SkinName + "/pad.css"} rel="stylesheet"/>
<style title="dynamicsyntax"></style>
<link rel="localizations" type="application/l10n+json" href="/locales.json"/>
Expand Down
Loading
Loading