Module Visual Page Selector (commercial page picker module for ProcessWire)

[kongondo]

Visual Page Selector version 003  (released (07/07/2017)

Happy to announce that the latest release of Visual Page Selector is now available for Download/Purchase.

Documentation is also complete!

This is a major update. Visual Page Selector can now be used as a normal but enhanced page field! There are 2 views each for inputfield (page edit) and the page selector modal. These can be combined to suit your workflow as explained in the docs here.

As a normal page field, you can opt to view the selected pages as a simple list and add pages to your page field using a ProcessWire Lister modal. This opens so many possibilities, including nuanced differentiation of pages to add to your page field, for example, making use of Lister columns and other page properties.

For those that want to use Visual Page Selector as a 'one-page-per-image' solution, you can carry on as normal, with the added benefit of different view combinations

In page edit, selectable pages are not loaded directly in the Inputfield allowing you to have hundreds of thousands, nay, unlimited numbers of selectable pages without experiencing any slowdowns (@note: What you see in the screenshot below is not AsmSelect or PageAutocomplete; just a custom list that blends in with the rest of ProcessWire).

Please note that there were a few inevitable changes  to the field settings. The Lister settings are now separated into individual settings. In addition, there was a typo in the 'vps-delete-page' permission. That should be 'vps-delete-pages'. Due to these, if upgrading from version < 3, please test thoroughly and fix any brokenness before using in production. If you need any help please let us know.

Changelog

1. Lister view for an enhanced page field experience.
2. Combine different views as you wish.
3. Faster Inputfield load times in page edit.
4. UX changes.

Lister and list view demo

Edited July 9, 2017 by kongondo

[elabx]

The lister Inputfield integration appeared only in my dreams, great, great addition!  Does it work with a ListerPro?

[kongondo]

On 2017-7-7 at 2:59 PM, elabx said:

Does it work with a ListerPro?

It should, though I don't know how to make it switch to ListerPro....not sure it would be automatic.

[szabesz]

Hello @kongondo

I have a VPS 003 question: I use VPS to realize a (one-to-one) one-to-many relationship (in Thumbs View), in which case it is overkill to use the current "Click Select > Add Page Dropdown > Apply Action > Close Button". It would be great to have this one instead: "Click Select"

If it was possible to choose a "Quick Add/Remove" option then I could save a lot of time. Just by clicking on the image the page should be added and the modal window should be closed automatically.

What do you think? Could you possibly add this feature?

Edited August 6, 2017 by szabesz
one-to-one changed to one-to-many

[kongondo]

11 hours ago, szabesz said:

If it was possible to choose a "Quick Add/Remove" option then I could save a lot of time. Just by clicking on the image the page should be added and the modal window should be closed automatically.

What do you think? Could you possibly add this feature?

Yes, it should be possible to add a Quick Add feature within the modal. However, how would remove (from within the modal) work (i.e., how would you indicate you want to remove an image/page)?

[szabesz]

"Select All / click select" + Trash Selected icon seems to be removing the page being referenced. Besides, when in this "one-to-many mode", selecting a different image (i.e. Page) could overwrite the currently selected page. I don't know if I want to remove the page from the modal itself. If it can be removed with the "Select All / click select" + Trash Selected icon, then there is no need to open the modal in the first place. Or am I misunderstanding something?

Why is it called "Trash Selected"? Is it actually using the ProcessWire's Trash in some way or just removing the page reference?

BTW, I read your docs but things are still a bit fuzzy in my head, I need more time to test all the features the module has to offer.

Edited August 6, 2017 by szabesz
one-to-one changed to one-to-many

[kongondo]

1 hour ago, szabesz said:

Besides, when in this "one-to-one mode", selecting a different image (i.e. Page) could overwrite the currently selected page.

Isn't that how single page fields work ?

 

1 hour ago, szabesz said:

I don't know if I want to remove the page from the modal itself. If it can be removed with the "Select All / click select" + Trash Selected icon, then there is no need to open the modal in the first place

Not in all cases.  Imagine a case where you are already in the modal and you realise you have some images saved in the page field that shouldn't be there. Rather than close the modal and remove them, you can easily remove them from within the modal and add the images you want. It is just there for convenience.

1 hour ago, szabesz said:

Why is it called "Trash Selected"? Is it actually using the ProcessWire's Trash in some way or just removing the page reference?

No, it is not using ProcessWire's Trash. It is removing the page reference. Does it sound misleading? Remove Selected maybe?

[szabesz]

On 7/31/2017 at 1:27 PM, kongondo said:

On 7/31/2017 at 12:07 PM, szabesz said:

Besides, when in this "one-to-many mode", selecting a different image (i.e. Page) could overwrite the currently selected page.

Isn't that how single page fields work ?

Yes but VPS does not support Single page, does it? If I set it to

• Single page (Page) or boolean false when none selected, I get : Error retrieving results: [object Object]
• Single page (Page) or empty page (NullPage) when none selected, I get: Nothing added yet.

Only Multiple Pages works, which I do not need in this case. However, I need VPS to pick Lego parts both visually and by their Part ID.

On 7/31/2017 at 1:27 PM, kongondo said:

Imagine a case where you are already in the modal and you realise you have some images saved in the page field that shouldn't be there.

When using one-to-many relationship, there should be no other images, should there?

To better explain what I'm trying to do, here is a screengrab:

[...image was outdated and big, so I removed it...]

I have "Parts" but I store "Set Parts" in a Page Table. Part pages store the common properties like image, year of release and title. Set Part pages store the given LEGO Set specific properties like quantity, color and the reference to the Part in question.

[kongondo]

22 hours ago, szabesz said:

Yes but VPS does not support Single page, does it? If I set it to

• Single page (Page) or boolean false when none selected, I get : Error retrieving results: [object Object]
• Single page (Page) or empty page (NullPage) when none selected, I get: Nothing added yet.

That's a bug. Working on fix now. Thanks for reporting.

22 hours ago, szabesz said:

When using one-to-one relationship, there should be no other images, should there?

Good point. I'll rewrite the markup to be more contextual. So, when using a single page field:

• select/unselect all will not show
• make add image/page configurable so that it will either do nothing (and let you know page field not empty) or replace the image/page in the field already
• Make apply action contextual + configurable to show/not show/add page/image and close modal, etc.

I'll need to think these through so it may be a while before I am ready

[szabesz]

5 minutes ago, kongondo said:

I'll need to think these through so it may be a while before I am ready

Thank you in advance!

23 hours ago, kongondo said:

No, it is not using ProcessWire's Trash. It is removing the page reference. Does it sound misleading? Remove Selected maybe?

"Remove Selected" sounds good to me.

[Macrura]

I think it will be important for VPS to support image fields that are multiple;
i don't quite get why there is a requirement that the image field must be a single image.

Here is one scenario where that restriction fails:

- You have YouTube & Vimeo Thumbnail grabber, getting poster image for a video. This module requires that the image is NOT single (must support multiple images).
- You want to setup a VPS field to choose videos, however it won't work because the VPS requires the thumbnail field to be single image.

I have a lot of other situations where I was hoping/assuming the module would use the first image when image field is multi, so this could be a major problem for how i was planning on using it.

If you can modify the module to just go ahead and use the first image for these cases, that would solve this.

Another important feature will be to allow editing of the item by clicking on it – i didn't see an option for that, let me know if that is possible to enable.

Next, when in lister mode, there is still an edit button on the lister which could really confuse clients and also create a crazy modal view (since the button include the whole admin theme and not just the edit screen...

Next - how do you preconfigure the columns for the lister, or can you specify to use a lister pro that is already configured? Somewhat confused about that. I need to have specific columns for the lister view, that will apply to all users.

Thanks!
 

[szabesz]

On 05/08/2017 at 2:55 AM, Macrura said:

i don't quite get why there is a requirement that the image field must be a single image.

Currently I am in a situation when a PageArray does not fit the bill:

By the way:

On 30/07/2017 at 11:56 PM, szabesz said:

one-to-one relationship

I kept talking about "one-to-one" when actually what I need is "one-to-many", meaning I need a Single Image (one) selected by VPS from many. I do not need many-to-many as I deliberately want to simplify things.

[kongondo]

@Macrura

Thanks for the purchase. Sorry for the late reply. Been working on the next release which addresses all the issues raised.

On 05/08/2017 at 1:55 AM, Macrura said:

I think it will be important for VPS to support image fields that are multiple;

Done in next release.

On 05/08/2017 at 1:55 AM, Macrura said:

i don't quite get why there is a requirement that the image field must be a single image.

Me neither! I couldn't remember why I set it up that way! I think I confused that to mean 'allow more than one image from one page to be visible as selectable'

On 05/08/2017 at 1:55 AM, Macrura said:

I have a lot of other situations where I was hoping/assuming the module would use the first image when image field is multi,

Yep, that's how it is set up now. If image field in the selectable page is a multi-image field, grab the first image. If it is a single image field, grab that one image. In essence, VPS will always grab the first image.

On 06/08/2017 at 6:11 PM, szabesz said:

Currently I am in a situation when a PageArray does not fit the bill:

The issue is about the image field in the selectable pages. VPS should (and now does) work with both single and multi-image fields. Like @Macrura explained, there will be cases where you want to reuse an image field for other needs. Or imagine a case where you wanted to show related images in the frontend. For instance, for a real estate website, you may want to have different photos of one property:

1. In ProcessWire, create a photo page with a multi images field for your property for sale.
2. Upload various photos to the multi images field on that page, making sure that the first image is of the front of the house, for instance.
3. Make your property page selectable in the page field you are using with VPS.
4. Edit a page with this page field that is using VPS
5. In the selectable pages modal in VPS, for this particular property photo page, you will see only ONE image; the first image. That should be enough for editors to know what image/selectable page to select. Underneath the hood, we/they know they are just adding a reference to the photo page (in the page field).
6. In the frontend end, when displaying the page with the page field in #4, since the page field has a reference to our property's photo page, we can now show all the photos of our property that we uploaded in #2 . 

Sorry for verbosity but hope this explanation makes things clearer (not in the least for me!). As you can see, this should not affect the current workflow of one page for one image. Your selectable page with a single image field will still work as is. You will see its one image in the modal for selection and will be able to add it to your page field. 

Speaking of which...

On 31/07/2017 at 0:58 PM, szabesz said:

but VPS does not support Single page, does it

This is now fixed. VPS will work with both single and multi-page fields. In summary, you can have:

1. Selectable page with a Single image field to add to a Single page (VPS) field
2. Selectable page with a Single image field to add to a Multi page (VPS) field
3. Selectable page with a Multi image field to add to a Single page VPS field
4. Selectable page with a Multi image field to add to a Multi page VPS field

The most important thing to remember is that in the selectable pages modal, VPS will always show one image per selectable page. It doesn't care what lies underneath. This means that you can even have a selectable page with with several image fields and if those image fields are specified in VPS image field settings, VPS will always return the first found image in the first named image field. It means that if one image is deleted or images are reordered or one image field removed or the named order of images in VPS field changes, VPS will always get the next available of the remaining images.

On 05/08/2017 at 1:55 AM, Macrura said:

Another important feature will be to allow editing of the item by clicking on it – i didn't see an option for that, let me know if that is possible to enable.

Done! I believe this has been requested before by @Robin S but it slipped under the radar. You can now configure VPS to separately allow editing of both selectable and selected pages (i.e. both in the modal and those already in the page field) for all views (Modal: Thumbs and Lister; Page Edit: Thumbs and List). Default is not to allow editing. Page-editable access is also respected.

On 05/08/2017 at 1:55 AM, Macrura said:

Next, when in lister mode, there is still an edit button on the lister which could really confuse clients and also create a crazy modal view (since the button include the whole admin theme and not just the edit screen...

Sorted. You now see a clean modal view with just the edit screen as well as a 'Back' button to take you back to the listings/thumbs of all items. As said above, the edit button will only be visible if you've allowed editing in modal window. If using thumbs view in the modal, and you've allowed editing of selectable pages in the modal, the selectable pages' titles will be clickable, taking you to the edit screen of the page. If a page is not editable, they will see a normal/unclickable title.

On 05/08/2017 at 1:55 AM, Macrura said:

how do you preconfigure the columns for the lister,

In the field settings, under VPS: Modal settings, in the Page Selector View option, if you have Lister view selected, you will see more options under VPS: Lister Settings. In particular, see Limit Selectable Fields/Columns and Disallow Columns. Please see this section of the docs.

On 05/08/2017 at 1:55 AM, Macrura said:

can you specify to use a lister pro that is already configured

No you can't, at least not from VPS side. 

I'm hoping to release version 4 of VPS either today or tomorrow. 

Edited August 9, 2017 by kongondo

[Macrura]

wow awesome, thanks so much !!

[kongondo]

Visual Page Selector version 004  (released (15/08/2017)

Happy to announce that the latest release of Visual Page Selector is now available for Download/Purchase.

Changelog

1. Add and close option: Please note this behaves differently if VPS used in a single page field vs. a multi page field as well as if other options are enabled such as 'Delete Images' and 'Delete Pages' or if in a Lister view in the modal. In a single page field if these 'deletes' are disabled, just clicking a page thumb in thumbs view will add the page and close the modal if this option is enabled. In other cases, the modal will be closed when the Add Page option is selected and the Apply Action button is clicked. Please also note the value of the submit button can change to 'Add' depending on the context.
2. Ajax refreshing of Inputfield! No more page reloads once you apply an action in the modal. If you add or remove a page or delete it or its image, the Inputfield refreshes automatically. It also listens to changes made to pages in the page field if editing (in a modal @see below) a page in modal. Please note that direct Lister view actions such as unpublish, trash, etc are currently not captured in this feature. Only Adding/Removing Lister view pages via VPS Apply Actions are covered.
3. Edit selectable and selected pages: You can configure options to edit selectable options when in the modal or selected pages already in the Inputfield (which will open a modal). Any changes you make to the selected page will be reflected in the Inputfield on save. You will see them when you close the edit modal.
4. Support for both single and multi image fields. Please note that if you Delete and Image in a selectable or selected page, VPS will check for the next available image in the named image field(s) (named in VPS settings). If an image is found, it will be returned. Otherwise, the page will be removed from the page field. This only applies to all cases expect the combination of a List view page edit and Lister modal view where no image is required.
5. Support for both single and multi page fields
6. Bug fixes

Apologies for the delay. Hit a couple of snags that needed to be resolved. Please test thoroughly in a non-production server first. I see a couple of JS errors in the console but they seem to be related to ProcessPageLister or JqueryCore.js. Have not been able to confirm what's causing them. The module works fine though.

Please note: Docs not yet updated to reflect above changes.

Edited August 15, 2017 by kongondo

[Macrura]

you. are. awesome.

[kongondo]

Renewals and Resend Links

Hi,

Renewal and resend links pages for Visual Page Selector have been added. Use renewals if you wish to renew a Visual Page Selector order whose subscription has expired (1 year). Resend are for orders that are yet to expire. Use this if you can't find or didn't get the confirmation email sent after your purchase.

[Robin S]

Hi @kongondo,

I purchased VPS this afternoon and have been having an explore of it. As always with your modules, it's impressive stuff!

A question: is it possible to customise the columns that are shown in the inputfield list view? So if we're not using Tags but want to show some other custom field from the page can we show that? It would be really useful if we could.

I want to give some feedback on some aspects of the appearance and workflow, and I mean this to be constructive so I hope it comes across that way. It's awesome what this module can do and it's obvious how much work you've put into it. It's just lacking a bit of the polish and attention to detail that I would expect from a pro/commercial module at this price point.

1. It would be nice if the Process module installed the Inputfield module ("installs" option in getModuleInfo) so it was just a one-step installation process.

2. Rather than users needing to type the name of the image fields used for thumbnails, could you change to an AsmSelect that selects from existing image fields? Also, the note here needs updating to reflect that image fields allowing more than one image can now be used with VPS.

3. If the option to allow users to edit pages from the modal is enabled, the page edit view replaces the add/remove lister and there is no way to return to it. I'm wondering if this option is needed actually - I couldn't think of many cases where you would want to allow page editing within the modal that has been opened to add/remove pages from the inputfield.

4. In the inputfield list view, the Description and Tag columns do not reflect changes to those fields made in the page modal edit (the inputfield reloads, but the columns don't update).

5. The spinner is cut off in the modal.

6. The tab layout in the modal is a bit messed up.

7. The position of the actions select/button looks off too - it's crashing into the grey bar above. Also, it's not possible to interact with the select because it is behind the WireTabs <ul>.

8. In modal edit view, some text is obscured behind the WireTabs.

9. The thumbnail appearance and layout could be improved IMHO. 

 

a) Show the thumbnail uncropped, so the aspect ratio of the image can be seen.

b) Remove the rounded corner styling - it can be misleading (what if you had an image that actually had rounded corners), and it isn't used consistently (list view thumbnails are not rounded).

c) Use the core default thumbnail dimension of 260px height and unconstrained width. In most cases this will also make the inputfield/modal load faster because the thumbnail variation will already exist from the time the image was uploaded. The existing thumbnails are too small.

d) It's a tiny bit disconcerting seeing the thumbnail scale down when the pink "selected" border is applied. Perhaps consider a different CSS styling technique such as applying the border to a transparent element in front of the image.

e) The thumbnail layout breaks at some widths. Also the thumbnail label line height is too low.

f) Let the thumbnail container be the natural width of the thumbnail. So all the thumbnails just float left against each other (with some white space around them), similar to the appearance of the core Images field.

I tweaked the VPS code a bit to get this:

The thumbnail label could potentially be removed too, and shown in a tooltip on hover (I think in most cases users select an image from scanning the thumbnails rather than the labels). Or add an option for this.

10. If pages are removed from the inputfield (but the page is not yet saved), this is not reflected when the modal is opened. The removed pages are still shown with the border/opacity styling of pages that are added to the inputfield. I guess it might be difficult to avoid this.

11. In the modal, if the "remove" action is performed on a page that is not added or the "add" action is performed on a page that is already added, the error notice could be less cryptic:

There is also an overflow issue possible here, and the appearance of the notices are somewhat ugly in general: unnecessary white border and border radius, unnecessary background colour change on hover, the text needs some padding.

12. Could the actions in the modal window (add, remove, etc) be smarter to streamline the workflow? For the lesser-used actions (delete page, delete image from page) the select dropdown is fine, but it is a bit awkward for the frequent actions of adding and removing pages. How about this:

VPS knows whether each page is currently added or not (hence the different styling). So for pages that are not added clicking the thumbnail marks the page for adding (a plus icon or similar is shown in the corner of the thumbnail). And for pages that are already added clicking the thumbnail marks the page for removal (a cross icon is shown).

13. Some very minor appearance things:

Inconsistent text size and divider appearance for the same controls in the modal vs the inputfield.

The default focus style looks awkward on the Add Pages button after the modal closes.

Using a large black h3 for the "Nothing added yet" text is a bit strong.

 

I understand if you think some of these issues are trivial, but the truth is I wouldn't be entirely happy having my clients use this module in it's current form. But with a bit of polish it will be amazing, and I want to thank you for developing it.

 

[szabesz]

3 hours ago, Robin S said:

The thumbnail label could potentially be removed too, and shown in a tooltip on hover (I think in most cases users select an image from scanning the thumbnails rather than the labels). Or add an option for this.

Option please

[kongondo]

On 10/22/2017 at 4:24 AM, Robin S said:

I purchased VPS this afternoon and have been having an explore of it.

Thanks for the purchase @Robin S,

I'll have a look at the issues you've raised and respond here later.

[kongondo]

On 22/10/2017 at 4:24 AM, Robin S said:

A question: is it possible to customise the columns that are shown in the inputfield list view? So if we're not using Tags but want to show some other custom field from the page can we show that? It would be really useful if we could.

Currently no. I will look into this, maybe start with text fields.

 

On 22/10/2017 at 4:24 AM, Robin S said:

1. It would be nice if the Process module installed the Inputfield module ("installs" option in getModuleInfo) so it was just a one-step installation process.

In the code, I see I had this previously. I cannot remember why I commented it out; will look into it.

 

On 22/10/2017 at 4:24 AM, Robin S said:

Rather than users needing to type the name of the image fields used for thumbnails, could you change to an AsmSelect that selects from existing image fields?

Good idea; Will add to next version

On 22/10/2017 at 4:24 AM, Robin S said:

Also, the note here needs updating to reflect that image fields allowing more than one image can now be used with VPS.

Thanks for catching this. Will amend.

 

On 22/10/2017 at 4:24 AM, Robin S said:

If the option to allow users to edit pages from the modal is enabled, the page edit view replaces the add/remove lister and there is no way to return to it. I'm wondering if this option is needed actually - I couldn't think of many cases where you would want to allow page editing within the modal that has been opened to add/remove pages from the inputfield

Sorry, I don't understand this one. Please clarify, an illustration maybe? Thanks.

On 22/10/2017 at 4:24 AM, Robin S said:

In the inputfield list view, the Description and Tag columns do not reflect changes to those fields made in the page modal edit (the inputfield reloads, but the columns don't update).

They do, in my case. See GIF below. I've tested in PW 2.7. Will need to do further tests in PW 3.x

 

On 22/10/2017 at 4:24 AM, Robin S said:

The spinner is cut off in the modal.

Looks fine here. Must be some CSS issue. Will investigate.

 

On 22/10/2017 at 4:24 AM, Robin S said:

The tab layout in the modal is a bit messed up.

Looks fine to me (in different resolutions); see below. Must be your browser. What browser are you using?

 

On 22/10/2017 at 4:24 AM, Robin S said:

The position of the actions select/button looks off too - it's crashing into the grey bar above. Also, it's not possible to interact with the select because it is behind the WireTabs <ul>.

Ditto. Strange. I'm not seeing that here (see my demo) nor have any other users reported this; you are the first one. Must be your browser, so let's start from there.

On 22/10/2017 at 4:24 AM, Robin S said:

In modal edit view, some text is obscured behind the WireTabs.

Ditto. See the screenshot below from ProcessWire 3 Test. 

On 22/10/2017 at 4:24 AM, Robin S said:

Show the thumbnail uncropped, so the aspect ratio of the image can be seen.

I'll have to have a think about this one. My guess is that the editor already know the aspect ratio of that image? 

On 22/10/2017 at 4:24 AM, Robin S said:

Remove the rounded corner styling - it can be misleading (what if you had an image that actually had rounded corners), and it isn't used consistently (list view thumbnails are not rounded).

I think this is a matter of (stylistic) taste. Absence of rounded corners in Thumbs view Table (Thumbs view has two layouts; grid and table; List view is the other view without images) was just an oversight. I'll have a think about this one.

 

On 22/10/2017 at 4:24 AM, Robin S said:

Use the core default thumbnail dimension of 260px height and unconstrained width. In most cases this will also make the inputfield/modal load faster because the thumbnail variation will already exist from the time the image was uploaded. The existing thumbnails are too small.

I agree with the idea about making the modal load faster, although I would add, 'initially load faster' since once thumbs are created, they do not have to be recreated. As for 260px high thumbs, unless I am mistaken, that's a ProcessWire 3 feature. I have to take into account prior versions of ProcessWire. Meaning, they would still need their thumbnails to be created at 260px, so nothing gained for them. I have no empirical evidence, but it seems to me, PW 2.x users are still the majority. In addition, given that we have VPS in use out there already using 100px high thumbs, switching to 260px high thumbnails will lead to some disruption. As for too small, that is also a matter of taste? I don't like large thumbs . Incidentally, ProcessWire 2.x has been using 100x100 thumbs. Maybe if we made this configurable? 

 

On 22/10/2017 at 4:24 AM, Robin S said:

It's a tiny bit disconcerting seeing the thumbnail scale down when the pink "selected" border is applied. Perhaps consider a different CSS styling technique such as applying the border to a transparent element in front of the image.

Disconcerting? I'm not sure how to respond to this one to be honest .

On 22/10/2017 at 4:24 AM, Robin S said:

The thumbnail layout breaks at some widths. Also the thumbnail label line height is too low.

RE layout, I will do further tests.  Will also look into the  label line height.

On 22/10/2017 at 4:24 AM, Robin S said:

Let the thumbnail container be the natural width of the thumbnail. So all the thumbnails just float left against each other (with some white space around them), similar to the appearance of the core Images field.

Will look into this, thanks.

On 22/10/2017 at 4:24 AM, Robin S said:

The thumbnail label could potentially be removed too, and shown in a tooltip on hover (I think in most cases users select an image from scanning the thumbnails rather than the labels). Or add an option for this.

Good idea. Will make it configurable, thanks.

 

On 22/10/2017 at 4:24 AM, Robin S said:

If pages are removed from the inputfield (but the page is not yet saved), this is not reflected when the modal is opened. The removed pages are still shown with the border/opacity styling of pages that are added to the inputfield. I guess it might be difficult to avoid this.

Yes, there is no easy way around this. Users will just need to be taught that hitting save will implement the changes they've made.

 

On 22/10/2017 at 4:24 AM, Robin S said:

In the modal, if the "remove" action is performed on a page that is not added or the "add" action is performed on a page that is already added, the error notice could be less cryptic:

I'll have a think.

On 22/10/2017 at 4:24 AM, Robin S said:

There is also an overflow issue possible here, and the appearance of the notices are somewhat ugly in general: unnecessary white border and border radius, unnecessary background colour change on hover, the text needs some padding.

Again, I haven't seen the overflow here, nor text cramped against the margins. I understand border radius are not everyone's cup of tea. I tried to replicate ProcessWire's System Notification notices. Apart from the white border, they are virtually identical, in my opinion. 

 

On 22/10/2017 at 4:24 AM, Robin S said:

Could the actions in the modal window (add, remove, etc) be smarter to streamline the workflow? For the lesser-used actions (delete page, delete image from page) the select dropdown is fine, but it is a bit awkward for the frequent actions of adding and removing pages. How about this:

VPS knows whether each page is currently added or not (hence the different styling). So for pages that are not added clicking the thumbnail marks the page for adding (a plus icon or similar is shown in the corner of the thumbnail). And for pages that are already added clicking the thumbnail marks the page for removal (a cross icon is shown).

I'll look into this.

 

On 22/10/2017 at 4:24 AM, Robin S said:

Inconsistent text size and divider appearance for the same controls in the modal vs the inputfield.

Good catch. Will address this in next version.

On 22/10/2017 at 4:24 AM, Robin S said:

The default focus style looks awkward on the Add Pages button after the modal closes.

You are probably going to guess what I am about to say. I can't see that here. So, browser issue?

On 22/10/2017 at 4:24 AM, Robin S said:

Using a large black h3 for the "Nothing added yet" text is a bit strong

Erm...what would you suggest?

On 22/10/2017 at 4:24 AM, Robin S said:

I understand if you think some of these issues are trivial, but the truth is I wouldn't be entirely happy having my clients use this module in it's current form.

I see where you are coming from. I try to do my best to make sure what I put before clients works well but also looks nice. It seems some issues are browser specific. Others are a matter of taste, but certainly not trivial. Thanks for the detailed feedback.

[szabesz]

5 hours ago, kongondo said:

On 10/22/2017 at 5:24 AM, Robin S said:

Could the actions in the modal window (add, remove, etc) be smarter to streamline the workflow? For the lesser-used actions (delete page, delete image from page) the select dropdown is fine, but it is a bit awkward for the frequent actions of adding and removing pages. How about this:

VPS knows whether each page is currently added or not (hence the different styling). So for pages that are not added clicking the thumbnail marks the page for adding (a plus icon or similar is shown in the corner of the thumbnail). And for pages that are already added clicking the thumbnail marks the page for removal (a cross icon is shown).

I'll look into this.

@kongondo Please do not forget my use case either

[kongondo]

26 minutes ago, szabesz said:

Please do not forget my use case eithe

Sure .

[Robin S]

@kongondo, thanks for the responses.

16 hours ago, kongondo said:

Sorry, I don't understand this one. Please clarify, an illustration maybe?

Note how in the modal the Edit view replaces the Add Pages view, with no option to return to Add Pages.

16 hours ago, kongondo said:

They do, in my case.

Here's what I see when doing the same thing.

16 hours ago, kongondo said:

Looks fine to me (in different resolutions); see below. Must be your browser. What browser are you using?

Chrome, Windows. This is on a clean PW 3.0.80 installation with VPS v0.0.4 and no other modules. I notice your screen capture shows admin theme Reno. You checked with the default admin theme?

16 hours ago, kongondo said:

I have no empirical evidence, but it seems to me, PW 2.x users are still the majority.

I would have thought that nearly all new site developments use PW3. I know I have never contemplated building a new site with the old <= v2.7. And most buyers would be using VPS for new projects rather than retrofitting it into old projects that they are not willing to upgrade, wouldn't they?

As for the visual details: some people are passionate about this stuff, some people can't see what the fuss is about ("It still works, doesn't it?"). To me, VPS sort of looks and feels like a product that is at a draft stage. I don't mean disrespect by this and I know a lot of work has gone into it, I just was expecting a bit more polish seeing as VPS is presented as a professional commercial product.

[kongondo]

1 hour ago, Robin S said:

As for the visual details: some people are passionate about this stuff, some people can't see what the fuss is about ("It still works, doesn't it?").

@Robin S, I don't know what you mean by this. Are you implying that I don't care about the visual details of my modules as long as they work? Given that this is a commercial product, it could be insinuated that I'm just after the buck?