fix(NcAppContent): don't remove list when showing details in mobile or no-split mode

[wofferl]

☑️ Resolves

• Fix [NcAppContent] list is rebuild every time when details were shown with no-split or mobile view #6204

As mentioned in #6204 the change in 8.10.0 causes the item list to rebuild every time the details of an item are shown.
With a dynamic list like in the news app, where read items are removed from the list when refreshing it, this means that the selected item you looked at the details are gone immediately when you close the details.
It also affects the performance, because of the rebuilding when closing the details, which is notable on mobile devices.

I think there is no technical reason to delete it, so it is better to just hide the list.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 42.27%. Comparing base (4c77334) to head (0bffe7b).
Report is 151 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #6261      +/-   ##
==========================================
- Coverage   42.50%   42.27%   -0.23%     
==========================================
  Files         156      157       +1     
  Lines        4028     4040      +12     
  Branches     1036     1052      +16     
==========================================
- Hits         1712     1708       -4     
- Misses       2200     2217      +17     
+ Partials      116      115       -1     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[ShGKme]

v-show is a node directive, it sets display: none on the node. While <slot> is not a node. It is a special tag specifying a place to execute a content render function.

Using v-show on <slot> is not possible in both Vue 2 and Vue 3.

• https://v2.template-explorer.vuejs.org/#%3Cdiv%20id%3D%22app%22%3E%0A%20%20%3Cslot%20v-show%3D%22showDetails%22%20%2F%3E%0A%3C%2Fdiv%3E
• https://template-explorer.vuejs.org/#eyJzcmMiOiI8ZGl2PlxyXG4gIDxzbG90IHYtc2hvdz1cInNob3dEZXRhaWxzXCIgLz5cclxuPC9kaXY+Iiwib3B0aW9ucyI6e319

[wofferl]

ok, I understand. So it simply ignored the v-show part during my tests and worked like before 8.10.0, because hiding is done with this css, as I can see now.

.app-content-wrapper--no-split {
        &.app-content-wrapper--show-list :deep() {
                .app-content-list {
                        display: flex;
                }
                .app-content-details {
                        display: none;
                }               
        }
        &.app-content-wrapper--show-details :deep() {
                .app-content-list {
                        display: none;
                }               
                .app-content-details {
                        display: block;
                }
        }
}

But why the change to remove the list here completely?

[devlinjunker]

Can you just wrap the <slot> inside of a <div> and put the v-show directive on that instead?

[devlinjunker]

@wofferl I have also been playing around with allowing horizontal-split in the NcAppContent component when in mobile mode.

It would require adding another parameter mobileLayout that we could use in the news app to show the feed item content below the list. This would also fix the weird behavior of the unread feed list always removing the article you just opened when you return to the list.

I'll try to get some PRs out this weekend if I have time

[devlinjunker]

here's a screen shot from my dev machine:

[devlinjunker]

created the nextcloud-vue PR here: #6364

I will try to create the nextcloud one that depends later this weekend

[devlinjunker]

heres a link to the branch I will be creating the PR from: https://github.com/nextcloud/news/compare/master...devlinjunker:news:improve-mobile?expand=1

[wofferl]

Can you just wrap the <slot> inside of a <div> and put the v-show directive on that instead?

@devlinjunker
Unfortunately, I have not yet received an answer either here or in #6204 as to why the list is removed with v-if at all, but you're right <div v-show="..."> should work.

[wofferl]

@GretaD @ShGKme Is there any information on this problem, whether the old behavior should be restored or whether it will remain as it is in the future.

[GretaD]

hi, sorry for the late reply, i wrote on our frontend talk room, so more people are involved to get a decision.