Feature: Admin panel redesign

[jacques42]

Prerequisites checklist

• I have read the contributing guidelines.

What is the purpose of this pull request? (put an "x" next to an item)

• New feature

What changes did you make? (Give an overview)

A new admin panel setting General -> Admin Options now allows to choose between Basic View, Advanced View, Expert View.

Every entry as defined in file lib/configsetup.inc.php can now have an optional new key view defined, to identify which admin view the particular entry will be shown. This applies for both panel entries and settings entries. Valid values are:

• 'view' => 'basic'
• 'view' => 'advanced'
• 'view' => 'expert'

Depending on the which view is chosen through above mentioned new setting, config options will be shown and be accessible in the panel or not. The logic works inclusive, from basic to expert view level. This means options which are tagged as

• 'basic' are also visible in advanced and expert view
• 'advanced' are also visible in expert view
• 'expert' are only visible in expert view

The following example defines a new panel collage, which is visible in the basic view, as well as two config entries in this panel. First one is visible in the basic view, the second one is visible only in the advanced view.

...
    'collage' => [
        'view' => 'basic',
        'use_collage' => [
            'view' => 'basic',
            'type' => 'checkbox',
            'name' => 'use_collage',
            'value' => $config['use_collage'],
        ],
        'collage_layout' => [
            'view' => 'advanced',
            'type' => 'select',
            'name' => 'collage_layout',
            'placeholder' => $defaultConfig['collage_layout'],
            'options' => [
                '2x2' => '2x2',
                '2x4' => '2x4',
                '2x4BI' => '2x4 + background image',
            ],
            'value' => $config['collage_layout'],
        ],
...

For backward compatibility, the new key 'view' currently is optional and if it does not exist, it defaults to 'basic'. This may change as the feature evolves.

The guiding principles for to map any config item to a view should be along the following:

• Basic View: Show config elements relevant for most simple and most common use-case. Default settings are largely sufficient. Maybe 20-30 % of all config options. The focus are entry-level user, who start to get their feet wet.
• Advanced View: Features and elements used more often - i.e. Printing, Frames for Pictures, Chroma-Keying, etc. - maybe around 50% of all options on top. This should be sufficient for most of the users.
• Expert View: Dev-Setting, Data folders, Commands, etc. - the remaining 20-30% of options are mapped to this view. Geeks right here.

Is there anything you'd like reviewers to focus on?

If you want to try out this new feature, for now focus on the admin panel for 'collage', which is the only one converted so far.

The overall intent is to allow new users to more easily find their way around in the admin panel and not get confused by all the advanced and expert options. More to come and feedback welcome.

[jacques42]

I ended up in a complete redesign of the admin panel, hopefully for the better. In it's current version it is fairly usable.

I've done some basic testing on iOS 8, Win 8 (Firefox) and Android 11 (Firefox) but really would appreciate and benefit some feedback and tests on different platforms (PC, iOS, Android), browsers and their versions and screen sizes (tablets, mobiles, etc.)

In order to be able to access all settings, change the admin panel view to Expert View - in section General, right at the top.

Hover over the setting description to see the manual text being shown. On touch (Android tablet) a short touch simulates hover-over but this may not be an available feature on all touch screens.

Please note that the reset button is not yet functional, please manually remove my.config.inc.php in case you need to. Also, the localization (translation) of the toggle button text is not yet implemented. And there might be bugs I have not spotted so far.

To test, please clone the feature branch and run the usual setup commands manually:

git clone  https://github.com/andi34/photobooth andi34
cd andi34
git checkpout feature/adminpanel-views
git submodule update --init
yarn install
yarn build
chown -R www-data:www-data ../andi34

Thank you for some testing and please let me know. You can also reach me on our Telegram channel.

[jacques42]

Just finalized a few fixes / changes. From my perspective this now is good to go for merge into dev. Let me know if there is other feedback, please keep testing :-)

[andi34]

Thanks a lot!

I've successfully tested this, great thing for testing stuff before updating the running system:

Open a console as user pi and cd to your desktop and enter the following:

git clone https://github.com/andi34/photobooth
cd photobooth
git fetch origin
git checkout origin/feature/adminpanel-views
git submodule update --init
yarn install
yarn build
php -S 127.0.0.1:8080 -t .

You can now access Photobooth via http://localhost:8081

Port 8081 can be changed, only note that Port 80 only works as root!

[andi34]

Ignore comments for now. Have to check again on my Laptop, on my Desktop there's no problem.