Skip to content

Commit 8a9139e

Browse files
SandraMonnierSandraMonnier
authored
Merge pull request #554 from Heigvd/dev
lot of UX / UI improvements
2 parents ea17486 + 655d197 commit 8a9139e

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

56 files changed

+2748
-2219
lines changed

‎.github/workflows/ci.yml‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -88,11 +88,14 @@ jobs:
8888
- name: YJS Yarn Install
8989
run: yarn --cwd colab-api/src/main/node/colab-yjs install
9090

91+
- name: YJS Yarn Build
92+
run: yarn --cwd colab-api/src/main/node/colab-yjs build
93+
9194
- name: Build YJS image
9295
uses: docker/build-push-action@v3
9396
with:
9497
context: colab-api/src/main/node/colab-yjs
95-
platforms: linux/amd64,linux/arm/v7,linux/arm64/v8,linux/ppc64le,linux/s390x
98+
platforms: linux/amd64,linux/arm/v7,linux/arm64/v8
9699
push: true
97100
tags: ${{ steps.docker-meta-yjs.outputs.tags }}
98101
labels: ${{ steps.docker-meta-yjs.outputs.labels }}
@@ -126,7 +129,7 @@ jobs:
126129
uses: docker/build-push-action@v3
127130
with:
128131
context: colab-webapp/src/main/docker/colab
129-
platforms: linux/amd64,linux/arm/v7,linux/arm64/v8,linux/ppc64le,linux/s390x
132+
platforms: linux/amd64,linux/arm/v7,linux/arm64/v8
130133
push: true
131134
tags: ${{ steps.docker-meta.outputs.tags }}
132135
labels: ${{ steps.docker-meta.outputs.labels }}

‎colab-api/src/main/node/colab-yjs/Dockerfile‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,12 @@ ENV DBHOST="mongodb://host.docker.internal:27019/colablexical"
88
WORKDIR /app
99

1010
COPY package.json ./
11+
COPY yarn.lock ./
12+
COPY dist ./dist
13+
COPY start.sh ./start.sh
1114

12-
COPY . .
13-
14-
RUN yarn install --network-timeout 1000000 && yarn build && yarn install --production && yarn cache clean
15+
RUN yarn install --frozen-lockfile --network-timeout 1000000 --production && yarn cache clean
1516

1617
EXPOSE 4321
1718

18-
CMD ["bash", "start.sh"]
19+
CMD ["bash", "start.sh"]

‎colab-webapp/src/main/node/app/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,7 @@
125125
"framer-motion": "^10.16.4",
126126
"inter-ui": "^3.19.3",
127127
"jspdf": "^2.5.1",
128-
"lexical": "0.12.2",
128+
"lexical": "0.12.5",
129129
"lodash": "^4.17.21",
130130
"react": "^18.2.0",
131131
"react-color": "^2.19.3",

‎colab-webapp/src/main/node/app/public/index.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,19 +8,19 @@
88
@font-face {
99
font-family: 'Public Sans';
1010
font-style: normal;
11-
src: url('../../fonts/PublicSans[wght].ttf') format('truetype');
11+
src: url('./fonts/PublicSans[wght].ttf') format('truetype');
1212
}
1313

1414
@font-face {
1515
font-family: 'Public Sans Italic';
1616
font-style: normal;
17-
src: url('../../fonts/PublicSans-Italic[wght].ttf') format('truetype');
17+
src: url('./fonts/PublicSans-Italic[wght].ttf') format('truetype');
1818
}
1919

2020
@font-face {
2121
font-family: 'Material Symbols Outlined';
2222
font-style: normal;
23-
src: url('../../fonts/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].woff2') format('woff2');
23+
src: url('./fonts/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].woff2') format('woff2');
2424
font-display: block;
2525
}
2626

‎colab-webapp/src/main/node/app/src/components/authentication/SignIn.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -99,8 +99,6 @@ export default function SignInForm({
9999
if (action.meta.requestStatus === 'fulfilled') {
100100
if (redirectTo) {
101101
navigate(redirectTo);
102-
} else {
103-
navigate('/');
104102
}
105103
}
106104
});

‎colab-webapp/src/main/node/app/src/components/cards/CardContentStatusDisplay.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import useTranslations from '../../i18n/I18nContext';
1212
import { MaterialIconsType } from '../../styling/IconType';
1313
import { space_xs, text_xs } from '../../styling/style';
1414
import Badge from '../common/element/Badge';
15-
import Icon from '../common/layout/Icon';
15+
import Icon, { IconSize } from '../common/layout/Icon';
1616

1717
// -------------------------------------------------------------------------------------------------
1818
// styles
@@ -31,20 +31,21 @@ interface CardContentStatusDisplayProps {
3131
status: StatusType;
3232
kind: 'icon_only' | 'outlined' | 'solid';
3333
showEmpty?: boolean;
34+
iconSize?: keyof typeof IconSize;
3435
className?: string;
3536
}
3637

3738
export default function CardContentStatusDisplay({
3839
status,
3940
kind,
4041
showEmpty = false,
42+
iconSize = 'xs',
4143
className,
4244
}: CardContentStatusDisplayProps): JSX.Element {
4345
const text = useText(status);
4446
const { icon, color } = getIconAndColor(status);
4547
const tooltip = useTooltip(status);
4648

47-
const iconSize = 'xs';
4849
const textStyle = text_xs;
4950

5051
if (status == null) {

‎colab-webapp/src/main/node/app/src/components/cards/CardEditor.tsx‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ import Flex from '../common/layout/Flex';
2121
import { Item, SideCollapsibleCtx } from '../common/layout/SideCollapsibleContext';
2222
import { TextEditorContext } from '../documents/texteditor/TextEditorContext';
2323
import { ResourcesMainViewHeader, ResourcesMainViewPanel } from '../resources/ResourcesMainView';
24-
import CardAssignmentsPanel from '../team/CardAssignments';
24+
import CardAssignmentsPanel from '../team/CardAssignmentsTable';
2525
import CardEditorDeliverable from './CardEditorDeliverable';
2626
import CardEditorHeader from './CardEditorHeader';
2727
import CardEditorSideMenu from './CardEditorSideMenu';
@@ -113,7 +113,12 @@ export default function CardEditor({ card, cardContent }: CardEditorProps): JSX.
113113
return (
114114
<Flex direction="column" align="stretch" className={css({ height: '100%', width: '100%' })}>
115115
<Dndwrapper cards={subCards}>
116-
<CardEditorHeader card={card} cardContent={cardContent} readOnly={readOnly} />
116+
<CardEditorHeader
117+
card={card}
118+
cardContent={cardContent}
119+
readOnly={readOnly}
120+
setSplitterPlace={setSplitterPlace}
121+
/>
117122
<Flex direction="row" grow={1} align="stretch" className={css({ overflow: 'auto' })}>
118123
<SideCollapsibleCtx.Provider
119124
value={{
@@ -138,7 +143,6 @@ export default function CardEditor({ card, cardContent }: CardEditorProps): JSX.
138143
<ReflexElement
139144
className={'top-panel ' + css({ display: 'flex' })}
140145
resizeWidth={false}
141-
minSize={65}
142146
flex={splitterPlace === 'BOTTOM' ? 1 : splitterPlace === 'TOP' ? 0 : 0.5}
143147
>
144148
{/* ******************************** DELIVERABLE ******************************** */}
@@ -158,7 +162,6 @@ export default function CardEditor({ card, cardContent }: CardEditorProps): JSX.
158162
<ReflexElement
159163
className={'bottom-panel ' + css({ display: 'flex', minHeight: '44px' })}
160164
resizeWidth={false}
161-
minSize={44}
162165
>
163166
{/* ******************************** SUB CARDS ******************************** */}
164167
<CardEditorSubCards

‎colab-webapp/src/main/node/app/src/components/cards/CardEditorHeader.tsx‎

Lines changed: 90 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -29,25 +29,27 @@ import Button from '../common/element/Button';
2929
import DeletionStatusIndicator from '../common/element/DeletionStatusIndicator';
3030
import IconButton from '../common/element/IconButton';
3131
import { DiscreetInput } from '../common/element/Input';
32-
import { TipsCtx, WIPContainer } from '../common/element/Tips';
32+
import { TipsCtx } from '../common/element/Tips';
3333
import DropDownMenu, { entryStyle } from '../common/layout/DropDownMenu';
3434
import Flex from '../common/layout/Flex';
3535
import Icon from '../common/layout/Icon';
3636
import ProjectBreadcrumbs from '../projects/ProjectBreadcrumbs';
3737
import { CardEditorDeletedBanner } from './CardEditorDeletedBanner';
3838
import { getCardTitle } from './CardTitle';
3939
import { ProgressBarEditor } from './ProgressBar';
40-
import StatusDropDown from './StatusDropDown';
40+
import StatusDropDown, { StatusSubDropDownEntry } from './StatusDropDown';
4141
import { VariantPager } from './VariantSelector';
4242

4343
interface CardEditorHeaderProps {
4444
card: Card;
4545
cardContent: CardContent;
46+
setSplitterPlace: React.Dispatch<React.SetStateAction<'TOP' | 'MIDDLE' | 'BOTTOM' | undefined>>;
4647
readOnly?: boolean;
4748
}
4849
export default function CardEditorHeader({
4950
card,
5051
cardContent,
52+
setSplitterPlace,
5153
readOnly,
5254
}: CardEditorHeaderProps): JSX.Element {
5355
const i18n = useTranslations();
@@ -120,22 +122,22 @@ export default function CardEditorHeader({
120122
<VariantPager allowCreation={!readOnly} card={card} current={cardContent} />
121123
</>
122124
)}
123-
<IconButton
124-
icon={cardContent.frozen ? 'lock' : 'lock_open'}
125-
title={i18n.modules.card.infos.cardLocked}
126-
color={'var(--gray-400)'}
127-
onClick={() =>
128-
dispatch(API.updateCardContent({ ...cardContent, frozen: !cardContent.frozen }))
129-
}
130-
kind="ghost"
131-
className={css({ padding: space_sm, background: 'none' })}
132-
/>
133-
<StatusDropDown
134-
value={cardContent.status}
135-
readOnly={readOnly}
136-
onChange={status => dispatch(API.updateCardContent({ ...cardContent, status }))}
137-
kind="outlined"
138-
/>
125+
{cardContent.frozen /* display only if is locked */ && (
126+
<Icon
127+
icon={'lock'}
128+
title={i18n.modules.card.infos.cardLocked}
129+
color={'var(--gray-400)'}
130+
className={css({ padding: space_sm, background: 'none' })}
131+
/>
132+
)}
133+
{cardContent.status != null /* display only if has a status */ && (
134+
<StatusDropDown
135+
value={cardContent.status}
136+
readOnly={readOnly}
137+
onChange={status => dispatch(API.updateCardContent({ ...cardContent, status }))}
138+
kind="outlined"
139+
/>
140+
)}
139141
</Flex>
140142
{currentUser?.admin && tipsConfig.DEBUG.value && (
141143
<Flex
@@ -167,35 +169,82 @@ export default function CardEditorHeader({
167169
{/* View mode btn *********************************************** */}
168170

169171
<Flex align="center">
170-
<WIPContainer>
171-
<IconButton
172-
title="contentOnly"
173-
icon={'subtitles'}
174-
kind="ghost"
175-
iconSize="xs"
176-
className={css({ marginRight: space_sm })}
177-
></IconButton>
178-
<IconButton
179-
title="Splitted"
180-
icon={'space_dashboard'}
181-
kind="ghost"
182-
iconSize="xs"
183-
className={css({ marginRight: space_sm })}
184-
></IconButton>
185-
<IconButton
186-
title="cardsOnly"
187-
icon={'iframe'}
188-
kind="ghost"
189-
iconSize="xs"
190-
className={css({ marginRight: space_sm })}
191-
></IconButton>
192-
</WIPContainer>
172+
<IconButton
173+
title={i18n.modules.card.editor.contentOnly}
174+
icon={'subtitles'}
175+
kind="ghost"
176+
iconSize="xs"
177+
onClick={() => {
178+
setSplitterPlace('BOTTOM');
179+
}}
180+
className={css({ marginRight: space_sm, backgroundColor: 'transparent' })}
181+
/>
182+
<IconButton
183+
title={i18n.modules.card.editor.split}
184+
icon={'space_dashboard'}
185+
kind="ghost"
186+
iconSize="xs"
187+
onClick={() => {
188+
setSplitterPlace('MIDDLE');
189+
}}
190+
className={css({ marginRight: space_sm, backgroundColor: 'transparent' })}
191+
/>
192+
<IconButton
193+
title={i18n.modules.card.editor.cardsOnly}
194+
icon={'iframe'}
195+
kind="ghost"
196+
iconSize="xs"
197+
onClick={() => {
198+
setSplitterPlace('TOP');
199+
}}
200+
className={css({ marginRight: space_sm, backgroundColor: 'transparent' })}
201+
/>
193202

194203
<DropDownMenu
195204
icon={'more_vert'}
196205
valueComp={{ value: '', label: '' }}
197206
buttonClassName={lightIconButtonStyle}
198207
entries={[
208+
{
209+
value: 'changeStatus',
210+
label: (
211+
<StatusSubDropDownEntry
212+
mainLabel={i18n.modules.card.action.changeStatus}
213+
onChange={newStatus => {
214+
dispatch(
215+
API.updateCardContent({
216+
...cardContent,
217+
status: newStatus ?? null,
218+
}),
219+
);
220+
}}
221+
/>
222+
),
223+
subDropDownButton: true,
224+
},
225+
{
226+
value: 'changeLock',
227+
label: (
228+
<>
229+
{cardContent.frozen ? (
230+
<>
231+
<Icon icon={'lock_open'} />
232+
{i18n.modules.card.action.unlock}
233+
</>
234+
) : (
235+
<>
236+
<Icon icon={'lock'} />
237+
{i18n.modules.card.action.lock}
238+
</>
239+
)}
240+
</>
241+
),
242+
action: () => {
243+
dispatch(
244+
API.updateCardContent({ ...cardContent, frozen: !cardContent.frozen }),
245+
);
246+
},
247+
},
199248
...(currentUser?.admin && card.cardTypeId == null
200249
? [
201250
{

‎colab-webapp/src/main/node/app/src/components/cards/CardRootView.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { css } from '@emotion/css';
99
import { CardContent } from 'colab-rest-client';
1010
import * as React from 'react';
1111
import { useAndLoadSubCards } from '../../store/selectors/cardSelector';
12-
import { space_sm } from '../../styling/style';
12+
import { space_lg, space_sm, space_xs } from '../../styling/style';
1313
import InlineLoading from '../common/element/InlineLoading';
1414
import Flex from '../common/layout/Flex';
1515
import { PresenceContext } from '../presence/PresenceContext';
@@ -43,7 +43,11 @@ export default function RootView({ rootContent }: { rootContent: CardContent | n
4343
})}
4444
>
4545
<Dndwrapper cards={subCards}>
46-
<ProjectBreadcrumbs />
46+
<ProjectBreadcrumbs
47+
className={css({
48+
padding: space_xs + ' ' + space_xs + ' ' + space_xs + ' ' + space_lg,
49+
})}
50+
/>
4751
{rootContent != null && rootContent.id != null ? (
4852
<Flex className={css({ overflow: 'hidden' })} justify="center" direction="row" grow={1}>
4953
<Flex

0 commit comments

Comments
 (0)