Fixes: CNVS-28071
test plan:
- as an admin using new ui
- navigate to theme editor
- click the second section "Global Navigation"
- you should now see a field titled "Nav Badge Text"
customize the nav badge background color AND the
nav badge text color to ensure it is working
properly (example: http://screencast.com/t/fgZ0qsUE0EUT)
Change-Id: I8924ab90b29e0282585c9244cc8c1add9eef2d0b
Reviewed-on: https://gerrit.instructure.com/75773
Tested-by: Jenkins
QA-Review: Nathan Rogowski <nathan@instructure.com>
Reviewed-by: Colleen Palmer <colleen@instructure.com>
Product-Review: Colleen Palmer <colleen@instructure.com>
test plan:
* theme editor variable names, group names and helper text
should all be lolcalized
closes #CNVS-23768
Change-Id: I01846a0c0354342cc5593d6ac153f117ccc39b64
Reviewed-on: https://gerrit.instructure.com/65809
Reviewed-by: Ryan Shaw <ryan@instructure.com>
Tested-by: Jenkins
QA-Review: Clare Strong <clare@instructure.com>
Product-Review: James Williams <jamesw@instructure.com>
refs CNVS-22338, CNVS-23413, CNVS-23412
Test plan:
* In Theme Editor, upload a water mark image
* Set the opacity to something other than 50%
* Preview the change and verify the opacity set on the bg image
* Apply the change and verify the opacity on the bg image
* Make sure the watermark image looks ok on as many canvas pages as possible
* Reset to the canvas default theme and verify that the image is removed and the opacity is reset to 50%
Change-Id: Ib6256343d20f9550f3d46c0a55731b9448c8a49c
Reviewed-on: https://gerrit.instructure.com/64471
Reviewed-by: Chris Hart <chart@instructure.com>
Tested-by: Jenkins
Product-Review: Chris Hart <chart@instructure.com>
QA-Review: Nathan Rogowski <nathan@instructure.com>
QA-Review: Myller de Araujo <myller@instructure.com>
buttons neutral
Fixes: CNVS-23057
Test Plan:
- as a teacher/admin using the new UI
- note no changes to colors in global nav (and subnav overlay)
- note that the default secondary button color is now #333 instead of #34444f
Change-Id: I0474b9b58e18f7a68e18cd577c9debaf8d06ea4e
Reviewed-on: https://gerrit.instructure.com/62808
Tested-by: Jenkins
Reviewed-by: Colleen Palmer <colleen@instructure.com>
Product-Review: Colleen Palmer <colleen@instructure.com>
QA-Review: Myller de Araujo <myller@instructure.com>
Fixes: CNVS-22703
This commit adds the ability to add a logo to the
top of the right sidebar on the dashboard screen
only (per Blake and the UI team).
This feature is only available in the New UI via
the Theme Editor.
Test plan:
- Fully recompile Canvas assets and clear your
browser cache
- Turn on the new UI feature flag
- Go to the Theme Editor
- Under the Watermarks & Other Images dropdown,
you should see a new Right Sidebar Logo option
- Add a logo (there is no default image - the default
Canvas theme doesn't show this logo; it's for
customers who want more branding)
- Click Preview Changes
- Click on the Dashboard link on the primary nav
- You should now see your logo in the right
sidebar, above the content
- Note the recommendation in the Theme Editor that
the ideal image dimensions are 360 x 140 pixels.
The styles will handle images of any size, to
ensure they don't break the layout. However,
images that are taller than they are wide will
not look great.
Change-Id: Ie68fd7fdb86ab7f0bdd620f33ce8ffa966df7ecf
Reviewed-on: https://gerrit.instructure.com/62952
Reviewed-by: Jennifer Stern <jstern@instructure.com>
Product-Review: Jennifer Stern <jstern@instructure.com>
Tested-by: Jenkins
QA-Review: Jeremy Putnam <jeremyp@instructure.com>
closes: CNVS-22954
Notes for front-end devs:
- Created a partial for the logos that get pulled through the login header
- Branding variable is now pulling in as an image path in an html image tag
vs a background-image path in css
- SVG added back as a file option
- Change Canvas logo back to svg (no longer png)
Test Plan:
- With new UI on, go to Theme Editor and upload a logo to the Login screen.
You will have to apply the changes to your theme in order to see it.
- Go to login screen and make sure logo appears.
Change-Id: I9e71ba53cc8607377e60ea61ecf266fdb767b743
Reviewed-on: https://gerrit.instructure.com/62487
Reviewed-by: Jennifer Stern <jstern@instructure.com>
Product-Review: Jennifer Stern <jstern@instructure.com>
Tested-by: Jenkins
QA-Review: Myller de Araujo <myller@instructure.com>
This adds the login branding to our Theme Editor. You can
now customize the Login screen!
closes: CNVS-19361
closes: CNVS-22446
Test Plan:
- Turn on New UI
- Go to Theme Editor (Account > Settings > Open Theme Editor)
- Go to Login Screen
- Edit all the things!
- Apply the styles
- Logout > Go to login screen
Here is a layout of what can be customized:
http://cl.ly/image/1m043S0x0e1w
Note:
- Currently we don't have a good way of previewing applying the styles. You
need to apply the styles fully in order to preview it.
There is another ticket to address this issue.
- This does not (and should not) affect Multi-Auth or Sign up screens. These
should still remain the same white/light color scheme.
- This also sets the default background image on login to be nothing
which fixes CNVS-22446
- We've taken out the ability to use svg for the login logo. There are some
complexities with loading these in as a background and properly applying the
right sizes and will be tackled in a future ticket
Change-Id: I1185cbdf41ffab082a7cf1d51c1e0c403dbb8188
Reviewed-on: https://gerrit.instructure.com/58479
Reviewed-by: Jennifer Stern <jstern@instructure.com>
Product-Review: Jennifer Stern <jstern@instructure.com>
QA-Review: August Thornton <august@instructure.com>
Tested-by: Jenkins
while demoing the theme editor to someone they
were trying to upload a jpg watermark but couldn't
I didn't see any reason not to allow it, so if you
agree we can submit this, if not, no worries.
Change-Id: I5e31c118176229187e2e2596edbf2f58a6b2a5bb
Reviewed-on: https://gerrit.instructure.com/62064
Tested-by: Jenkins
Reviewed-by: Colleen Palmer <colleen@instructure.com>
Product-Review: Ryan Shaw <ryan@instructure.com>
QA-Review: Ryan Shaw <ryan@instructure.com>
fixes: CNVS-22258
test plan:
* open theme editor and open the "watermarks and
other images section. you should not see any
404's in the browser console and you should
see a default for each except for the 'watermark'
* in IE, make sure you don't see a "broken link"
image for the watermark
Change-Id: Iea743e8efc5115e2f4dfae6b8d12f26d4f3f346f
Reviewed-on: https://gerrit.instructure.com/59793
Reviewed-by: Jacob Fugal <jacob@instructure.com>
Tested-by: Jenkins
QA-Review: Jeremy Putnam <jeremyp@instructure.com>
Product-Review: Ryan Shaw <ryan@instructure.com>
fixes: CNVS-22177
test plan:
* go to the theme editor and try to upload a
"Mobile Homescreen Icon"
* the helper text should tell you can only use pngs
* and the file picker should only be able to pick
png files
Change-Id: I9ef7402bd08fdb70512604eefce5e0da1ae8abbb
Reviewed-on: https://gerrit.instructure.com/59406
Tested-by: Jenkins
Reviewed-by: Jennifer Stern <jstern@instructure.com>
Product-Review: Jennifer Stern <jstern@instructure.com>
QA-Review: Jeremy Putnam <jeremyp@instructure.com>
closes: CNVS-21931
UI Notes:
- I also added a white background to the dashcard links because they were
transparent and the UI was a little hard to see with a background image
showing through
Test Plan:
- Turn on new UI and go to Theme Editor
(Account > Settings > Open Theme Editor)
- Under Watermarks, add a watermark image and preview
- You should now have a nice image that can be placed on the bottom left
portion of the screen to enhance branding
Change-Id: I1e08144d1c8c76388f464dc6b80ed92b97d13190
Reviewed-on: https://gerrit.instructure.com/58666
Tested-by: Jenkins
Reviewed-by: Chris Hart <chart@instructure.com>
Product-Review: Chris Hart <chart@instructure.com>
QA-Review: Adrian Foong <afoong@instructure.com>
fixes: CNVS-21376
This adds the styles and markup we need to customize the
new ui navigation logo.
Test Plan:
- Turn on new UI
- Go to Theme Editor
- Find the navigation logo and upload a new one
- Preview new logo
- Apply new logo, navigate to canvas and make sure it's still there
- Repeat a couple of times
Change-Id: Idd221a61c7806c71ca15a5d1e82cce0e39101ba8
Reviewed-on: https://gerrit.instructure.com/56393
Reviewed-by: Chris Hart <chart@instructure.com>
Product-Review: Chris Hart <chart@instructure.com>
Tested-by: Jenkins
QA-Review: Pedro Fajardo <pfajardo@instructure.com>
closes: CNVS-21896
This takes out the secondary color from being customizable in
Theme Editor.
Test Plan:
- Turn on New Ui and go to Theme Editor
(Account > Settings > Open Theme Editor)
- Under Global Branding there should no longer be an option to set
the secondary brand color
Change-Id: I178ac3a16ae445631914db8dccac2cae2d7946f7
Reviewed-on: https://gerrit.instructure.com/58486
Reviewed-by: Ryan Shaw <ryan@instructure.com>
Product-Review: Colleen Palmer <colleen@instructure.com>
QA-Review: Nathan Rogowski <nathan@instructure.com>
Tested-by: Jenkins
fixes: CNVS-21432
This brings our secondary blue color back to the darker blue we had originally
had in there.
Test Plan:
- Turn on new ui
Main navigation background:
- Was: http://cl.ly/image/0i2v0E0v0D3u
- Is now: http://cl.ly/image/0u2w270h0b0j
Change-Id: Ib729395d4449f949d190cdd7b59c70a6da2a623e
Reviewed-on: https://gerrit.instructure.com/57862
Reviewed-by: Jennifer Stern <jstern@instructure.com>
Tested-by: Jenkins
QA-Review: Myller de Araujo <myller@instructure.com>
Product-Review: Jennifer Stern <jstern@instructure.com>
fixes: CNVS-20551
This adds the final UX polish to bring it up to par with what UX wants
theme editor to look like. This fixes the ui for the theme editor ui
when you upload an image. It also tweaks the Windows logo upload and
the tile color helper text.
Please take a look at this screen for comparison:
http://cl.ly/image/2q1g1Q0R3C3t
Test Plan:
- In new UI go to theme editor
(Account Settings > Open Editor)
- The theme editor UI should now resemble the above screenshot
Change-Id: I986504edcddd84f6954916a71f1618c28ed94699
Reviewed-on: https://gerrit.instructure.com/56392
Reviewed-by: Jennifer Stern <jstern@instructure.com>
Tested-by: Jenkins
QA-Review: Myller de Araujo <myller@instructure.com>
Product-Review: Jennifer Stern <jstern@instructure.com>
what this does:
* Changes the way we generate css so we are able to generate custom
css for people that use the theme editor.
* Sets everything up so we can push all of our static assets
(js, fonts, css, images, etc) to s3 pre-deploy and serve them
from cloudfront. Yay! faster canvas for everyone!
* as part of that, this enables the rails asset pipeline just so we
can use it to put md5s in our urls. we don't use it for any of the
coffeescript/sass/sprockets transformer stuff.
* adds a new "Theme editor" functionality (only for people that have
have the use-new-styles feature flag turned on) where an admin for
an account can pick their own colors/images for all the users
at their account/school.
* when the user is done saving things in theme editor, it will,
in a delayed job, generate all the css with against the variables
that user specified and push it to s3 so it will be available to
anyone else that requests it. (the delayed job will shell
out to a node.js executable called `brandable_css`).
* ability to pick an existing shared theme and to reset to
blank theme. closes: CNVS-19685
* gets rid of jammit.
test plan:
(this is exaustive, so not every person has to do every step
but we should make sure at least someone does each of these things.
maybe as part of the review add a comment if you have done one of these
bulletpoints)
* before you check this out, compile all css and copy the
public/stylsheets_compiled directory somewhere. after you check out
this code and regenerate all the css. make sure there are no
significant changes to the css output. (we updated the versions of
node-sass and autoprefixer that we use so we want to make sure they
don't change things in a way we weren't expecting)
* make sure the way we load css for handlebars templates still works.
eg: if there is a handlebars template at
app/views/jst/some/template.handlebars
if there is also a scss file at
app/stylesheets/jst/some/template.scss
then that stylesheet should get loaded when that template is rendered
* check out the code and run migrations. browse around canvas,
make sure css and js files load correctly as before.
* cody, jacob, or someone on queso: look at the db migrations and
make sure everything looks good and that I am handling sharding
correctly.
* verify that both rake canvas:compile_assets and guard, works as well
as `node_modules/.bin/brandable_css` (note: if you have
"node_modules/.bin" in your PATH (which you should), it will also
work with just `brandable_css`)
* verify that passing the --watch option to
`.bin/node_modules/brandable_css` works and picks up changes to
sass files, images, fonts, or any other resource that goes into
a css file. and that it only recompiles the css files that actually
depend on that file.
* go to https://github.com/ryankshaw/brandable_css and check out the
code there. that is what is actually doing the sass compiling
* create a config/canvas_cdn.yml file and add aws access creds and
an s3 bucket and cdn hostname (for testing, you can use the credentials
for instructure_uploads_engineering from
https://gollum.instructure.com/OtherServiceTestAccounts ). for a test
cdn hostname you can use https://diu0rq5m1weh1.cloudfront.net. that
is a cloudfront bucket I set up on my personal account that points to
instructure_uploads_engineering
* run rake canvas:compile_assets again, this time, at the end, you
should see it run the assets:precompile task that puts md5s in filenames
and, gzipps them, and copys them to public/assets.
then you should see it run canvas:cdn:upload_to_s3
(look at log/development.log for progress),
which pushes everything to s3.
closes: CNVS-17333 CNVS-17430 CNVS-17337
* try out the theme editor: turn on new styles, go to accounts/x
(where x is the @domain root acount you are testing from) and click
the "theme editor" button on the right side of the page.
that should take you to a page that has the ability to pick colors/images
on the left side and preview your changes in an iframe on the right
closes: CNVS-19360 CNVS-20551
* test the "preview", "save", "reset", and "choose existing" functionality
closes: CNVS-17339 CNVS-17338 CNVS-19685
* make sure that the themeeditor works both if you have
config/canvas_cdn.yml set up and enabled as well as if you don't.
if it is enabled, you should see it push the css for just that new
brand config to s3 when you hit preview, and the css
should be accessible from the cdn you configured.
Change-Id: Ie0a812d04f5eeb40e7df7e71941ff63ea51a4d22
Reviewed-on: https://gerrit.instructure.com/53873
Tested-by: Jenkins
QA-Review: Jeremy Putnam <jeremyp@instructure.com>
Reviewed-by: Jacob Fugal <jacob@instructure.com>
Product-Review: Ryan Shaw <ryan@instructure.com>
Pam Hiett