LemmyNet
/
lemmy-ui
mirror of https://github.com/LemmyNet/lemmy-ui.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge branch 'main' into generate-theme-css

This commit is contained in:
SleeplessOne1917 2023-06-17 02:22:10 +00:00 committed by GitHub
parent 5033d03ed2 62e105f826
commit 28023bb3a6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 171 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
lemmy-translations

@ -1 +1 @@
Subproject commit f45ddff206adb52ab0ac7555bf14978edac5d2f2
Subproject commit c9a07885f35cf334d3cf167cb57587a8177fc3fb

27
src/assets/css/main.css
View File

@ -46,7 +46,7 @@
}
.md-div p:last-child {
margin-bottom: 0px;
margin-bottom: 0;
}
.md-div img {
@ -371,7 +371,7 @@ br.big {
}
.tribute-container li {
padding: 5px 5px;
padding: 5px;
cursor: pointer;
}
@ -410,13 +410,22 @@ br.big {
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.lang-select-action {
width: 100px;
}
.lang-select-action:focus {
width: auto;
}
em-emoji-picker {
.emoji-picker {
width: 100%;
}
.skip-link {
top: -40px;
transition: top 0.3s ease;
}
@media (prefers-reduced-motion: reduce) {
.skip-link {
transition: none;
}
}
.skip-link:focus {
top: 0;
}

1
src/assets/css/themes/darkly.css
View File

@ -26,6 +26,7 @@
--warning: #f39c12;
--danger: #e74c3c;
--light: #303030;
--medium-light: var(--secondary);
--dark: #dee2e6;
--breakpoint-xs: 0;
--breakpoint-sm: 576px;

1
src/assets/css/themes/litely.css
View File

@ -26,6 +26,7 @@
--warning: #ffc107;
--danger: #873208;
--light: #f8f9fa;
--medium-light: var(--bs-gray-300);
--dark: #343a40;
--breakpoint-xs: 0;
--breakpoint-sm: 576px;

31
src/shared/components/app/app.tsx
View File

@ -1,4 +1,4 @@
import { Component } from "inferno";
import { Component, createRef, linkEvent, RefObject } from "inferno";
import { Provider } from "inferno-i18next-dess";
import { Route, Switch } from "inferno-router";
import { i18n } from "../../i18next";
@ -15,8 +15,15 @@ import { Theme } from "./theme";
export class App extends Component<any, any> {
private isoData: IsoDataOptionalSite = setIsoData(this.context);
private readonly mainContentRef: RefObject<HTMLElement>;
constructor(props: any, context: any) {
super(props, context);
this.mainContentRef = createRef();
}
handleJumpToContent(event) {
event.preventDefault();
this.mainContentRef.current?.focus();
}
render() {
const siteRes = this.isoData.site_res;
@ -26,6 +33,12 @@ export class App extends Component<any, any> {
<>
<Provider i18next={i18n}>
<div id="app" className="lemmy-site">
<a
className="skip-link bg-light text-dark p-2 text-decoration-none position-absolute start-0 z-3"
onClick={linkEvent(this, this.handleJumpToContent)}
>
${i18n.t("jump_to_content", "Jump to content")}
</a>
{siteView && (
<Theme defaultTheme={siteView.local_site.default_theme} />
)}
@ -39,14 +52,16 @@ export class App extends Component<any, any> {
exact
component={routeProps => (
<ErrorGuard>
{RouteComponent &&
(isAuthPath(path ?? "") ? (
<AuthGuard>
<main tabIndex={-1} ref={this.mainContentRef}>
{RouteComponent &&
(isAuthPath(path ?? "") ? (
<AuthGuard>
<RouteComponent {...routeProps} />
</AuthGuard>
) : (
<RouteComponent {...routeProps} />
</AuthGuard>
) : (
<RouteComponent {...routeProps} />
))}
))}
</main>
</ErrorGuard>
)}
/>

9
src/shared/components/common/language-select.tsx
View File

@ -100,12 +100,9 @@ export class LanguageSelect extends Component<LanguageSelectProps, any> {
return (
<select
className={classNames(
"lang-select-action",
this.props.iconVersion
? "btn btn-sm text-muted"
: "form-control custom-select"
)}
className={classNames("lang-select-action", {
"form-control custom-select": !this.props.iconVersion,
})}
id={this.id}
onChange={linkEvent(this, this.handleLanguageChange)}
aria-label={i18n.t("language_select_placeholder")}

213
src/shared/components/common/markdown-textarea.tsx
View File

@ -1,4 +1,5 @@
import autosize from "autosize";
import classNames from "classnames";
import { NoOptionI18nKeys } from "i18next";
import { Component, linkEvent } from "inferno";
import { Language } from "lemmy-js-client";
@ -144,101 +145,123 @@ export class MarkdownTextArea extends Component<
}
/>
<div className="form-group row">
<div className={`col-sm-12`}>
<textarea
id={this.id}
className={`form-control ${this.state.previewMode && "d-none"}`}
value={this.state.content}
onInput={linkEvent(this, this.handleContentChange)}
onPaste={linkEvent(this, this.handleImageUploadPaste)}
onKeyDown={linkEvent(this, this.handleKeyBinds)}
required
disabled={this.isDisabled}
rows={2}
maxLength={this.props.maxLength ?? markdownFieldCharacterLimit}
placeholder={this.props.placeholder}
/>
{this.state.previewMode && this.state.content && (
<div
className="card border-secondary card-body md-div"
dangerouslySetInnerHTML={mdToHtml(this.state.content)}
/>
)}
{this.state.imageUploadStatus &&
this.state.imageUploadStatus.total > 1 && (
<ProgressBar
className="mt-2"
striped
animated
value={this.state.imageUploadStatus.uploaded}
max={this.state.imageUploadStatus.total}
text={i18n.t("pictures_uploded_progess", {
uploaded: this.state.imageUploadStatus.uploaded,
total: this.state.imageUploadStatus.total,
})}
/>
)}
</div>
<label className="sr-only" htmlFor={this.id}>
{i18n.t("body")}
</label>
</div>
<div className="row">
<div className="col-sm-12 d-flex flex-wrap">
{this.getFormatButton("bold", this.handleInsertBold)}
{this.getFormatButton("italic", this.handleInsertItalic)}
{this.getFormatButton("link", this.handleInsertLink)}
<EmojiPicker
onEmojiClick={e => this.handleEmoji(this, e)}
disabled={this.isDisabled}
></EmojiPicker>
<form className="btn btn-sm text-muted font-weight-bold">
<label
htmlFor={`file-upload-${this.id}`}
className={`mb-0 ${
UserService.Instance.myUserInfo && "pointer"
}`}
data-tippy-content={i18n.t("upload_image")}
>
{this.state.imageUploadStatus ? (
<Spinner />
) : (
<Icon icon="image" classes="icon-inline" />
)}
</label>
<input
id={`file-upload-${this.id}`}
type="file"
accept="image/*,video/*"
name="file"
className="d-none"
multiple
disabled={!UserService.Instance.myUserInfo || this.isDisabled}
onChange={linkEvent(this, this.handleImageUpload)}
/>
</form>
{this.getFormatButton("header", this.handleInsertHeader)}
{this.getFormatButton(
"strikethrough",
this.handleInsertStrikethrough
)}
{this.getFormatButton("quote", this.handleInsertQuote)}
{this.getFormatButton("list", this.handleInsertList)}
{this.getFormatButton("code", this.handleInsertCode)}
{this.getFormatButton("subscript", this.handleInsertSubscript)}
{this.getFormatButton("superscript", this.handleInsertSuperscript)}
{this.getFormatButton("spoiler", this.handleInsertSpoiler)}
<a
href={markdownHelpUrl}
className="btn btn-sm text-muted font-weight-bold"
title={i18n.t("formatting_help")}
rel={relTags}
<div className="col-12">
<div
className="rounded bg-light overflow-hidden"
style={{
border: "1px solid var(--medium-light)",
}}
>
<Icon icon="help-circle" classes="icon-inline" />
</a>
<div
className="d-flex flex-wrap"
style={{
"border-bottom": "1px solid var(--medium-light)",
}}
>
{this.getFormatButton("bold", this.handleInsertBold)}
{this.getFormatButton("italic", this.handleInsertItalic)}
{this.getFormatButton("link", this.handleInsertLink)}
<EmojiPicker
onEmojiClick={e => this.handleEmoji(this, e)}
disabled={this.isDisabled}
></EmojiPicker>
<form className="btn btn-sm text-muted font-weight-bold">
<label
htmlFor={`file-upload-${this.id}`}
className={`mb-0 ${
UserService.Instance.myUserInfo && "pointer"
}`}
data-tippy-content={i18n.t("upload_image")}
>
{this.state.imageUploadStatus ? (
<Spinner />
) : (
<Icon icon="image" classes="icon-inline" />
)}
</label>
<input
id={`file-upload-${this.id}`}
type="file"
accept="image/*,video/*"
name="file"
className="d-none"
multiple
disabled={
!UserService.Instance.myUserInfo || this.isDisabled
}
onChange={linkEvent(this, this.handleImageUpload)}
/>
</form>
{this.getFormatButton("header", this.handleInsertHeader)}
{this.getFormatButton(
"strikethrough",
this.handleInsertStrikethrough
)}
{this.getFormatButton("quote", this.handleInsertQuote)}
{this.getFormatButton("list", this.handleInsertList)}
{this.getFormatButton("code", this.handleInsertCode)}
{this.getFormatButton("subscript", this.handleInsertSubscript)}
{this.getFormatButton(
"superscript",
this.handleInsertSuperscript
)}
{this.getFormatButton("spoiler", this.handleInsertSpoiler)}
<a
href={markdownHelpUrl}
className="btn btn-sm text-muted font-weight-bold"
title={i18n.t("formatting_help")}
rel={relTags}
>
<Icon icon="help-circle" classes="icon-inline" />
</a>
</div>
<div>
<textarea
id={this.id}
className={classNames("form-control border-0 rounded-0", {
"d-none": this.state.previewMode,
})}
value={this.state.content}
onInput={linkEvent(this, this.handleContentChange)}
onPaste={linkEvent(this, this.handleImageUploadPaste)}
onKeyDown={linkEvent(this, this.handleKeyBinds)}
required
disabled={this.isDisabled}
rows={2}
maxLength={
this.props.maxLength ?? markdownFieldCharacterLimit
}
placeholder={this.props.placeholder}
/>
{this.state.previewMode && this.state.content && (
<div
className="card border-secondary card-body md-div"
dangerouslySetInnerHTML={mdToHtml(this.state.content)}
/>
)}
{this.state.imageUploadStatus &&
this.state.imageUploadStatus.total > 1 && (
<ProgressBar
className="mt-2"
striped
animated
value={this.state.imageUploadStatus.uploaded}
max={this.state.imageUploadStatus.total}
text={i18n.t("pictures_uploded_progess", {
uploaded: this.state.imageUploadStatus.uploaded,
total: this.state.imageUploadStatus.total,
})}
/>
)}
</div>
<label className="sr-only" htmlFor={this.id}>
{i18n.t("body")}
</label>
</div>
</div>
<div className="col-sm-12 d-flex align-items-center flex-wrap">
<div className="col-12 d-flex align-items-center flex-wrap mt-2">
{this.props.showLanguage && (
<LanguageSelect
iconVersion
@ -258,7 +281,7 @@ export class MarkdownTextArea extends Component<
{this.props.buttonTitle && (
<button
type="submit"
className="btn btn-sm btn-secondary mr-2"
className="btn btn-sm btn-secondary ml-2"
disabled={this.isDisabled}
>
{this.state.loading ? (
@ -271,7 +294,7 @@ export class MarkdownTextArea extends Component<
{this.props.replyType && (
<button
type="button"
className="btn btn-sm btn-secondary mr-2"
className="btn btn-sm btn-secondary ml-2"
onClick={linkEvent(this, this.handleReplyCancel)}
>
{i18n.t("cancel")}
@ -279,7 +302,7 @@ export class MarkdownTextArea extends Component<
)}
{this.state.content && (
<button
className={`btn btn-sm btn-secondary mr-2 ${
className={`btn btn-sm btn-secondary ml-2 ${
this.state.previewMode && "active"
}`}
onClick={linkEvent(this, this.handlePreviewToggle)}

7
src/shared/utils.ts
View File

@ -327,7 +327,12 @@ export function isVideo(url: string) {
}
export function validURL(str: string) {
return !!new URL(str);
try {
new URL(str);
return true;
} catch {
return false;
}
}
export function validInstanceTLD(str: string) {