diff --git a/README.md b/README.md index 641d5f4..99d457b 100644 --- a/README.md +++ b/README.md @@ -47,6 +47,22 @@ Like: `nsi-safnari -Dconfig.file=/path/to/prod.conf`. For further information you can look at the [Play site](http://www.playframework.com/documentation/2.2.x/Production). +## Theming + +The web interface can be styled per organisation. All available themes are +pre-built into the container image. To select a theme, set the `web.theme` +property in your configuration overrides: + +``` +web.theme = "surfnet" +``` + +Available themes: `surfnet`, `ana`, `esnet`, `icair`. + +To add a new theme, create a `theme-.less` file in +`app/assets/css/` with the desired colour variables and an +`@import "_shared.less";` at the bottom. + ## PCE Safnari uses a JSON API to talk to the PCE (Path Computation Engine). Safnari is diff --git a/app/assets/css/bootstrap-generic.less b/app/assets/css/_bootstrap-generic.less similarity index 97% rename from app/assets/css/bootstrap-generic.less rename to app/assets/css/_bootstrap-generic.less index 117be8b..72a8d84 100644 --- a/app/assets/css/bootstrap-generic.less +++ b/app/assets/css/_bootstrap-generic.less @@ -1,4 +1,3 @@ -@import "variables.less"; /* table + paginator combo */ diff --git a/app/assets/css/bootstrap-modal.less b/app/assets/css/_bootstrap-modal.less similarity index 97% rename from app/assets/css/bootstrap-modal.less rename to app/assets/css/_bootstrap-modal.less index 87ae7d4..27157dc 100644 --- a/app/assets/css/bootstrap-modal.less +++ b/app/assets/css/_bootstrap-modal.less @@ -1,4 +1,3 @@ -@import "variables.less"; .modal-header { background-color: @titleBackground; diff --git a/app/assets/css/bootstrap-navbar.less b/app/assets/css/_bootstrap-navbar.less similarity index 96% rename from app/assets/css/bootstrap-navbar.less rename to app/assets/css/_bootstrap-navbar.less index 6e9fc92..4cf25f2 100644 --- a/app/assets/css/bootstrap-navbar.less +++ b/app/assets/css/_bootstrap-navbar.less @@ -1,5 +1,4 @@ -@import "variables.less"; -@import "mixins.less"; +@import "_mixins.less"; .navbar { font-size: 15px; diff --git a/app/assets/css/bootstrap-table.less b/app/assets/css/_bootstrap-table.less similarity index 98% rename from app/assets/css/bootstrap-table.less rename to app/assets/css/_bootstrap-table.less index 6e3d937..658dbc5 100644 --- a/app/assets/css/bootstrap-table.less +++ b/app/assets/css/_bootstrap-table.less @@ -1,5 +1,4 @@ -@import "mixins.less"; -@import "variables.less"; +@import "_mixins.less"; .table-bordered { border: 1px solid @grayDarker; diff --git a/app/assets/css/generic.less b/app/assets/css/_generic.less similarity index 97% rename from app/assets/css/generic.less rename to app/assets/css/_generic.less index 8b72b25..41e6d09 100644 --- a/app/assets/css/generic.less +++ b/app/assets/css/_generic.less @@ -1,5 +1,4 @@ -@import "variables.less"; -@import "mixins.less"; +@import "_mixins.less"; body { font-family: Arial, sans-serif; diff --git a/app/assets/css/layout.less b/app/assets/css/_layout.less similarity index 95% rename from app/assets/css/layout.less rename to app/assets/css/_layout.less index 83550b6..d119116 100644 --- a/app/assets/css/layout.less +++ b/app/assets/css/_layout.less @@ -1,5 +1,3 @@ -@import "variables.less"; - .wrapper { position: relative; width: 940px; diff --git a/app/assets/css/mixins.less b/app/assets/css/_mixins.less similarity index 100% rename from app/assets/css/mixins.less rename to app/assets/css/_mixins.less diff --git a/app/assets/css/main.less b/app/assets/css/_shared.less similarity index 83% rename from app/assets/css/main.less rename to app/assets/css/_shared.less index 8195a85..5f1b892 100644 --- a/app/assets/css/main.less +++ b/app/assets/css/_shared.less @@ -1,10 +1,9 @@ -@import "variables.less"; -@import "layout.less"; -@import "generic.less"; -@import "bootstrap-navbar.less"; -@import "bootstrap-generic.less"; -@import "bootstrap-table.less"; -@import "bootstrap-modal.less"; +@import "_layout.less"; +@import "_generic.less"; +@import "_bootstrap-navbar.less"; +@import "_bootstrap-generic.less"; +@import "_bootstrap-table.less"; +@import "_bootstrap-modal.less"; .message { font-weight: bold; diff --git a/app/assets/css/variables-surfnet.less b/app/assets/css/theme-ana.less similarity index 96% rename from app/assets/css/variables-surfnet.less rename to app/assets/css/theme-ana.less index 51fce22..3cfca3a 100644 --- a/app/assets/css/variables-surfnet.less +++ b/app/assets/css/theme-ana.less @@ -20,7 +20,7 @@ @titleBackground: #ffffff; /* @blueSurf */ @titleHz: 10px; @titleVr: 10px; -@titleImage: "../images/logo.png"; +@titleImage: "../images/ana-logo.png"; /* Menu colour scheme. */ @menuBackground: #4fb3cf; /* @blueSurf */ @@ -56,3 +56,4 @@ @footerLinkColour: #08c; /* #08c */ @footerLinkHoverColour: #005580; /* #005580 */ +@import "_shared.less"; diff --git a/app/assets/css/variables-esnet.less b/app/assets/css/theme-esnet.less similarity index 96% rename from app/assets/css/variables-esnet.less rename to app/assets/css/theme-esnet.less index 8ac813b..284d6c5 100644 --- a/app/assets/css/variables-esnet.less +++ b/app/assets/css/theme-esnet.less @@ -52,4 +52,6 @@ @footerBackground: #f1f1f1; @footerTextColour: #333; @footerLinkColour: #08c; -@footerLinkHoverColour: #005580; \ No newline at end of file +@footerLinkHoverColour: #005580; + +@import "_shared.less"; \ No newline at end of file diff --git a/app/assets/css/variables-icair.less b/app/assets/css/theme-icair.less similarity index 97% rename from app/assets/css/variables-icair.less rename to app/assets/css/theme-icair.less index 83cc90f..2737c4b 100644 --- a/app/assets/css/variables-icair.less +++ b/app/assets/css/theme-icair.less @@ -54,4 +54,6 @@ @footerBackground: #491a58; /* @grayLight */ @footerTextColour: #ffffff; /* #333 */ @footerLinkColour: #ffae00; /* #08c */ -@footerLinkHoverColour: #d1c0de; /* #005580 */ \ No newline at end of file +@footerLinkHoverColour: #d1c0de; /* #005580 */ + +@import "_shared.less"; \ No newline at end of file diff --git a/app/assets/css/theme-safnari.less b/app/assets/css/theme-safnari.less new file mode 100644 index 0000000..8fcb6e5 --- /dev/null +++ b/app/assets/css/theme-safnari.less @@ -0,0 +1,59 @@ +/* Old colouring scheme of main body kept for reference. */ +@blueSurf: #4fb3cf; +@blueSurfLight: #85cadd; +@blueSurfLighter: #ecf8fa; +@blueSurfDark: #0381a4; +@blackLight: #002f3c; + +/* Basic grays. */ +@white: #ffffff; +@grayLight: #f1f1f1; +@gray: #ebebeb; +@grayDark: #d8dadc; +@grayDarker: #bfbfbf; + + /* Colouring and layout of header */ +@titleTextColour: #000000; +@titlePaddingLeft: 95px; +@titlePaddingTop: 30px; +@titleHeight: 80px; +@titleBackground: #ffffff; /* @blueSurf */ +@titleHz: 10px; +@titleVr: 10px; +@titleImage: "../images/safnari-logo.png"; + +/* Menu colour scheme. */ +@menuBackground: #4fb3cf; /* @blueSurf */ +@menuTextHover: #ffffff; /* @white */ +@menuTextActive: #ffffff; /* @white */ +@menuTextInactive: #002f3c; /* @blackLight */ +@menuSelector: #ffffff; /* @white */ + +/* Content block colour scheme. */ +@contentBackground: #e9e9e9; /* @grayLight */ +@contentHeaderBackground: #4fb3cf; /* @blueSurf */ +@contentHeaderText: #ffffff; /* @white */ +@contentLinkColour: #08c; /* #08c */ +@contentLinkHoverColour: #005580; /* #005580 */ +@contentIconColour: #0381a4; /* @blueSurfDark */ + +/* Connection details. */ +@connectionDetailsBackground: #ecf8fa; /* @blueSurfLighter */ +@connectionDetailsBorder: #85cadd; /* @blueSurfLight */ + +/* Colouring scheme of XML messages */ +@messageHeaderBackground: #cae8f0; /* #cae8f0 */ +@messageTitleColour: #333; /* #333 */ +@messageTime: #dc322f; /* #dc322f; */ +@messageElementTag: #008080; /* #008080 */ +@messageElementContent: #dc322f; /* #dc322f */ +@messageNsTag: #195f91; /* #195f91 */ +@messageNsContents: #93a1a1; /* #93a1a1 */ + +/* Footer colour scheme. */ +@footerBackground: #f1f1f1; /* @grayLight */ +@footerTextColour: #333; /* #333 */ +@footerLinkColour: #08c; /* #08c */ +@footerLinkHoverColour: #005580; /* #005580 */ + +@import "_shared.less"; diff --git a/app/assets/css/theme-surfnet.less b/app/assets/css/theme-surfnet.less new file mode 100644 index 0000000..5d3fca8 --- /dev/null +++ b/app/assets/css/theme-surfnet.less @@ -0,0 +1,59 @@ +/* Old colouring scheme of main body kept for reference. */ +@blueSurf: #4fb3cf; +@blueSurfLight: #85cadd; +@blueSurfLighter: #ecf8fa; +@blueSurfDark: #0381a4; +@blackLight: #002f3c; + +/* Basic grays. */ +@white: #ffffff; +@grayLight: #f1f1f1; +@gray: #ebebeb; +@grayDark: #d8dadc; +@grayDarker: #bfbfbf; + + /* Colouring and layout of header */ +@titleTextColour: #000000; +@titlePaddingLeft: 155px; +@titlePaddingTop: 30px; +@titleHeight: 80px; +@titleBackground: #ffffff; /* @blueSurf */ +@titleHz: 10px; +@titleVr: 10px; +@titleImage: "../images/surfnet-logo.png"; + +/* Menu colour scheme. */ +@menuBackground: #4fb3cf; /* @blueSurf */ +@menuTextHover: #ffffff; /* @white */ +@menuTextActive: #ffffff; /* @white */ +@menuTextInactive: #002f3c; /* @blackLight */ +@menuSelector: #ffffff; /* @white */ + +/* Content block colour scheme. */ +@contentBackground: #e9e9e9; /* @grayLight */ +@contentHeaderBackground: #4fb3cf; /* @blueSurf */ +@contentHeaderText: #ffffff; /* @white */ +@contentLinkColour: #08c; /* #08c */ +@contentLinkHoverColour: #005580; /* #005580 */ +@contentIconColour: #0381a4; /* @blueSurfDark */ + +/* Connection details. */ +@connectionDetailsBackground: #ecf8fa; /* @blueSurfLighter */ +@connectionDetailsBorder: #85cadd; /* @blueSurfLight */ + +/* Colouring scheme of XML messages */ +@messageHeaderBackground: #cae8f0; /* #cae8f0 */ +@messageTitleColour: #333; /* #333 */ +@messageTime: #dc322f; /* #dc322f; */ +@messageElementTag: #008080; /* #008080 */ +@messageElementContent: #dc322f; /* #dc322f */ +@messageNsTag: #195f91; /* #195f91 */ +@messageNsContents: #93a1a1; /* #93a1a1 */ + +/* Footer colour scheme. */ +@footerBackground: #f1f1f1; /* @grayLight */ +@footerTextColour: #333; /* #333 */ +@footerLinkColour: #08c; /* #08c */ +@footerLinkHoverColour: #005580; /* #005580 */ + +@import "_shared.less"; diff --git a/app/assets/css/variables.less b/app/assets/css/variables.less deleted file mode 100644 index 13747b2..0000000 --- a/app/assets/css/variables.less +++ /dev/null @@ -1 +0,0 @@ -@import "variables-surfnet.less"; diff --git a/app/controllers/Configuration.scala b/app/controllers/Configuration.scala index 0249666..e8df8a8 100644 --- a/app/controllers/Configuration.scala +++ b/app/controllers/Configuration.scala @@ -79,6 +79,7 @@ class Configuration @Inject() (configuration: play.api.Configuration): // Web page footer information for main.scala.html. def WebParams: Map[String, String] = Map( + "theme" -> getStringOrFail("web.theme"), "favicon" -> getStringOrFail("web.favicon"), "footer" -> getStringOrFail("web.footer"), "contactURL" -> getStringOrFail("web.contactURL"), diff --git a/app/views/main.scala.html b/app/views/main.scala.html index 0bedb6c..eca3a51 100644 --- a/app/views/main.scala.html +++ b/app/views/main.scala.html @@ -13,7 +13,7 @@ @title - + diff --git a/build.sbt b/build.sbt index 97baa59..892aa71 100644 --- a/build.sbt +++ b/build.sbt @@ -62,6 +62,9 @@ lazy val root = (project in file(".")) exportJars := true ) +// Compile all theme entry points (variables-*.less) instead of the default main.less +Assets / LessKeys.less / includeFilter := "theme-*.less" + Test / javaOptions += "-Dconfig.file=conf/test.conf" Test / testFrameworks := Seq(TestFrameworks.Specs2) diff --git a/conf/application.conf b/conf/application.conf index 2354917..5626748 100644 --- a/conf/application.conf +++ b/conf/application.conf @@ -90,12 +90,12 @@ safnari { connection.expiration.time = 1 day } -# Deployment specific configuration for the nsi-safnari web page. This -# information is treated as runtime data and not static CSS layout. For -# static CSS layout configuration look at the app/assets/css/variables.less -# file for customer colour and page layout that is built at compile time. +# Deployment specific configuration for the nsi-safnari web page. +# The theme selects the CSS colour scheme. Available themes correspond to +# the theme-.less files: safnari, surfnet, ana, esnet, icair. # ~~~~~ web { + theme = "safnari" favicon = "images/favicon.png" footer = "SURFnet bv | Postbus 19035, 3501 DA Utrecht | T +31 302 305 305 | F +31 302 305 329 |" contactURL = "mailto:admin@surfnet.nl" @@ -180,3 +180,6 @@ play.ws.ssl { # ] #} } + +# auto apply evolutions +play.evolutions.db.default.autoApply = true diff --git a/public/images/ana-logo.png b/public/images/ana-logo.png new file mode 100644 index 0000000..68b25ea Binary files /dev/null and b/public/images/ana-logo.png differ diff --git a/public/images/safnari-logo.png b/public/images/safnari-logo.png new file mode 100644 index 0000000..a7e0c17 Binary files /dev/null and b/public/images/safnari-logo.png differ diff --git a/public/images/logo.png b/public/images/surfnet-logo.png similarity index 100% rename from public/images/logo.png rename to public/images/surfnet-logo.png