Skip to content

fix message layout #819

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

Merged
jmattheis merged 4 commits into from
Aug 6, 2025
Merged

fix message layout #819

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
73d42c5
allow building on non docker environment
eternal-flame-AD Aug 4, 2025
d929e66
fix message layout
eternal-flame-AD Aug 4, 2025
8741d1e
suggestions
eternal-flame-AD Aug 5, 2025
3d8bee8
Change vite listen port name to GOTIFY_SERVER_PORT
eternal-flame-AD Aug 6, 2025
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
2 changes: 1 addition & 1 deletion Makefile
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ ifdef GOTOOLCHAIN
else

@jmattheis jmattheis Aug 5, 2025

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we should display the app images even on small screens (I can already smell the issues that the app icons aren't visible :D)

Maybe it could be formatted like this?

image

Maybe this could even be the default formatting on all sizes.

@jmattheis jmattheis Aug 5, 2025

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could we do this change in a separate PR independent of upgrade-ui?

@eternal-flame-AD eternal-flame-AD Aug 5, 2025 •
edited
Loading

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I suppose, it is complicated and I think discussion potentially change is needed.

I personally don't use this icon feature very often: reason simply being it kind of becomes an ad-hoc graphics design problem where the icon needs to be readable on any screen and the file has to be appropriately compressed so it loads fast. More often than not I find just text description being better.

For example I name my servers after mountain names: nokogiri, gorgonio, ontake, etc. It is simply much more recognizable to write the name in text than find an appropriate image for these mountains that displays well under any size.

I think that is also why most "uptime monitoring" apps don't have app icon feature, users have difficulty sourcing images that display well in a list or card grid like fashion and it's more clean and neat without it.

But I feel the text app name absolutely should be there for both accessibility and user choice reasons.

@jmattheis jmattheis Aug 5, 2025

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I personally agree with the usefulness of the icons, but I think there are a significant amount of users that would. Maybe we could hide the image if it's the default one, and only display it when the user has uploaded a custom one.

But I feel the text app name absolutely should be there for both accessibility and user choice reasons.

Agreed, but we should probably omit it, if the title is equal to the app name.

GO_VERSION=$(shell go mod edit -json | jq -r .Toolchain | sed -e 's/go//')
endif
DOCKER_BUILD_IMAGE=gotify/build
DOCKER_BUILD_IMAGE=docker.io/gotify/build
DOCKER_WORKDIR=/proj
DOCKER_RUN=docker run --rm -e LD_FLAGS="$$LD_FLAGS" -v "$$PWD/.:${DOCKER_WORKDIR}" -v "`go env GOPATH`/pkg/mod/.:/go/pkg/mod:ro" -w ${DOCKER_WORKDIR}
DOCKER_GO_BUILD=go build -mod=readonly -a -installsuffix cgo -ldflags "$$LD_FLAGS"
Expand Down
17 changes: 14 additions & 3 deletions ui/src/message/Message.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import {Button, Theme} from '@mui/material';
import {Button, Theme, useMediaQuery, useTheme} from '@mui/material';
import IconButton from '@mui/material/IconButton';
import {makeStyles} from 'tss-react/mui';
import Typography from '@mui/material/Typography';
Expand All @@ -11,6 +11,7 @@ import {Markdown} from '../common/Markdown';
import * as config from '../config';

@jmattheis jmattheis Aug 5, 2025

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The changes currently break <code> blocks that are wider than the message box. And also markdown formatted messages

image 
{
  "title": "Title",
  "message": "hello\n```\nmycodeaoeouanetohunaotheuntaoheuntoaheunt                                                                 oheuntoheunthoeaunthaoeunth\n```\n",
  "priority": 5,
  "extras": { "client::display": { "contentType": "text/markdown" } }
}

@eternal-flame-AD eternal-flame-AD Aug 5, 2025

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Huhh, I did test with markdown formatted images. Let me double check ..

Should we just have a sample database/script that posts a list of various messages so it is easy to check nothing breaks?

@jmattheis jmattheis Aug 5, 2025

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, we definitely should have this.

import {IMessageExtras} from '../types';
import {contentType, RenderMode} from './extras';
import {makeIntlFormatter} from 'react-timeago/defaultFormatter';

const PREVIEW_LENGTH = 500;

Expand All @@ -32,6 +33,7 @@ const useStyles = makeStyles()((theme: Theme) => ({
},
messageContentWrapper: {
minWidth: 200,
width: '100%',
},
image: {
marginRight: 15,
Expand Down Expand Up @@ -81,6 +83,7 @@ interface IProps {
date: string;
content: string;
priority: number;
appName: string;
fDelete: VoidFunction;
extras?: IMessageExtras;
expanded: boolean;
Expand All @@ -105,13 +108,16 @@ const Message = ({
priority,
content,
extras,
appName,
onExpand,
expanded: initialExpanded,
}: IProps) => {
const theme = useTheme();
const [previewRef, setPreviewRef] = React.useState<HTMLDivElement | null>(null);
const {classes} = useStyles();
const [expanded, setExpanded] = React.useState(initialExpanded);
const [isOverflowing, setOverflowing] = React.useState(false);
const dateWrapped = useMediaQuery(theme.breakpoints.down('md'));

React.useEffect(() => {
setOverflowing(!!previewRef && previewRef.scrollHeight > previewRef.clientHeight);
Expand Down Expand Up @@ -145,7 +151,7 @@ const Message = ({
{image !== null ? (
<img
src={config.get('url') + image}
alt="app logo"
alt={`${appName} logo`}
width="70"
height="70"
className={classes.image}
Expand All @@ -158,7 +164,12 @@ const Message = ({
{title}
</Typography>
<Typography variant="body1" className={classes.date}>
<TimeAgo date={date} />
<TimeAgo
date={date}
formatter={makeIntlFormatter({
style: dateWrapped ? 'long' : 'narrow',
})}
/>
</Typography>
<IconButton
onClick={fDelete}
Expand Down
1 change: 1 addition & 0 deletions ui/src/message/Messages.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ const Messages = observer(() => {
onExpand={(expanded) => (expandedState.current[message.id] = expanded)}
title={message.title}
date={message.date}
appName={appStore.getName(message.appid)}
expanded={expandedState.current[message.id] ?? false}
content={message.message}
image={message.image}
Expand Down
10 changes: 10 additions & 0 deletions ui/src/typedef/react-timeago.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,19 @@
declare module 'react-timeago' {
import React from 'react';

export type FormatterOptions = {
style?: 'long' | 'short' | 'narrow';
};
export type Formatter = (options: FormatterOptions) => React.ReactNode;

export interface ITimeAgoProps {
date: string;
formatter?: Formatter;
}

export default class TimeAgo extends React.Component<ITimeAgoProps, unknown> {}
}

declare module 'react-timeago/defaultFormatter' {
declare function makeIntlFormatter(options: FormatterOptions): Formatter;
}
6 changes: 3 additions & 3 deletions ui/vite.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import {defineConfig} from 'vite';
import react from '@vitejs/plugin-react';

const GOTIFY_PORT = process.env.GOTIFY_PORT ?? '80';
const GOTIFY_SERVER_PORT = process.env.GOTIFY_SERVER_PORT ?? '80';

export default defineConfig({
build: {
Expand All @@ -21,12 +21,12 @@ export default defineConfig({
host: '0.0.0.0',
proxy: {
'^/(application|message|client|current|user|plugin|version|image)': {
target: `http://localhost:${GOTIFY_PORT}/`,
target: `http://localhost:${GOTIFY_SERVER_PORT}/`,
changeOrigin: true,
secure: false,
},
'/stream': {
target: `ws://localhost:${GOTIFY_PORT}/`,
target: `ws://localhost:${GOTIFY_SERVER_PORT}/`,
ws: true,
rewriteWsOrigin: true,
},
Expand Down
Loading