feat(branding): add possibility of logo from config

voorhoede · Jul 27, 2016 · 8d8aed8 · 8d8aed8
1 parent 37c8e9b
commit 8d8aed8
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 3 deletions.
diff --git a/src/index.js b/src/index.js
@@ -10,7 +10,7 @@ window.demoViewer = function(config){
     if (typeof config.modules === 'string') {
         getJson(config.modules, function(err, modules) {
             if (err) { window.console.log('error fetching modules', err); }
-            window.riot.mount(app, { modules: modules, sizes: config.sizes });
+            window.riot.mount(app, { modules: modules, logo: config.logo, sizes: config.sizes });
         });
     } else {
         window.riot.mount(app, config);

diff --git a/src/modules/app/app.tag.html b/src/modules/app/app.tag.html
@@ -1,7 +1,7 @@
 <app>
 
     <header class="app-header clearfix">
-        <module-selector modules="{ opts.modules }" default-module="{ opts.defaultModule }" on-select="{ setModule }">
+        <module-selector modules="{ opts.modules }" logo="{ opts.logo }" default-module="{ opts.defaultModule }" on-select="{ setModule }">
             <yield/>
         </module-selector>
         <button class="button { 'is-active': infoIsOpen }"

diff --git a/src/modules/module-selector/module-selector.css b/src/modules/module-selector/module-selector.css
@@ -43,4 +43,11 @@ module-selector .button {
     padding: 0;
     margin-left: var(--default-margin);
     vertical-align: top;
+}
+
+.module-selector-logo {
+    float: left;
+    margin-right: 0.5rem;
+    max-height: 2.5rem;
+    width: auto;
 }
diff --git a/src/modules/module-selector/module-selector.tag.html b/src/modules/module-selector/module-selector.tag.html
@@ -1,5 +1,5 @@
 <module-selector>
-
+    <img class="module-selector-logo" if="{ opts.logo }" src="{ opts.logo }" alt="">
     <label class="module-selector-label" for="selector">
         <span class="a11y-sr-only">Module</span>
         <select class="module-selector-select" id="selector" name="selector" oninput="{ onModuleSelect }">