Merge pull request #1167 from sharelatex/pr-ieee-basic-styling

IEEE basic styling

GitOrigin-RevId: 43a308fa8ce49d7b809b21fc95aefb41dcbaf46e

services/web/app/coffee/infrastructure/ExpressLocals.coffee

@@ -45,6 +45,7 @@ pathList = [
 	"/stylesheets/style.css"
 	"/stylesheets/ol-style.css"
 	"/stylesheets/ol-light-style.css"
+	"/stylesheets/ol-ieee-style.css"
 ].concat(Modules.moduleAssetFiles(jsPath))
 
 if !Settings.useMinifiedJs 
@@ -126,7 +127,6 @@ module.exports = (app, webRouter, privateApiRouter, publicApiRouter)->
 		res.locals.lib = PackageVersions.lib
 
 
-
 		res.locals.buildJsPath = (jsFile, opts = {})->
 			path = Path.join(jsPath, jsFile)
 
@@ -157,20 +157,39 @@ module.exports = (app, webRouter, privateApiRouter, publicApiRouter)->
 			else
 				return res.locals.buildJsPath(jsFile, opts)
 
-		res.locals.buildCssPath = (cssFile, opts)->
-			path = Path.join("/stylesheets/", cssFile)
-			if opts?.hashedPath && hashedFiles[path]?
+
+		IEEE_BRAND_ID = 15
+		res.locals.isIEEE = (brandVariation) ->
+			brandVariation?.brand_id == IEEE_BRAND_ID
+
+		_buildCssFileName = (themeModifier) ->
+			return "/" + Settings.brandPrefix + (if themeModifier then themeModifier else "") + "style.css"
+
+		_buildCssPath = (cssFileName, isHashed) -> 
+			path = Path.join("/stylesheets/", cssFileName)
+			if isHashed && hashedFiles[path]?
 				hashedPath = hashedFiles[path]
 				return Url.resolve(staticFilesBase, hashedPath)
 			return Url.resolve(staticFilesBase, path)
 
-		res.locals.buildCssFileNameForUser = (userSettings) ->
-			if userSettings?.overallTheme? and Settings.overleaf?
-				themeModifier = userSettings.overallTheme
-			return res.locals.buildCssFileName(themeModifier)
-
-		res.locals.buildCssFileName = (themeModifier) ->
-			return "/" + Settings.brandPrefix + (if themeModifier then themeModifier else "") + "style.css"
+		res.locals.getCssThemeModifier = (userSettings, brandVariation) ->
+			# Themes only exist in OL v2
+			if Settings.overleaf?
+				# The IEEE theme takes precedence over the user personal setting, i.e. a user with
+				# a theme setting of "light" will still get the IEE theme in IEEE branded projects.
+				if res.locals.isIEEE(brandVariation)
+					themeModifier = "ieee-"
+				else if userSettings?.overallTheme?
+					themeModifier = userSettings.overallTheme
+			return themeModifier
+
+		res.locals.buildCssPath = (themeModifier, buildOpts) ->
+			cssFileName = _buildCssFileName themeModifier
+			path = Path.join("/stylesheets/", cssFileName)
+			if buildOpts?.isHashed && hashedFiles[path]?
+				hashedPath = hashedFiles[path]
+				return Url.resolve(staticFilesBase, hashedPath)
+			return Url.resolve(staticFilesBase, path)
 
 		res.locals.buildImgPath = (imgFile)->
 			path = Path.join("/img/", imgFile)
@@ -183,8 +202,6 @@ module.exports = (app, webRouter, privateApiRouter, publicApiRouter)->
 
 		next()
 
-
-
 	webRouter.use (req, res, next)->
 		res.locals.settings = Settings
 		next()
@@ -344,10 +361,11 @@ module.exports = (app, webRouter, privateApiRouter, publicApiRouter)->
 		next()
 
 	webRouter.use (req, res, next) ->
+		#TODO
 		if Settings.overleaf?
 			res.locals.overallThemes = [
-				{ name: "Default", val: "",       path: res.locals.buildCssPath(res.locals.buildCssFileName(), {hashedPath:true}) }
-				{ name: "Light",   val: "light-", path: res.locals.buildCssPath(res.locals.buildCssFileName("light-"), {hashedPath:true}) }
+				{ name: "Default", val: "",       path: res.locals.buildCssPath(null,     { hashedPath: true }) }
+				{ name: "Light",   val: "light-", path: res.locals.buildCssPath("light-", { hashedPath: true }) }
 			]
 		next()
 

services/web/app/views/general/500.pug

@@ -4,7 +4,7 @@ html.full-height(itemscope, itemtype='http://schema.org/Product')
 		title Something went wrong
 		link(rel="icon", href="/" + settings.brandPrefix + "favicon.ico")
 		if buildCssPath
-			link(rel="stylesheet", href=buildCssPath("/" + settings.brandPrefix + "style.css"))
+			link(rel="stylesheet", href=buildCssPath(null, { hashedPath: true }))
 		link(href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css",rel="stylesheet")
 	body.full-height
 		.content.content-alt.full-height

services/web/app/views/layout.pug

@@ -25,7 +25,7 @@ html(
 		link(rel="mask-icon", href="/" + settings.brandPrefix + "mask-favicon.svg", color=settings.brandPrefix === 'ol-' ? "#4f9c45" : "#a93529")
 
 		//- Stylesheet
-		link(rel='stylesheet', href=buildCssPath(buildCssFileNameForUser(userSettings), {hashedPath:true}), id="main-stylesheet")
+		link(rel='stylesheet', href=buildCssPath(getCssThemeModifier(userSettings, brandVariation), { hashedPath: true }), id="main-stylesheet")
 
 		block _headLinks
 

services/web/app/views/project/editor/left-menu.pug

@@ -139,7 +139,7 @@ aside#left-menu.full-size(
 					each editorTheme in editorThemes
 						option(value=editorTheme) #{editorTheme.replace(/_/g, ' ')}
 
-			- if (settings.overleaf != null)
+			- if (settings.overleaf != null && !isIEEE(brandVariation))
 				.form-controls
 					label(for="overallTheme") #{translate("overall_theme")}
 					select(

services/web/public/stylesheets/core/ol-ieee-variables.less

@@ -0,0 +1,44 @@
+@ieee-blue                    : #00629B;
+@ieee-dark-blue               : #002855;
+@ieee-cyan                    : #00B5E2;
+@ieee-dark-cyan               : #009CA6;
+@ieee-red                     : #BA0C2F;
+@ieee-orange                  : #FFA300;
+@ieee-yellow                  : #FFD100;
+@ieee-light-green             : #78BE20;
+@ieee-dark-green              : #00843D;
+@ieee-purple                  : #981D97;
+
+@ol-blue-gray-0               : #F4F5F8;
+@ol-blue-gray-1               : #D8E0E6;
+@ol-blue-gray-2               : #8195A1;
+@ol-blue-gray-3               : #425E6E;
+@ol-blue-gray-4               : #26425F;
+@ol-blue-gray-5               : #1E3048;
+@ol-blue-gray-6               : #112437;
+
+@ol-green                     : @ieee-dark-green;
+@ol-dark-green                : darken(@ieee-dark-green, 15%);
+@ol-blue                      : @ieee-blue;
+@ol-dark-blue                 : @ieee-dark-blue;
+@ol-red                       : @ieee-red;
+@ol-dark-red                  : darken(@ieee-red, 15%);
+
+@brand-primary                : @ieee-blue;
+@brand-secondary              : @ieee-dark-blue;
+@brand-success                : @ol-blue;
+@brand-info                   : @ieee-dark-cyan;
+@brand-warning                : @ieee-orange;
+@brand-danger                 : @ol-red;
+
+@btn-primary-bg               : @ieee-blue;
+@link-color                   : @ieee-blue;
+@link-hover-color             : @ieee-dark-blue;
+
+@toolbar-btn-active-bg-color  : @ieee-blue;
+@file-tree-item-selected-bg   : @ieee-blue;
+@file-tree-multiselect-bg     : @ieee-cyan;
+
+@editor-toggler-hover-bg-color: @ieee-blue;
+
+@toggle-switch-highlight-color: @ieee-blue;

services/web/public/stylesheets/ol-ieee-style.less

@@ -1,6 +1,6 @@
-@import "ol-style.less";
-@import "core/ol-light-variables.less";
+@import 'ol-style.less';
+@import 'core/ol-ieee-variables.less';
 
-@is-overleaf       : true;
-@is-overleaf-light : false;
-@show-rich-text    : true;
+@is-overleaf      : true;
+@is-overleaf-light: false;
+@show-rich-text   : true;