allow to hardforce color of the main menu for specific usecases such as two parallel instances needed like at BNF (closes #430)

Author: boogheta

config-frontend.env.example

@@ -1,6 +1,7 @@
 HYPHE_BROWSER_URL=https://github.com/medialab/hyphe-browser/releases
 HYPHE_GOOGLE_ANALYTICS_ID=
 HYPHE_DISCLAIMER=
+HYPHE_CUSTOM_COLOR=
 
 # Setup USER & PASS to restrict Hyphe's access to informed users
 # PASS should be encrypted, generate it using the following command and paste the result here: openssl passwd -apr1

doc/config.md

@@ -157,3 +157,9 @@ A few adjustments can be set to the frontend by editing the file `hyphe_frontend
 - `hyBroURL` (in Docker: `HYPHE_BROWSER_URL`):
 
   A direct link URL to a web directory hosting build installs of Hyphe Browser
+
+- `headerCustomColor` (in Docker: `HYPHE_CUSTOM_COLOR`):
+    
+  An hexadecimal color code (i.e. #328dc7) that will be used as the background of the login menu as well as of the top left corpus title zone in the web interface.
+
+

hyphe_frontend/app/app.js

@@ -157,4 +157,4 @@ angular.module('hyphe.analytics', [])
     ga('create', googleAnalyticsId, 'auto');
   }
 
-}])
+}])

hyphe_frontend/app/conf/conf_default.js

@@ -10,7 +10,7 @@ angular.module('hyphe.conf', [])
   .constant('googleAnalyticsId', '')
   .constant('disclaimer', '')
   .constant('hyBroURL', 'https://github.com/medialab/hyphe-browser/releases/')
-  
+  .constant('headerCustomColor', '')
 
 
 ;

hyphe_frontend/app/partials/topbar.html

@@ -1,5 +1,5 @@
 <div layout="row" layout-fill>
-  <div layout="row" class="sidebar-width topbar-project" md-colors="{background: 'default-primary-500'}">
+  <div layout="row" class="sidebar-width topbar-project" md-colors="{background: 'default-primary-500'}" ng-style="{'background-color': headerCustomColor}">
     <div flex>
       <div layout-fill layout="row" layout-padding layout-align="start center">
         {{corpusName}}

hyphe_frontend/app/views/definewebentities.js

@@ -2,11 +2,12 @@
 
 angular.module('hyphe.definewebentitiesController', [])
 
-  .controller('DefineWebEntities', ['$scope', 'store', 'utils', 'api', 'QueriesBatcher', '$location', 'PrefixConflictsIndex', 'corpus'
-  ,function($scope, store, utils, api, QueriesBatcher, $location, PrefixConflictsIndex, corpus) {
+  .controller('DefineWebEntities', ['$scope', 'store', 'utils', 'api', 'QueriesBatcher', '$location', 'PrefixConflictsIndex', 'corpus', 'config'
+  ,function($scope, store, utils, api, QueriesBatcher, $location, PrefixConflictsIndex, corpus, config) {
     $scope.currentPage = 'definewebentities'
     $scope.corpusName = corpus.getName()
     $scope.corpusId = corpus.getId()
+    $scope.headerCustomColor = config.get('headerCustomColor') || '#328dc7';
 
     $scope.list = []
     $scope.list_byId = {}

hyphe_frontend/app/views/export.js

@@ -2,11 +2,12 @@
 
 angular.module('hyphe.exportController', [])
 
-  .controller('export', ['$scope', 'api', 'utils', 'corpus'
-  ,function($scope, api, utils, corpus) {
+  .controller('export', ['$scope', 'api', 'utils', 'corpus', 'config'
+  ,function($scope, api, utils, corpus, config) {
     $scope.currentPage = 'export'
     $scope.corpusName = corpus.getName()
     $scope.corpusId = corpus.getId()
+    $scope.headerCustomColor = config.get('headerCustomColor') || '#328dc7';
 
     $scope.dataVolume = 'compact'
     $scope.compactFields = ['id', 'name', 'prefixes', 'indegree', 'pages_total', 'pages_crawled', 'status', 'last_modification_date', 'user_tags']

hyphe_frontend/app/views/help.js

@@ -17,6 +17,7 @@ angular.module('hyphe.helpController', ['ngSanitize'])
     $scope.currentPage = 'help'
     $scope.corpusName = corpus.getName()
     $scope.corpusId = corpus.getId()
+    $scope.headerCustomColor = config.get('headerCustomColor') || '#328dc7';
     $scope.hyBro = config.get('hyBroURL')
 
     // Build index

hyphe_frontend/app/views/importurls.js

@@ -2,11 +2,12 @@
 
 angular.module('hyphe.importurlsController', [])
 
-  .controller('ImportUrls', ['$scope', 'FileLoader', 'Parser', 'extractURLs', 'droppableTextArea', 'store', 'corpus', '$timeout', 'api'
-  ,function($scope, FileLoader, Parser, extractURLs, droppableTextArea, store, corpus, $timeout, api) {
+  .controller('ImportUrls', ['$scope', 'FileLoader', 'Parser', 'extractURLs', 'droppableTextArea', 'store', 'corpus', '$timeout', 'api', 'config'
+  ,function($scope, FileLoader, Parser, extractURLs, droppableTextArea, store, corpus, $timeout, api, config) {
     $scope.currentPage = 'importurls'
     $scope.corpusName = corpus.getName()
     $scope.corpusId = corpus.getId()
+    $scope.headerCustomColor = config.get('headerCustomColor') || '#328dc7';
 
     var parser = new Parser()
 

hyphe_frontend/app/views/listWebentities.js

@@ -12,11 +12,13 @@ angular.module('hyphe.listwebentitiesController', [])
     $timeout,
     $route,
     $window,
-    corpus
+    corpus,
+    config
   ) {
     $scope.currentPage = 'listWebentities'
     $scope.corpusName = corpus.getName()
     $scope.corpusId = corpus.getId()
+    $scope.headerCustomColor = config.get('headerCustomColor') || '#328dc7';
 
     $scope.dynamicWebentities
 

hyphe_frontend/app/views/login.html

@@ -38,7 +38,7 @@ <h1 style="font-weight: 100; font-family: Roboto;font-size: 3.5em;">hyphe</h1>
     <div
             ng-if="!disconnected && !loading"
     >
-      <md-button class="md-raised md-primary" ng-show="uiMode == 'default' && corpusList.length > 0" ng-click="switchToNew()" layout-fill>
+      <md-button class="md-raised md-primary" ng-show="uiMode == 'default' && corpusList.length > 0" ng-click="switchToNew()" layout-fill ng-style="{'background-color': headerCustomColor}">
         <md-icon>add</md-icon> New Corpus
       </md-button>
     </div>

hyphe_frontend/app/views/login.js

@@ -2,8 +2,8 @@
 
 angular.module('hyphe.loginController', [])
 
-  .controller('Login', ['$scope', 'api', 'utils', '$location', 'corpus'
-  ,function($scope, api, utils, $location, corpus) {
+  .controller('Login', ['$scope', 'api', 'utils', '$location', 'corpus', 'config'
+  ,function($scope, api, utils, $location, corpus, config) {
     $scope.currentPage = 'login'
 
     $scope.corpusList
@@ -29,6 +29,8 @@ angular.module('hyphe.loginController', [])
     $scope.starting = false
     $scope.search_query = ''
 
+    $scope.headerCustomColor = config.get('headerCustomColor') || '#328dc7';
+
     $scope.createCorpus = function(){
       var isValid = true
 
@@ -113,7 +115,7 @@ angular.module('hyphe.loginController', [])
 
         openCorpus($scope.corpus.corpus_id, $scope.corpus.name)
 
-      },function(data, status, headers, config){
+      },function(data, status, headers, conf){
 
         $scope.starting = false
         if(data && data[0] && data[0].message.match(/^Wrong auth.*/)){
@@ -133,7 +135,7 @@ angular.module('hyphe.loginController', [])
 
         openCorpus(data.corpus_id, $scope.new_project_name)
 
-      },function(data, status, headers, config){
+      },function(data, status, headers, conf){
         $scope.starting = false
 
         $scope.new_project_message = 'Error creating corpus'
@@ -165,7 +167,7 @@ angular.module('hyphe.loginController', [])
           return 0;
         })
 
-      },function(data, status, headers, config){
+      },function(data, status, headers, conf){
         $scope.loadingList = false
         $scope.corpusList = ''
         $scope.disconnected = true

hyphe_frontend/app/views/manageTags.js

@@ -11,13 +11,15 @@ angular.module('hyphe.manageTagsController', [])
     $location,
     $timeout,
     $filter,
-    $mdColors
+    $mdColors,
+    config
   ) {
     var pageSize = 1000
 
     $scope.currentPage = 'manageTags'
     $scope.corpusName = corpus.getName()
     $scope.corpusId = corpus.getId()
+    $scope.headerCustomColor = config.get('headerCustomColor') || '#328dc7';
 
     $scope.data = {
       in: {

hyphe_frontend/app/views/monitorCrawls.js

@@ -12,11 +12,13 @@ angular.module('hyphe.monitorcrawlsController', [])
     $location,
     refreshScheduler,
     corpus,
-    $timeout
+    $timeout,
+    config
   ){
     $scope.currentPage = 'monitorCrawls'
     $scope.corpusName = corpus.getName()
     $scope.corpusId = corpus.getId()
+    $scope.headerCustomColor = config.get('headerCustomColor') || '#328dc7';
 
     $scope.selectedTab = 0
     $scope.focusedJobId

hyphe_frontend/app/views/network.js

@@ -9,9 +9,11 @@ angular.module('hyphe.networkController', ['angular-md5'])
     utils,
     md5,
     corpus,
-    $window
+    config,
+    $window,
   ) {
     $scope.currentPage = 'network'
     $scope.corpusName = corpus.getName()
     $scope.corpusId = corpus.getId()
+    $scope.headerCustomColor = config.get('headerCustomColor') || '#328dc7';
   })

hyphe_frontend/app/views/overview.js

@@ -2,11 +2,12 @@
 
 angular.module('hyphe.overviewController', [])
 
-  .controller('Overview', ['$scope', 'api', 'utils', 'corpus'
-  ,function($scope, api, utils, corpus) {
+  .controller('Overview', ['$scope', 'api', 'utils', 'corpus', 'config'
+  ,function($scope, api, utils, corpus, config) {
     $scope.currentPage = 'overview'
     $scope.corpusName = corpus.getName()
     $scope.corpusId = corpus.getId()
+    $scope.headerCustomColor = config.get('headerCustomColor') || '#328dc7';
 
     $scope.corpusStatus
     $scope.corpusStatistics

hyphe_frontend/app/views/prepareCrawls.js

@@ -2,12 +2,13 @@
 
 angular.module('hyphe.preparecrawlsController', [])
 
-  .controller('PrepareCrawls', ['$scope', 'api', 'store', 'utils', '$location', 'QueriesBatcher', 'corpus', '$timeout', '$interval', '$mdDialog'
-  ,function($scope, api, store, utils, $location, QueriesBatcher, corpus, $timeout, $interval, $mdDialog) {
+  .controller('PrepareCrawls', ['$scope', 'api', 'store', 'utils', '$location', 'QueriesBatcher', 'corpus', '$timeout', '$interval', '$mdDialog', 'config'
+  ,function($scope, api, store, utils, $location, QueriesBatcher, corpus, $timeout, $interval, $mdDialog, config) {
 
     $scope.currentPage = 'prepareCrawls'
     $scope.corpusName = corpus.getName()
     $scope.corpusId = corpus.getId()
+    $scope.headerCustomColor = config.get('headerCustomColor') || '#328dc7';
 
     $scope.crawlDepth = 1
     $scope.cautious = false

hyphe_frontend/app/views/prospect.js

@@ -10,11 +10,13 @@ angular.module('hyphe.prospectController', [])
     corpus,
     store,
     $location,
-    $window
+    $window,
+    config
   ) {
     $scope.currentPage = 'prospect'
     $scope.corpusName = corpus.getName()
     $scope.corpusId = corpus.getId()
+    $scope.headerCustomColor = config.get('headerCustomColor') || '#328dc7';
 
     $scope.loading = false  // This flag prevents multiple simultaneous queries
 

hyphe_frontend/app/views/settings.js

@@ -2,12 +2,13 @@
 
 angular.module('hyphe.settingsController', [])
 
-  .controller('settings', ['$scope', 'api', 'utils', '$location', 'corpus'
-  ,function($scope, api, utils, $location, corpus) {
+  .controller('settings', ['$scope', 'api', 'utils', '$location', 'corpus', 'config'
+  ,function($scope, api, utils, $location, corpus, config) {
     $scope.MAXPAGES = 50
     $scope.currentPage = 'settings'
     $scope.corpusName = corpus.getName()
     $scope.corpusId = corpus.getId()
+    $scope.headerCustomColor = config.get('headerCustomColor') || '#328dc7';
     $scope.corpusNotEmpty
     $scope.corpusSettingsEditMode = false
     $scope.options = {}

hyphe_frontend/app/views/tool_networkTagStats.js

@@ -9,11 +9,13 @@ angular.module('hyphe.toolNetworkTagStatsController', [])
     utils,
     md5,
     corpus,
+    config,
     $window
   ) {
     $scope.currentPage = 'toolNetworkTagStats'
     $scope.corpusName = corpus.getName()
     $scope.corpusId = corpus.getId()
+    $scope.headerCustomColor = config.get('headerCustomColor') || '#328dc7';
 
     var pageSize = 5000
     $scope.checkLoadAndUpdateCurrentToken = 0

hyphe_frontend/app/views/tools.js

@@ -12,6 +12,7 @@ angular.module('hyphe.toolsController', ['ngSanitize'])
     $scope.currentPage = 'tools'
     $scope.corpusName = corpus.getName()
     $scope.corpusId = corpus.getId()
+    $scope.headerCustomColor = config.get('headerCustomColor') || '#328dc7';
 
     $scope.goTo = function(url){
       $location.path(url)

hyphe_frontend/app/views/webentity.js

@@ -13,11 +13,13 @@ angular.module('hyphe.webentityController', [])
     $window,
     $timeout,
     $mdColors,
-    autocompletion
+    autocompletion,
+    config
   ){
     $scope.currentPage = 'webentity'
     $scope.corpusName = corpus.getName()
     $scope.corpusId = corpus.getId()
+    $scope.headerCustomColor = config.get('headerCustomColor') || '#328dc7';
 
     $scope.webentity = {id:utils.readWebentityIdFromRoute(), loading:true}
 

hyphe_frontend/app/views/webentity_explorer.js

@@ -10,10 +10,12 @@ angular.module('hyphe.webentityExplorerController', [])
     corpus,
     $location,
     $timeout,
-    $rootScope
+    $rootScope,
+    config
   ) {
     $scope.corpusName = corpus.getName()
     $scope.corpusId = corpus.getId()
+    $scope.headerCustomColor = config.get('headerCustomColor') || '#328dc7';
 
     $scope.explorerActive = false
 

hyphe_frontend/app/views/webentity_pagesNetwork.js

@@ -9,10 +9,12 @@ angular.module('hyphe.webentityPagesNetworkController', [])
     corpus,
     $timeout,
     $window,
-    $mdSidenav
+    $mdSidenav,
+    config
   ) {
     $scope.corpusName = corpus.getName()
     $scope.corpusId = corpus.getId()
+    $scope.headerCustomColor = config.get('headerCustomColor') || '#328dc7';
 
     $scope.webentity = {id:utils.readWebentityIdFromRoute(), loading:true}
     $scope.pages = []

hyphe_frontend/docker-entrypoint.sh

@@ -18,6 +18,9 @@ sed --in-place "s|'serverURL'\s*,.*|'serverURL', window.location.pathname === '/
 [[ ! -z "${HYPHE_BROWSER_URL}" ]] &&
   sed --in-place "s|'hyBroURL'\s*,.*|'hyBroURL', '${HYPHE_BROWSER_URL}')|" $CONFIGFILE
 
+[[ ! -z "${HYPHE_CUSTOM_COLOR}" ]] &&
+  sed --in-place "s|'headerCustomColor'\s*,.*|'headerCustomColor', '${HYPHE_CUSTOM_COLOR}')|" $CONFIGFILE
+
 chmod -R 550 /frontend/app && chown -R nginx:nginx /frontend/app
 
 envsubst '\$NS \$BACKEND_HOST \$BACKEND_PORT' < /etc/nginx/conf.d/docker-nginx-vhost.template > /etc/nginx/conf.d/default.conf