This is based on the assets folder of our i2b2 v 1.7.09c
If the bookmarklet doesn't show up, view the raw source of
this document or open your local copy of bookmarklet_test.html (same folder
as this) in a browser and drag the bookmarklet to your bookmakr bar). When
you navigate to an i2b2 site, click the bookmarklet. It will put a button in
the top-right that says Rebrand!. When you click it you will see the
proposed changes go into effect instantly. You will need to click it a
second time after you log in. Everything gets reset to normal if you reload
the page.
Again, it won't work to click the link on this page. It has to be dragge to your browser's bookmarks bar, and your browser needs to be on an i2b2 webpage and only then does clicking it do anything.
bookmarklet
Note: The point of this bookmarklet is to allow testing out modified css
and graphics on a production server with zero risk to the server. However, to
do this, a rather complicated process is followed compared to the drop-in
replacement you will do when ready to deploy the re-branded website for real.
Therefore, not everything behaves exactly as it will on your server. For
example the little + and | folder decorations in the left panels will
disappear when you click Rebrand!. This is not expected to happen in a local
deployment.
If you're not at CIRD, make a fork of this repo and then clone it.
You will also need to install less as follows (only the first time):
npm install less -g
Each time you start working in a fresh bash session you should run the following command:
source ./setup_for_editing.sh
The project-specific bash commands below are only available after you have sourced this script.
mktest
This will convert all the less files back to css but with whatever changes you
made to the variables in global.less. These css files will have absolute
URLs for any images that are covered by this repo, and will be referenced by
the bookmarklet
mkless
You usually shouldn't need to do this. It's mostly for upstream updates to
i2b2 or for adding files that are not yet covered by this project
(e.g. js-ext).
mkdeploy
It converts less back to css but without absolute URLs, and copies over the
images from webclient.test. Before doing these things it first calls
mkless.
Copy all contents of this repo to your webclient directory, for example assuming
you checked this out into /tmp and your i2b2 webclient is installed in
/var/www/html-FOO/webclient you would do this:
cp --backup /var/www/html-FOO/webclient /var/www/html-FOO/webclient_backup
cp -r /tmp/deb_dw_rebrand/. /var/www/html-FOO/webclient
To roll back your changes you could recursively copy webclient_backup back in its place.
Only edit the image files in the webclient.test directory.
Everywhere else they might get ignored or overwritten. If an image is not added to the global.less
you need to do so if you want it to be visible when you're testing remotely.
If you need to edit colors, do it in global.less.
If want to make changes other than colors and images, please talk to somebody who understands lessc.
It would probably be a good idea to abstract whatever styling changes you need to make into global.less rather
than editing the files of webclient.less in place. That being said, changes you make to webclient.less will
propagate to webclient and webclient.test, so if you must edit raw source files, that's the place to do it.
At the moment I manually minify jquery_test.js via https://javascript-minifier.com/ and then URL-encode it via https://mrcoles.com/bookmarklet/ and use the output from that to replace the contents of bookmarklet.js which sourcing the setup_for_editing.sh script propagates out to the other files including the bookmarklet in [./bookmarklet_test.html].