TOPdesk operator recoloring

Override the colors of TOPdesk operator section, for accessibility purposes.

Go to the TOPdesk Operator Recoloring website for a full explanation and installation instructions!

Purpose

This project provides styles to be injected into TOPdesk by the stylus browser extension. With this you can change the colors of the TOPdesk operator section to aid with dyslexia, color blindness, contrast sensitivity, etc.

There is no intent to achieve completeness, let alone prettyness, the goal is to help users with visual impairments that may be alleviated by color adjustments.

Developing

Running locally

1. If using Chrome/Chromium grant stylus access for local files.
   1. Right-click the Stylus icon, click Manage extension.
   2. Enable the Allow access to file URLs switch.
2. Click the stylus icon and click Manage to open the Style manager.
3. Run npm run dev to trigger a build and enable watch mode.
4. Drag and drop the docs/themes/topdesk-operator-recoloring.development.user.css file on the Style manager window.
5. In the Local test recoloring window that has popped up, check the Live reload after installation box just below the Install style button.
6. Click the Install style button.

The local recoloring will now apply to your TOPdesk environment.

Finally, two points of note:

1. Make sure any other recoloring themes are off to prevent interference. You can quickly enable/disable a style in the Stylus dropdown when a TOPdesk environment is loaded.
2. Make sure to enable the Support custom colors user setting in TOPdesk. Some styling requires the extra attributes in the HTML to be able to apply correctly.

Releasing a user style update

The user style css files for each theme are generated during the build step. This step is automatically executed during deployment on GitHub after every push.

For any kind of update to the styles, update the version number in the package.json file. This number is injected in the user style files, allowing Stylus to update the style either by user request or in the automated update cycle.

A new version number will also be picked up by the deployment script and that commit will be tagged with the version number in Git.

Updates to the site are not versioned.

Homepage

The homepage is a static page hosted by github pages, all the source files for the homepage are located in the site folder.

The actual website is generated by a GitHub action, but you can also build it locally with npm run build. You can then find the files in the docs folder.

Note that the homepage also comes with worker.js, which calculates a filter value for a given rgb value. This calculation is moved off the main thread as it can take a while for the calculation to arrive at a suitable answer.

Forcing an update of the user style

When a new version becomes available Stylus will automatically update it after a while.

If you do not want to wait for the automated check to run, you can force an update:

• Click on the Stylus extension icon in the browser bar, and click the Manage button in the popup.
  • This will open a new tab with the overview of all the installed styles.
• Click the Check all styles for updates button under Actions.
  • When it has found updates, an Apply all updates button will appear underneath, and the overview will change to show only the styles for which it has found updates.
  • If the update is very recent, Stylus may not yet be able to find it.
  • If Stylus can't find it after 5 minutes, it is likely that a syntax error is present in the user.css. updates.
• Click the Apply all updates button that appeared underneath the Check all styles button,
  • Alternatively, use the Install update down arrow icon in a style row to update only that style.