Select different layouts for multiple and single entry (per-context switcher)

[doekenorg]

Things to test:

• [x] Saving existing Views shouldn't change anything
  • Edit an existing View
  • Don't do anything
  • Save the View
  • Check to make sure the previous single/multiple entries layouts don't change
• [x] Updating a View works
  • Edit an existing View
  • Change the layout type
  • Save the View
  • Confirm that the layouts are correct for single & multiple layouts
• [x] Confirm that the View type change dialog occurs when switching from Table/DataTables to other layouts
• [x] Confirm that when changing layout types and the fields are cleared, only the current tab is affected

Testing different states

• Unlicensed or license doesn't support layouts
  • [x] Should show "Available in Pro" button
  • [x] Items should look like the design
• Has license but layout is not installed
  • Should look like design
  • [x] Clicking the Install Now button should install and activate the layout plugin
  • [x] The layout should then appear clickable
  • [x] Clicking the newly-installed layout should activate it
• Has license and layout is installed, but not activated
  • [x] Clicking Activate should activate the layout plugin
  • [x] The layout should then appear clickable
  • [x] Clicking the newly-installed layout should activate it

Browser test

Check appearance, confirm functionality in:

• [ ] Chrome
• [ ] Firefox
• [ ] Safari

---

This PR addresses #1177.

It adds a new dropdown solution with support for icons and descriptions. It also adds a new variable that contains a separate template for the single entry. There is backwards compatibility as the value of the new variable has a fallback to the "old" variable, that is now solely for the multiple entries.

Todo:

• [x] It needs a design (and fixes) for inactive items like the regular selection now has.
• [x] It needs icons for native templates, otherwise fallback to the image it now has.

In the meantime this can be tested and reviewed for what we have now.

💾 Build file (18613244e).

[zackkatz]

Hey @doekenorg, I had a chance to review. I encountered a few issues:

• [x] As we discussed, please only show layouts, not presets, in the dropdown
• [x] There are some strange CSS issues going on for me, including inner scrollbars and modals not being visible. I imagine these are just a matter of scoping the dropdown toggle. Please check out the video. Video two shows that it's not the _view-dropdown.scss file?
• [x] When the dropdown is open, clicking outside of it should close the dropdown

Thanks 👍

[doekenorg]

@zackkatz I looked into your issues with the CSS, but I cannot reproduce this in any browser. It all just works properly.

The only way I can reproduce is to manually set an overflow: hidden of auto on the box that holds your popup. This makes me believe you might have a piece of custom css that I don't have. Whenever possible I'd like to look at it together so we can pinpoint where that comes from. Let me know when you are available.

Fixed the other two things.

[zackkatz]

@doekenorg Hey, can you please update to the new designs?

[doekenorg]

@zackkatz the new designs are in.

• [x] Activate / Install logic works
• [x] Icons are added (also for the plugins if they don't provide the icon themselves)

I'm not sure how buy now is supposed to work. Does that exist in the current settings block. I have not seen that.

[crbdev]

Here are my notes from testing this PR. Besides the issues highlighted below and the things not yet tested, everything else works well.

1. Updating existing Views and creating new Views

Using the combination of DataTables Table for the MEL and List for the SEL causes a warning message to appear when navigating to the SEL on the front end: "The Single Entry layout has not been configured".

Steps to reproduce:

• Create a new View
• Select the DataTables Table View Type
• Go to the Single Entry Layout tab
• Use the View switcher to change the layout to "List"
• Add fields to the Single Entry Layout
• Save the View and view on front-end.

This also happens when editing an existing View I didn't enounter any issues with other layout combinations

2. Installing or activating layouts from inside the View switcher

To be clear, this works! I only have a suggestion. When installing or activating layouts, there is a spinner on the cursor while the layout is installed or activated. However, this spinner disappears if you hover over another layout choice. Other layouts are still clickable while this is happening. So, if you move your cursor, it's not clear that anything is actually happening. Maybe we should make it more clear that something is happening, and/or not have the other layouts clickable while this is process is occuring?

3. The Maps layout

Possibly another discussion but I wonder if we want the Maps layout available at all? After all, it is most useful as a widget. Moreover, for the Single Entry Layout, the "Maps (Default)" option is the same as the List layout as far as I can tell, so we could consider removing it as an option there?

Things not tested

• Unlicensed or license doesn't support layouts
• [x] Should show "Available in Pro" button
• [x] Items should look like the design

[doekenorg]

• [x] Unlicensed support

• [x] Spinner loading state

[zackkatz]

@doekenorg Here's a video showing what Casey wrote.

https://www.loom.com/share/012f831a2579436d9d4ed705d4e9361b

[doekenorg]

@doekenorg Here's a video showing what Casey wrote.

https://www.loom.com/share/012f831a2579436d9d4ed705d4e9361b

Sorry, I forgot to mention, but you need https://github.com/GravityKit/DataTables/pull/221 this Datatables plugin to fix that :-)

[zackkatz]

Ah, that works now! Thanks @doekenorg!

[zackkatz]

@doekenorg We're getting close! Just a few more items:

• [ ] Remove the #gv_switch_view_button button from the Data Source menu. This will take some work; it's in admin-views.js in multiple places.
• [ ] Make sure it works with View Presets
• [x] Clicking the icon should open the dropdown
• [x] When installing a plugin, make the whole .view-dropdown-list-item div have cursor: progress;, not just the pill
• [ ] For me to do: update the Pro Upgrade button to use the upgrade link in format of https://www.gravitykit.com/checkout/?edd_action=sl_license_upgrade&license_id=6659&upgrade_id=5

[doekenorg]

@zackkatz what do you mean with: Make sure it works with View Presets ?

And on the gv_switch_view_button. I understand, but I actually specifically did not touch this to avoid this whole mess of cleaning it up. Especially with the revamp the view editor coming up. I mean, I can invest the time; but it's already a hidden button right?

[rafaehlers]

• [x] Update the word view in this link to View and change the target URL to: https://docs.gravitykit.com/article/400-what-are-the-differences-between-the-view-types

[crbdev]

• [x] Add UTM tracking links to all "Buy Now" buttons

Here's what I would propose, as an example: /?utm_campaign=gk_upsells&utm_source=view-editor&utm_content=diy

UTM sheet for reference https://docs.google.com/spreadsheets/d/15oBygotBeX1TT_5Q-5L9Eslmh8EyWrqU1hn-6CT1i34/edit#gid=0

[doekenorg]

• [ ] Add UTM tracking links to all "Buy Now" buttons

Here's what I would propose, as an example: /?utm_campaign=gk_upsells&utm_source=view-editor&utm_content=diy

UTM sheet for reference https://docs.google.com/spreadsheets/d/15oBygotBeX1TT_5Q-5L9Eslmh8EyWrqU1hn-6CT1i34/edit#gid=0

@crbdev I changed it to https://www.gravitykit.com/pricing/?utm_campaign=gk_upsells&utm_source=view-editor&utm_content=upgrade because the upgrades are combined into a new section with a single "upgrade" button. Is that ok?

[doekenorg]

Found a bug:

• [x] Storing the view can cause a js error that triggers a weird warning in the page.

[crbdev]

On the "Views" page, the "Template" column only shows the layout being used on the multiple entry page, should we update this to reflect the layout being used on both the multiple and single entry pages?

e.g. 👇

[doekenorg]

@crbdev done

If both are the same template, it will just show "Table" or "List" and not "Table / Table".