[full-ci] Refactor extension appBar design/concept #8447

pascalwengerter · 2023-02-16T01:08:18Z

Description

Details (esp. design) tbd, just wanted to make this take into consideration the existing apps (and try to limit the codechanges needed)

Related Issue

Supersedes WIP: new file editor view #8442
Fixes Universal "app context" top bar #8422

sonarcloud · 2023-02-27T19:04:24Z

SonarCloud Quality Gate failed.

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

45.5% Coverage
0.0% Duplication

ownclouders · 2023-02-27T19:12:00Z

Results for acceptance oC10 https://drone.owncloud.com/owncloud/web/36230/20/1

💥 The acceptance tests failed on retry. Please find the screenshots inside ...

webUIPreview-mediaPreview_feature-L106.png

webUIPreview-mediaPreview_feature-L114.png

webUIPreview-mediaPreview_feature-L122.png

webUIPreview-mediaPreview_feature-L138.png

webUIPreview-mediaPreview_feature-L139.png

webUIPreview-mediaPreview_feature-L14.png

webUIPreview-mediaPreview_feature-L140.png

webUIPreview-mediaPreview_feature-L143.png

webUIPreview-mediaPreview_feature-L15.png

webUIPreview-mediaPreview_feature-L153.png

webUIPreview-mediaPreview_feature-L16.png

webUIPreview-mediaPreview_feature-L18.png

webUIPreview-mediaPreview_feature-L25.png

webUIPreview-mediaPreview_feature-L35.png

webUIPreview-mediaPreview_feature-L56.png

webUIPreview-mediaPreview_feature-L57.png

webUIPreview-mediaPreview_feature-L60.png

webUIPreview-mediaPreview_feature-L68.png

webUIPreview-mediaPreview_feature-L77.png

webUIPreview-mediaPreview_feature-L84.png

webUIPreview-mediaPreview_feature-L91.png

webUIPreview-mediaPreview_feature-L98.png

packages/web-pkg/src/components/AppTopBar.vue

packages/web-app-external/src/App.vue

packages/web-app-external/tests/unit/__snapshots__/app.spec.ts.snap

ownclouders · 2023-05-31T20:02:17Z

Results for acceptance oCIS https://drone.owncloud.com/owncloud/web/36230/50/1

💥 The acceptance tests failed on retry. Please find the screenshots inside ...

webUIPreview-mediaPreview_feature-L106.png

webUIPreview-mediaPreview_feature-L114.png

webUIPreview-mediaPreview_feature-L122.png

webUIPreview-mediaPreview_feature-L138.png

webUIPreview-mediaPreview_feature-L139.png

webUIPreview-mediaPreview_feature-L14.png

webUIPreview-mediaPreview_feature-L140.png

webUIPreview-mediaPreview_feature-L143.png

webUIPreview-mediaPreview_feature-L15.png

webUIPreview-mediaPreview_feature-L153.png

webUIPreview-mediaPreview_feature-L16.png

webUIPreview-mediaPreview_feature-L18.png

webUIPreview-mediaPreview_feature-L25.png

webUIPreview-mediaPreview_feature-L35.png

webUIPreview-mediaPreview_feature-L56.png

webUIPreview-mediaPreview_feature-L57.png

webUIPreview-mediaPreview_feature-L60.png

webUIPreview-mediaPreview_feature-L68.png

webUIPreview-mediaPreview_feature-L77.png

webUIPreview-mediaPreview_feature-L84.png

webUIPreview-mediaPreview_feature-L91.png

webUIPreview-mediaPreview_feature-L98.png

sonarcloud · 2023-05-31T22:58:27Z

SonarCloud Quality Gate failed.

2 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

55.6% Coverage
0.0% Duplication

packages/web-runtime/src/components/Topbar/TopBar.vue

lookacat · 2023-06-01T13:51:15Z

on small thing i noticed is the search icon margin to the right is off at smaller screens

pascalwengerter · 2023-06-01T14:44:44Z

on small thing i noticed is the search icon margin to the right is off at smaller screens

Looks more like the smaller gap between the other icons got lost on the way ;) I'll take a look later

JammingBen

Nice, I really like the feature! A few things I noticed though:

Is it really intended that the search bar goes missing? I would at least expect the search icon like in the mobile view.
Is it possible to align the tabs to the left? Having them centered feels a bit weird to me.
The disabled-/enabled-states of the "save"-button in the text-editor hardly differ from each other, especially in light mode. That makes it hard to tell if the button is clickable or not.

kulmann · 2023-06-13T08:46:26Z

Nice, I really like the feature! A few things I noticed though:

Is it really intended that the search bar goes missing? I would at least expect the search icon like in the mobile view.

Is it possible to align the tabs to the left? Having them centered feels a bit weird to me.

The disabled-/enabled-states of the "save"-button in the text-editor hardly differ from each other, especially in light mode. That makes it hard to tell if the button is clickable or not.

Strongly agree with @JammingBen's opinion on all three points... the first and second are blockers for me on the course of getting this merged.

packages/web-pkg/src/components/AppTopBar.vue

diocas · 2023-06-13T13:12:16Z

Pasting my feedback from ownCloud talk:

I'm trying it and is not working that well... i.e external apps don't show anything (not even the logo). But, since we haven't used the latest web, I might need to change settings.json...

And did we lose the extra actions like download or add to favs? I suppose this is app dependent? it shows on the photo viewer, but not on pdf viewer, for example.

finally, the radius seems unproportionate to the others in the UI

pascalwengerter · 2023-06-14T19:15:41Z

Pasting my feedback from ownCloud talk:

I'm trying it and is not working that well... i.e external apps don't show anything (not even the logo). But, since we haven't used the latest web, I might need to change settings.json...

And did we lose the extra actions like download or add to favs? I suppose this is app dependent? it shows on the photo viewer, but not on pdf viewer, for example.

finally, the radius seems unproportionate to the others in the UI

Thanks for porting your feedback ;)

Responses in order

haven't tested it with external apps myself, current setup doesn't work for me (but will debug now)
actions need to be registered per extension - media viewer and PDF viewer e.g. don't get a dedicated "download" action since they both feature a download button within the actual extension "body"
will update the radius, good point

pascalwengerter · 2023-06-14T19:21:44Z

Nice, I really like the feature! A few things I noticed though:

Is it really intended that the search bar goes missing? I would at least expect the search icon like in the mobile view.

Is it possible to align the tabs to the left? Having them centered feels a bit weird to me.

The disabled-/enabled-states of the "save"-button in the text-editor hardly differ from each other, especially in light mode. That makes it hard to tell if the button is clickable or not.

Strongly agree with @JammingBen's opinion on all three points... the first and second are blockers for me on the course of getting this merged.

Thanks for the feedback. In order:

search bar missing - from the original designs I figured that's a tradeoff everyone is fine with (at least for now), adding this in a sane way will be a pain but here we go I guess^^
align tabs to the left - looking at Universal "app context" top bar #8422 again I realise you're right and the apptopbar is displayed aligned to the left, however without background color (which was requested from oC) it felt a bit lost which is why I think I centered it...will re-align it to the left
action visibility - true, will take another look. Got lost in the appearance/variation/configurable background color jungle and will need to adjust ActionMenuItem component/type to expect and apply more configuration options

tbsbdr · 2023-06-16T08:38:57Z

relates to 31e2ad6

diocas · 2023-06-20T12:23:40Z

actions need to be registered per extension - media viewer and PDF viewer e.g. don't get a dedicated "download" action since they both feature a download button within the actual extension "body"

I understand, but each app has it's own place for the download button. Having a consistent place (even if duplicated) for users to search for it would be an improvement, in my view.

JammingBen · 2023-06-23T09:31:30Z

@pascalwengerter After talking with @tbsbdr : it's okay to drop the search bar, at least for now. Alignment to the left and the button color are still valid points. Also, we think it might be better to make the tab more decent looking. Goal: it should be clear that actions belong to the tab. Let's do it like that:

Just ping me if I can help you with some of these points as we want to get that merged soon.

I understand, but each app has it's own place for the download button. Having a consistent place (even if duplicated) for users to search for it would be an improvement, in my view.

I agree, although I'd suggest doing that in a follow-up PR.

JammingBen

The buttons look very nice now 👍 The tabs are still aligned in the center and missing their border though (see #8447 (comment)).

pascalwengerter · 2023-07-10T07:22:05Z

The buttons look very nice now 👍 The tabs are still aligned in the center and missing their border though (see #8447 (comment)).

Alignment was a major PITA and yeah, I did mess up the ODS color token/theme situation but should be fixed now ;)

dschmidt · 2023-07-10T08:50:46Z

packages/web-app-external/src/App.vue

    method: '',
-    formParameters: {}
+    resource: <Resource>null


You don't need to cast null

dschmidt · 2023-07-10T08:51:03Z

packages/web-app-pdf-viewer/src/App.vue

@@ -33,7 +34,7 @@ export default defineComponent({
    loading: true,
    loadingError: false,
    url: '',
-    resource: null
+    resource: <Resource>null


…o pass appearance&variation for all actions

…nement)

saw-jan · 2023-07-11T08:11:20Z

The drone-ci failure is due to the new version availability of the notifications app. We can either upgrade the app with occ upgrade or pull from the commit that has the previous version.

saw-jan · 2023-07-11T08:14:58Z

I think add line php occ upgrade below should work

web/.drone.star

Lines 2269 to 2276 in 15e09d8

    
           "commands": [ 
        
               "mkdir -p %s/apps/" % dir["server"], 
        
               "rm -rf %s/apps/notifications" % dir["server"], 
        
               "git clone -b master https://github.com/owncloud/notifications.git %s/apps/notifications" % dir["server"], 
        
               "cd %s || exit" % dir["server"], 
        
               "php occ a:e notifications", 
        
               "php occ a:l", 
        
           ],

            "cd %s || exit" % dir["server"],
+           "php occ upgrade",
            "php occ a:e notifications",

sonarcloud · 2023-07-11T08:40:03Z

Kudos, SonarCloud Quality Gate passed!

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

58.9% Coverage
0.0% Duplication

JammingBen

Awesome! 🥳

JammingBen mentioned this pull request Feb 17, 2023

WIP: new file editor view #8442

Closed

pascalwengerter force-pushed the feature/8422 branch from 90d4d02 to 006ff24 Compare February 27, 2023 18:55

pascalwengerter force-pushed the feature/8422 branch from 006ff24 to f507c1a Compare April 17, 2023 23:14

pascalwengerter commented Apr 17, 2023

View reviewed changes

packages/web-pkg/src/components/AppTopBar.vue Outdated Show resolved Hide resolved

pascalwengerter commented Apr 17, 2023

View reviewed changes

packages/web-pkg/src/components/AppTopBar.vue Outdated Show resolved Hide resolved

packages/web-pkg/src/components/AppTopBar.vue Outdated Show resolved Hide resolved

pascalwengerter force-pushed the feature/8422 branch from f507c1a to 35889ac Compare May 16, 2023 22:41

pascalwengerter changed the title ~~Refactor extension appBar design/concept~~ [full-ci] Refactor extension appBar design/concept May 31, 2023

pascalwengerter marked this pull request as ready for review May 31, 2023 19:36

pascalwengerter force-pushed the feature/8422 branch from 35889ac to 2bf3bbf Compare May 31, 2023 19:40

pascalwengerter commented May 31, 2023

View reviewed changes

packages/web-app-external/src/App.vue Outdated Show resolved Hide resolved

pascalwengerter commented May 31, 2023

View reviewed changes

packages/web-app-external/tests/unit/__snapshots__/app.spec.ts.snap Outdated Show resolved Hide resolved

lookacat reviewed Jun 1, 2023

View reviewed changes

packages/web-runtime/src/components/Topbar/TopBar.vue Outdated Show resolved Hide resolved

JammingBen reviewed Jun 2, 2023

View reviewed changes

kulmann reviewed Jun 13, 2023

View reviewed changes

packages/web-pkg/src/components/AppTopBar.vue Show resolved Hide resolved

kulmann reviewed Jun 13, 2023

View reviewed changes

packages/web-pkg/src/components/AppTopBar.vue Show resolved Hide resolved

pascalwengerter mentioned this pull request Jun 14, 2023

Custom web + WOPI example broken? owncloud/ocis#6531

Closed

pascalwengerter mentioned this pull request Jun 27, 2023

Provide a shared set of actions for extensions #9301

Closed

JammingBen reviewed Jul 10, 2023

View reviewed changes

pascalwengerter force-pushed the feature/8422 branch from b16a742 to 69930fd Compare July 10, 2023 07:19

pascalwengerter requested review from dschmidt and JammingBen July 10, 2023 07:19

AlexAndBear force-pushed the feature/8422 branch from 075bbb8 to 69930fd Compare July 10, 2023 08:47

dschmidt reviewed Jul 10, 2023

View reviewed changes

pascalwengerter force-pushed the feature/8422 branch from 69930fd to 695d672 Compare July 10, 2023 09:48

pascalwengerter requested a review from dschmidt July 10, 2023 09:49

tbsbdr added this to the CERN Web Merge milestone Jul 10, 2023

pascalwengerter force-pushed the feature/8422 branch from e42b173 to 43aa0d6 Compare July 11, 2023 07:12

pascalwengerter added 10 commits July 11, 2023 09:12

Iterate on AppTopBar concept (typed actions prop instead of slots)

2270fd6

Fix acceptance && E2E tests

bb9db3e

Rebase and import AppTopBar to external app view

1632ab3

Polish AppTopBar (and affected extensions), allow ContextActionMenu t…

6b1955f

…o pass appearance&variation for all actions

Rethink approach of custom colors for apptopbar

bb811a2

Apply suggestions from code review (options API, border, element alig…

ad1f291

…nement)

Fix responsive design for AppTopBar

bac2c4e

Remove obsolete import, fix responsiveness issues

87c7989

Further iterate on AppTopBar responsiveness, add dropdownActions prop

102bb55

Fix acceptance&&E2E tests

43aa0d6

Fix oauth2 app setup for oC10 in CI

93768c9

JammingBen approved these changes Jul 11, 2023

View reviewed changes

JammingBen merged commit b1fb385 into owncloud:master Jul 11, 2023
2 checks passed

pascalwengerter deleted the feature/8422 branch July 13, 2023 16:14

tbsbdr added Early-Adopter:CERN Platform:Web labels Jul 14, 2023

[full-ci] Refactor extension appBar design/concept #8447

[full-ci] Refactor extension appBar design/concept #8447

Conversation

pascalwengerter commented Feb 16, 2023

Description

Related Issue

sonarcloud bot commented Feb 27, 2023

ownclouders commented Feb 27, 2023 • edited Loading

webUIPreview-mediaPreview_feature-L106.png

webUIPreview-mediaPreview_feature-L114.png

webUIPreview-mediaPreview_feature-L122.png

webUIPreview-mediaPreview_feature-L138.png

webUIPreview-mediaPreview_feature-L139.png

webUIPreview-mediaPreview_feature-L14.png

webUIPreview-mediaPreview_feature-L140.png

webUIPreview-mediaPreview_feature-L143.png

webUIPreview-mediaPreview_feature-L15.png

webUIPreview-mediaPreview_feature-L153.png

webUIPreview-mediaPreview_feature-L16.png

webUIPreview-mediaPreview_feature-L18.png

webUIPreview-mediaPreview_feature-L25.png

webUIPreview-mediaPreview_feature-L35.png

webUIPreview-mediaPreview_feature-L56.png

webUIPreview-mediaPreview_feature-L57.png

webUIPreview-mediaPreview_feature-L60.png

webUIPreview-mediaPreview_feature-L68.png

webUIPreview-mediaPreview_feature-L77.png

webUIPreview-mediaPreview_feature-L84.png

webUIPreview-mediaPreview_feature-L91.png

webUIPreview-mediaPreview_feature-L98.png

ownclouders commented May 31, 2023 • edited Loading

webUIPreview-mediaPreview_feature-L106.png

webUIPreview-mediaPreview_feature-L114.png

webUIPreview-mediaPreview_feature-L122.png

webUIPreview-mediaPreview_feature-L138.png

webUIPreview-mediaPreview_feature-L139.png

webUIPreview-mediaPreview_feature-L14.png

webUIPreview-mediaPreview_feature-L140.png

webUIPreview-mediaPreview_feature-L143.png

webUIPreview-mediaPreview_feature-L15.png

webUIPreview-mediaPreview_feature-L153.png

webUIPreview-mediaPreview_feature-L16.png

webUIPreview-mediaPreview_feature-L18.png

webUIPreview-mediaPreview_feature-L25.png

webUIPreview-mediaPreview_feature-L35.png

webUIPreview-mediaPreview_feature-L56.png

webUIPreview-mediaPreview_feature-L57.png

webUIPreview-mediaPreview_feature-L60.png

webUIPreview-mediaPreview_feature-L68.png

webUIPreview-mediaPreview_feature-L77.png

webUIPreview-mediaPreview_feature-L84.png

webUIPreview-mediaPreview_feature-L91.png

webUIPreview-mediaPreview_feature-L98.png

sonarcloud bot commented May 31, 2023

lookacat commented Jun 1, 2023

pascalwengerter commented Jun 1, 2023

JammingBen left a comment

Choose a reason for hiding this comment

kulmann commented Jun 13, 2023

diocas commented Jun 13, 2023

pascalwengerter commented Jun 14, 2023

pascalwengerter commented Jun 14, 2023

tbsbdr commented Jun 16, 2023

diocas commented Jun 20, 2023

JammingBen commented Jun 23, 2023 • edited Loading

JammingBen left a comment

Choose a reason for hiding this comment

pascalwengerter commented Jul 10, 2023

dschmidt Jul 10, 2023

Choose a reason for hiding this comment

dschmidt Jul 10, 2023

Choose a reason for hiding this comment

saw-jan commented Jul 11, 2023

saw-jan commented Jul 11, 2023

sonarcloud bot commented Jul 11, 2023

JammingBen left a comment

Choose a reason for hiding this comment

ownclouders commented Feb 27, 2023 •

edited

Loading

ownclouders commented May 31, 2023 •

edited

Loading

JammingBen commented Jun 23, 2023 •

edited

Loading