sorb/ThreadNet-Web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

Refactor MessageActionBar using MVVM and move to shared-components (#32784)

Browse Source 
* Refactor MessageActionBar into MVVM ActionBarView

* Adding tooltips for menu items and correct i18n strings

* Layout changes

* Renaming some properties

* Rename property

* Create a first version of the view model and refactor media visibility logic

* Refactor view to take options and rections menu as optional properties

* Cleaner interface between view and view model

* Refactor view properties and replace Menu and MenuItem

* Bugfixes and switching to ActionBarView instead of MessageActionBar in element-web

* Avoid creating view models and render toolbar until it is actually shown

* Added unit and playwright tests and documented the view

* Added view model unit tests and updated snapshots of dependant tests

* Remove unused components and unnecessary css

* Remove unused language tags

* Fix for handling join-rules correctly

* Prettier

* Add handling of stale view model in async calls

* Prettier

* Split the element-web css into two different. One for legacy components and one for the ActionBarView

* Missing variables used for linting

* Fix for showing ActionBarView when using keyboard for navigation

* Handle visibility on context menu closing

* ThreadPanel uses the ActionBarView so restore css rule

* Fix for visibility of the ActionBarView in Thread panel

* Fix for ActionBarVuew visibility when closing right-click context menu and not still hovering

* Add roving index to function as a toolbar

* Adjust the RoomView test to send hover to the EventTile instead of the message text

* Fix SonarCloud issues

* Fix for SonarCloud issue

* Merge fix

* Rename mx_LegacyActionBar to mx_ThreadActionBar

* Added documentation and simplified join rules

* Generalize the ActionBarView and move logic to view model

* Add the four new buttons to the ActionBarView

* Update view model and tests to use the updated ActionBarView

* Refactor element-web to use ActionBarView

* Clean up styling in element-web

* Clean up and updating snaps and screenshots

* Added unit-tests for better coverage

* Moving ActionBarView to the correct folder in shared components

* Update snaps in element-web

* Better documentation in stories

* Merge fixes

* Updates after review comments

* Review comment fixes

* Added documentation to view models and updated snaps

* Hide button had the wrong label

* Replace createRef with useRef
This commit is contained in:
rbondesson
2026-04-01 12:27:03 +00:00
committed by GitHub
parent 0391543bbc
commit 4315038346
46 changed files with 4071 additions and 2155 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/test/unit-tests/components/views/dialogs/__snapshots__/MessageEditHistoryDialog-test.tsx.snap
+49 -17
View File
@@ -86,15 +86,23 @@ exports[`<MessageEditHistory /> should match the snapshot 1`] = `
</span>
</div>
<div
class="mx_MessageActionBar"
aria-label="Message Actions"
aria-live="off"
class="_flex_4dswl_9 mx_ThreadActionBar mx_HistoryActionBar _toolbar_1ax4y_8"
role="toolbar"
style="--mx-flex-display: inline-flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
>
<div
class="mx_AccessibleButton"
<button
aria-label="Remove"
class="_button_13vu4_8 _toolbar_item_1ax4y_14"
data-kind="tertiary"
data-presentation="label"
data-size="sm"
role="button"
tabindex="0"
>
Remove
</div>
</button>
</div>
</div>
</div>
@@ -224,15 +232,23 @@ exports[`<MessageEditHistory /> should support events with 1`] = `
</span>
</div>
<div
class="mx_MessageActionBar"
aria-label="Message Actions"
aria-live="off"
class="_flex_4dswl_9 mx_ThreadActionBar mx_HistoryActionBar _toolbar_1ax4y_8"
role="toolbar"
style="--mx-flex-display: inline-flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
>
<div
class="mx_AccessibleButton"
<button
aria-label="Remove"
class="_button_13vu4_8 _toolbar_item_1ax4y_14"
data-kind="tertiary"
data-presentation="label"
data-size="sm"
role="button"
tabindex="0"
>
Remove
</div>
</button>
</div>
</div>
</div>
@@ -278,15 +294,23 @@ exports[`<MessageEditHistory /> should support events with 1`] = `
</span>
</div>
<div
class="mx_MessageActionBar"
aria-label="Message Actions"
aria-live="off"
class="_flex_4dswl_9 mx_ThreadActionBar mx_HistoryActionBar _toolbar_1ax4y_8"
role="toolbar"
style="--mx-flex-display: inline-flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
>
<div
class="mx_AccessibleButton"
<button
aria-label="Remove"
class="_button_13vu4_8 _toolbar_item_1ax4y_14"
data-kind="tertiary"
data-presentation="label"
data-size="sm"
role="button"
tabindex="0"
>
Remove
</div>
</button>
</div>
</div>
</div>
@@ -314,15 +338,23 @@ exports[`<MessageEditHistory /> should support events with 1`] = `
</span>
</div>
<div
class="mx_MessageActionBar"
aria-label="Message Actions"
aria-live="off"
class="_flex_4dswl_9 mx_ThreadActionBar mx_HistoryActionBar _toolbar_1ax4y_8"
role="toolbar"
style="--mx-flex-display: inline-flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
>
<div
class="mx_AccessibleButton"
<button
aria-label="Remove"
class="_button_13vu4_8 _toolbar_item_1ax4y_14"
data-kind="tertiary"
data-presentation="label"
data-size="sm"
role="button"
tabindex="0"
>
Remove
</div>
</button>
</div>
</div>
</div>
@@ -332,7 +364,7 @@ exports[`<MessageEditHistory /> should support events with 1`] = `
</div>
</div>
<div
aria-describedby="_r_8_"
aria-describedby="_r_c_"
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"
role="button"