Skip to content

Commit 6c7b9c1

Browse files
authored
BC-9141 change order of room boards (#3940)
Highlights: - added drag an drop to board items in room details page - added moving boards by pressing arrow keys - room details page changed layout to grid layout - fixed bug, which caused a reload when hitting enter on the create room page - removed feature flag for column board creation - changed UX to use a button/the title to navigate, rather than the entire card - reduced touch delay from 300 to 200 for most sortable occurences - naming conventions corrected for room/board components - utils for grid column detection added - utils for default sortable-js options added - color coding (surface + primary) optimized for contrast purposes
1 parent c04168d commit 6c7b9c1

Some content is hidden

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

41 files changed

+666
-434
lines changed

src/locales/de.ts

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ export default {
2828
"common.actions.shareCopy": "Kopie teilen",
2929
"common.actions.shareLink": "Link kopieren",
3030
"common.actions.update": "Aktualisieren",
31+
"common.actions.moved": "{elementName} wurde verschoben an Position {position}",
3132
"common.ariaLabel.newTab": "öffnet in einem neuen Tab",
3233
"common.ariaLabel.openImageInLightBox": "Bild in voller Größe anzeigen",
3334
"common.ariaLabel.sameTab": "öffnet im selben Tab",
@@ -45,6 +46,7 @@ export default {
4546
"common.file.exceedsCollaboraEditableFileSize":
4647
"Dokumente größer als {sizeInMb} können online nicht bearbeitet werden.",
4748
"common.files": "Dateien",
49+
"common.instructions.orderBy.arrowKeys": "Die Elemente dieser Liste können per Pfeiltaste verschoben werden.",
4850
"common.labels.admin": "Admin(s)",
4951
"common.labels.birthdate": "Geburtsdatum",
5052
"common.labels.birthday": "Geburtsdatum",
@@ -456,6 +458,7 @@ export default {
456458
"components.board.notifications.errors.notDeleted": "{type} konnte nicht gelöscht werden.",
457459
"components.board.notifications.errors.notDuplicated": "{type} konnte nicht dupliziert werden.",
458460
"components.board.notifications.errors.notLoaded": "{type} konnte nicht geladen werden.",
461+
"components.board.notifications.errors.notMoved": "{type} konnte nicht verschoben werden.",
459462
"components.board.notifications.errors.notUpdated": "Die Änderungen konnten nicht gespeichert werden.",
460463
"components.board.notifications.info.cardDuplicated":
461464
"Inhalte aus Etherpads und Whiteboards sowie geschützte Einstellungen externer Tools werden nicht übernommen.",
@@ -495,6 +498,7 @@ export default {
495498
"Der Bereich wurde von einem anderen Benutzer für alle Benutzer als nicht bearbeitbar festgelegt.",
496499
"components.board.preferredTools.notification.error.notLoaded": "Bevorzugte Tools konnten nicht geladen werden.",
497500
"components.board.header.chip.editableForEveryone": "Für alle bearbeitbar",
501+
"components.board": "Bereich",
498502
"components.boardCard": "Karte",
499503
"components.boardColumn": "Abschnitt",
500504
"components.boardElement": "Element",
@@ -1489,7 +1493,6 @@ export default {
14891493
"pages.content.placeholder.noLessonTopic": "Lege ein Thema im Kurs an",
14901494
"pages.content.preview_img.alt": "Bildvorschau",
14911495
"pages.courseRoomDetails.fab.add.board": "Neuer Bereich",
1492-
"pages.courseRoomDetails.fab.add.columnBoard": "Neuer Bereich {'|'} mehrspaltig",
14931496
"pages.courseRoomDetails.fab.add.lesson": "Neues Thema",
14941497
"pages.courseRoomDetails.fab.add.task": "Neue Aufgabe",
14951498
"pages.courseRooms.groupName": "Kurse",
@@ -1532,6 +1535,7 @@ export default {
15321535
"pages.room.boardCard.label.columnBoard": "Bereich {'|'} mehrspaltig",
15331536
"pages.room.boardCard.label.courseBoard": "Kurs-Bereich",
15341537
"pages.room.boardCard.label.listBoard": "Bereich {'|'} einspaltig",
1538+
"pages.room.boardCard.label.openItem": "Öffnen",
15351539
"pages.room.boardCard.menu.ariaLabel": "Bereich-Menü",
15361540
"pages.room.cards.aria": "{itemType}, Link, zum Öffnen die Eingabetaste drücken",
15371541
"pages.room.cards.label.revert": "Zurück auf Entwurf",
@@ -1633,6 +1637,7 @@ export default {
16331637
"pages.roomDetails.ariaLabels.menu": "Raum-Menü",
16341638
"pages.roomDetails.ariaLabels.menu.action.edit": "Raum bearbeiten",
16351639
"pages.roomDetails.ariaLabels.menu.action.delete": "Raum löschen",
1640+
"pages.roomDetails.fab.add.board": "Bereich erstellen",
16361641
"pages.roomDetails.board.defaultName": "Raum-Bereich",
16371642
"pages.roomDetails.emptyState": "Aktuell gibt es keine Lerninhalte in diesem Raum",
16381643
"pages.rooms.emptyState": "Aktuell gibt es keine Räume",

src/locales/en.ts

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ export default {
2828
"common.actions.shareCopy": "Share copy",
2929
"common.actions.shareLink": "Copy link",
3030
"common.actions.update": "Update",
31+
"common.actions.moved": "{elementName} was moved to position {position}",
3132
"common.ariaLabel.newTab": "opens in a new tab",
3233
"common.ariaLabel.openImageInLightBox": "Display image in full size",
3334
"common.ariaLabel.sameTab": "opens in the same tab",
@@ -43,6 +44,7 @@ export default {
4344
"common.file": "file",
4445
"common.file.exceedsCollaboraEditableFileSize": "Documents larger than {sizeInMb} cannot be edited online.",
4546
"common.files": "files",
47+
"common.instructions.orderBy.arrowKeys": "The items in this list can be moved using the arrow keys.",
4648
"common.labels.admin": "",
4749
"common.labels.birthdate": "Date of birth",
4850
"common.labels.birthday": "Date of Birth",
@@ -452,6 +454,7 @@ export default {
452454
"components.board.notifications.errors.notDeleted": "{type} could not be deleted.",
453455
"components.board.notifications.errors.notDuplicated": "{type} could not be duplicated.",
454456
"components.board.notifications.errors.notLoaded": "{type} could not be loaded.",
457+
"components.board.notifications.errors.notMoved": "{type} could not be moved.",
455458
"components.board.notifications.errors.notUpdated": "Your changes could not be saved.",
456459
"components.board.notifications.info.cardDuplicated":
457460
"Content from Etherpads and whiteboards as well as protected settings from external tools will not be transferred.",
@@ -487,6 +490,7 @@ export default {
487490
"The board was set as not editable for all users by another user.",
488491
"components.board.preferredTools.notification.error.notLoaded": "Preferred tools could not be loaded.",
489492
"components.board.header.chip.editableForEveryone": "Editable for everyone",
493+
"components.board": "board",
490494
"components.boardCard": "card",
491495
"components.boardColumn": "column",
492496
"components.boardElement": "element",
@@ -1467,7 +1471,6 @@ export default {
14671471
"pages.content.placeholder.noLessonTopic": "Create a topic in the course",
14681472
"pages.content.preview_img.alt": "Image preview",
14691473
"pages.courseRoomDetails.fab.add.board": "New board",
1470-
"pages.courseRoomDetails.fab.add.columnBoard": "New column board",
14711474
"pages.courseRoomDetails.fab.add.lesson": "New topic",
14721475
"pages.courseRoomDetails.fab.add.task": "New task",
14731476
"pages.courseRooms.groupName": "Courses",
@@ -1510,6 +1513,7 @@ export default {
15101513
"pages.room.boardCard.label.columnBoard": "Column Board",
15111514
"pages.room.boardCard.label.courseBoard": "Course Board",
15121515
"pages.room.boardCard.label.listBoard": "List Board",
1516+
"pages.room.boardCard.label.openItem": "Open",
15131517
"pages.room.boardCard.menu.ariaLabel": "Board menu",
15141518
"pages.room.cards.aria": "{itemType}, link, press enter to open",
15151519
"pages.room.cards.label.revert": "Revert to draft",
@@ -1612,6 +1616,7 @@ export default {
16121616
"pages.roomDetails.ariaLabels.menu": "Room menu",
16131617
"pages.roomDetails.ariaLabels.menu.action.edit": "Edit room",
16141618
"pages.roomDetails.ariaLabels.menu.action.delete": "Delete room",
1619+
"pages.roomDetails.fab.add.board": "Add board",
16151620
"pages.roomDetails.board.defaultName": "Room Board",
16161621
"pages.roomDetails.emptyState": "Currently there is no learning content in this room",
16171622
"pages.rooms.emptyState": "Currently there are no rooms",

src/locales/es.ts

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ export default {
2828
"common.actions.shareCopy": "Compartir copia",
2929
"common.actions.shareLink": "Copiar enlace",
3030
"common.actions.update": "Actualizar",
31+
"common.actions.moved": "{elementName} se movió a la posición {position}",
3132
"common.ariaLabel.newTab": "se abre en una nueva pestaña",
3233
"common.ariaLabel.openImageInLightBox": "Mostrar imagen en tamaño completo",
3334
"common.ariaLabel.sameTab": "se abre en la misma pestaña",
@@ -45,6 +46,7 @@ export default {
4546
"common.file.exceedsCollaboraEditableFileSize":
4647
"Los documentos que superen los {sizeInMb} no se pueden editar en línea.",
4748
"common.files": "Archivos",
49+
"common.instructions.orderBy.arrowKeys": "Los elementos de esta lista se pueden mover con las teclas de flecha.",
4850
"common.labels.admin": "Admin(s)",
4951
"common.labels.birthdate": "Fecha de nacimiento",
5052
"common.labels.birthday": "Fecha de nacimiento",
@@ -460,6 +462,7 @@ export default {
460462
"components.board.notifications.errors.notDeleted": "{type} no se ha podido eliminar.",
461463
"components.board.notifications.errors.notDuplicated": "{type} no se ha podido duplicar.",
462464
"components.board.notifications.errors.notLoaded": "{type} no se ha podido cargar.",
465+
"components.board.notifications.errors.notMoved": "{type} no se ha podido movido.",
463466
"components.board.notifications.errors.notUpdated": "No se han podido guardar los cambios.",
464467
"components.board.notifications.info.cardDuplicated":
465468
"No se transferirán los contenidos de Etherpads y pizarras blancas, ni tampoco los ajustes protegidos de herramientas externas.",
@@ -495,6 +498,7 @@ export default {
495498
"El tablero fue establecida como no editable para todos los usuarios por otro usuario.",
496499
"components.board.preferredTools.notification.error.notLoaded": "No se pudieron cargar las herramientas preferidas.",
497500
"components.board.header.chip.editableForEveryone": "Editable para todos",
501+
"components.board": "tablero",
498502
"components.boardCard": "tarjeta",
499503
"components.boardColumn": "columna",
500504
"components.boardElement": "elemento",
@@ -1500,7 +1504,6 @@ export default {
15001504
"pages.content.placeholder.noLessonTopic": "Crear un tema en el curso",
15011505
"pages.content.preview_img.alt": "Vista previa de la imagen",
15021506
"pages.courseRoomDetails.fab.add.board": "Nuevo tablero",
1503-
"pages.courseRoomDetails.fab.add.columnBoard": "Nuevo tablero de columna",
15041507
"pages.courseRoomDetails.fab.add.lesson": "Nuevo tema",
15051508
"pages.courseRoomDetails.fab.add.task": "Nuevo tarea",
15061509
"pages.courseRooms.groupName": "Cursos",
@@ -1543,6 +1546,7 @@ export default {
15431546
"pages.room.boardCard.label.columnBoard": "Tablero de columna",
15441547
"pages.room.boardCard.label.courseBoard": "Junta del curso",
15451548
"pages.room.boardCard.label.listBoard": "Tablero de listas",
1549+
"pages.room.boardCard.label.openItem": "Abrir",
15461550
"pages.room.boardCard.menu.ariaLabel": "Menú del tablero",
15471551
"pages.room.cards.aria": "{itemType}, enlace, presione Intro para abrir",
15481552
"pages.room.cards.label.revert": "Volver al borrador",
@@ -1646,6 +1650,7 @@ export default {
16461650
"pages.roomDetails.ariaLabels.menu": "Menú de la sala",
16471651
"pages.roomDetails.ariaLabels.menu.action.edit": "Editar sala",
16481652
"pages.roomDetails.ariaLabels.menu.action.delete": "Borrar sala",
1653+
"pages.roomDetails.fab.add.board": "Añadir tablero",
16491654
"pages.roomDetails.board.defaultName": "Tablero de la sala",
16501655
"pages.roomDetails.emptyState": "Actualmente no hay contenidos de aprendizaje en esta sala",
16511656
"pages.rooms.emptyState": "Actualmente no hay salas",

src/locales/uk.ts

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ export default {
2828
"common.actions.shareCopy": "Поділитися копією",
2929
"common.actions.shareLink": "Копіювати посилання",
3030
"common.actions.update": "Оновити",
31+
"common.actions.moved": "{elementName} було переміщено на позицію {position}",
3132
"common.ariaLabel.newTab": "відкривається в новій вкладці",
3233
"common.ariaLabel.openImageInLightBox": "Показати зображення в повному розмірі",
3334
"common.ariaLabel.sameTab": "відкривається в тій же вкладці",
@@ -44,6 +45,7 @@ export default {
4445
"common.file": "Файл",
4546
"common.file.exceedsCollaboraEditableFileSize":
4647
"Документи розміром більше {sizeInMb} не можуть бути оброблені онлайн.",
48+
"common.instructions.orderBy.arrowKeys": "Елементи цього списку можна переміщати за допомогою клавіш зі стрілками.",
4749
"common.files": "Файли",
4850
"common.labels.admin": "адміністратор(и)",
4951
"common.labels.birthdate": "Дата народження",
@@ -456,6 +458,7 @@ export default {
456458
"components.board.notifications.errors.notDeleted": "{type}: Не вдалося видалити.",
457459
"components.board.notifications.errors.notDuplicated": "{type} не вдалося дублікувати.",
458460
"components.board.notifications.errors.notLoaded": "{type}: не вдалося завантажити.",
461+
"components.board.notifications.errors.notMoved": "{type} не вдалося позицію.",
459462
"components.board.notifications.errors.notUpdated": "Зберегти зміни не вдалося.",
460463
"components.board.notifications.info.cardDuplicated":
461464
"IВміст з Etherpads і Whiteboards, а також захищені налаштування зовнішніх інструментів не переносяться.",
@@ -490,6 +493,7 @@ export default {
490493
"Дошку було встановлено як не редаговану для всіх користувачів іншим користувачем.",
491494
"components.board.preferredTools.notification.error.notLoaded": "Не вдалося завантажити бажані інструменти.",
492495
"components.board.header.chip.editableForEveryone": "Редагується для всіх",
496+
"components.board": "Дошка",
493497
"components.boardCard": "Картка",
494498
"components.boardColumn": "Колонка",
495499
"components.boardElement": "Eлемент",
@@ -1478,7 +1482,6 @@ export default {
14781482
"pages.courseRoomDetails.fab.add.lesson": "Створити тему",
14791483
"pages.courseRoomDetails.fab.add.task": "Створити завдання",
14801484
"pages.courseRoomDetails.fab.add.board": "Нова дошка",
1481-
"pages.courseRoomDetails.fab.add.columnBoard": "Нова дошка",
14821485
"pages.courseRooms.groupName": "Курси",
14831486
"pages.courseRooms.headerSection.archived": "Архів",
14841487
"pages.courseRooms.headerSection.menu.ariaLabel": "Меню курсу",
@@ -1519,6 +1522,7 @@ export default {
15191522
"pages.room.boardCard.label.columnBoard": "Колонна дошка",
15201523
"pages.room.boardCard.label.courseBoard": "Дошка оголошень",
15211524
"pages.room.boardCard.label.listBoard": "Список дошки оголошень",
1525+
"pages.room.boardCard.label.openItem": "Відкрити",
15221526
"pages.room.boardCard.menu.ariaLabel": "Меню форуму",
15231527
"pages.room.cards.aria": "{itemType}, посилання, натисніть Enter, щоб відкрити",
15241528
"pages.room.cards.label.revert": "Повернути до стану чернетки",
@@ -1621,6 +1625,7 @@ export default {
16211625
"pages.roomDetails.ariaLabels.menu": "Меню кімнати",
16221626
"pages.roomDetails.ariaLabels.menu.action.edit": "Кімната редагування",
16231627
"pages.roomDetails.ariaLabels.menu.action.delete": "Видалити кімнату",
1628+
"pages.roomDetails.fab.add.board": "Додати дошку",
16241629
"pages.roomDetails.board.defaultName": "Космічна дошка",
16251630
"pages.roomDetails.emptyState": "Наразі в цьому просторі немає навчальних матеріалів",
16261631
"pages.rooms.emptyState": "Наразі немає вільних кімнат",

src/main.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,7 @@ mountBaseComponents(app);
7272
// app.config.productionTip = false;
7373

7474
app.config.errorHandler = (err: unknown) => {
75+
logger.error(err);
7576
useAppStore().handleUnknownError(err);
7677
};
7778

src/modules/data/room/RoomDetails.store.ts

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,10 +58,14 @@ export const useRoomDetailsStore = defineStore("roomDetailsStore", () => {
5858
return boardId;
5959
};
6060

61+
const moveBoard = async (roomId: string, boardId: string, toPosition: number) => {
62+
await roomApi.roomControllerMoveBoard(roomId, { id: boardId, toPosition });
63+
};
64+
6165
/**
6266
* @throws ApiResponseError | ApiValidationError
6367
*/
64-
const updateRoom = async (id: string, params: RoomUpdateParams): Promise<void> => {
68+
const updateRoom = async (id: string, params: RoomUpdateParams) => {
6569
isLoading.value = true;
6670
try {
6771
await roomApi.roomControllerUpdateRoom(id, params);
@@ -81,6 +85,7 @@ export const useRoomDetailsStore = defineStore("roomDetailsStore", () => {
8185
fetchRoomAndBoards,
8286
fetchRoom,
8387
createBoard,
88+
moveBoard,
8489
isLoading,
8590
resetState,
8691
room,

src/modules/feature/board/board/Board.vue

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -342,9 +342,7 @@ const copyModule = injectStrict(COPY_MODULE_KEY);
342342
343343
const isCopyModalOpen = computed(() => copyModule.getIsResultModalOpen);
344344
345-
const isListBoard = computed(
346-
() => useEnvConfig().value.FEATURE_BOARD_LAYOUT_ENABLED && board.value?.layout === BoardLayout.List
347-
);
345+
const isListBoard = computed(() => board.value?.layout === BoardLayout.List);
348346
349347
provide(BOARD_IS_LIST_LAYOUT, isListBoard);
350348

src/modules/feature/board/board/BoardColumn.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
bubbleScroll: true,
2626
direction: 'vertical',
2727
delayOnTouchOnly: true,
28-
delay: 300,
28+
delay: 200,
2929
touchStartThreshold: 3, // needed for sensitive touch devices
3030
fallbackTolerance: 3, // specifies how far the mouse should move before it's considered a drag
3131
disabled: !hasMovePermission,

src/modules/feature/board/board/BoardColumnGhost.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
:options="{
2020
group: 'cards',
2121
direction: 'vertical',
22-
delay: 300, // isDesktop ? 0 : 300
22+
delay: 200,
2323
delayOnTouchOnly: true,
2424
ghostClass: isListBoard ? 'list-layout' : 'column-layout',
2525
easing: 'cubic-bezier(1, 0, 0, 1)',

src/modules/feature/media-shelf/MediaBoard.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
:options="{
1616
direction: 'vertical',
1717
group: 'lines',
18-
delay: 300,
18+
delay: 200,
1919
delayOnTouchOnly: true,
2020
disabled: isInEditMode,
2121
ghostClass: 'sortable-drag-ghost',

0 commit comments

Comments
 (0)