Header layout and options

2026-04-23 07:10:41 +00:00 · 2020-06-05 19:19:31 +02:00
parent 7afaf6a5c3
commit cf46776890
5 changed files with 175 additions and 33 deletions
--- a/src/app/app.ts
+++ b/src/app/app.ts
@@ -23,14 +23,26 @@ const addChecked = (el: HTMLElement) => {
  }, 2000)
 }

+const languages: { [key: string]: string } = {
+  'en': 'English',
+  'pt': 'Português',
+  'ru': 'Русский',
+  'zh-CN': '简体中文'
+}
+
 Promise.all([
  fetch('../locales/schema/en.json').then(r => r.json()),
  fetch('../locales/app/en.json').then(r => r.json())
 ]).then(responses => {
  LOCALES.register('en', {...responses[0], ...responses[1]})
-  LOCALES.language = 'en'

+  const selectedModel = document.getElementById('selected-model')!
  const modelSelector = (document.getElementById('model-selector') as HTMLInputElement)
+  const modelSelectorMenu = document.getElementById('model-selector-menu')!
+  const languageSelector = document.getElementById('language-selector')!
+  const languageSelectorMenu = document.getElementById('language-selector-menu')!
+  const themeSelector = document.getElementById('theme-selector')!
+  const githubLink = document.getElementById('github-link')!
  const treeViewEl = document.getElementById('tree-view')!
  const sourceViewEl = document.getElementById('source-view')!
  const sourceViewOutput = (document.getElementById('source-view-output') as HTMLTextAreaElement)
@@ -58,28 +70,77 @@ Promise.all([
    for (const v in views) {
      views[v].setModel(models[selected])
    }
-    modelSelector.innerHTML = Object.keys(models)
-      .map(m => `<option value=${m}${m === selected ? ' selected' : ''}>
-        ${locale(`generator.${m}`)}</option>`)
-      .join('')
+    selectedModel.textContent = locale(`generator.${selected}`)
    models[selected].invalidate()
  }
-  updateModel(selected)
+
+  const updateLanguage = (key: string) => {
+    LOCALES.language = key
+  
+    document.querySelectorAll('[data-i18n]').forEach(el => {
+      el.textContent = locale(el.attributes.getNamedItem('data-i18n')!.value)
+    })
+    updateModel(selected)
+  }
+  updateLanguage('en')

  Split([treeViewEl, sourceViewEl], {
    sizes: [66, 34]
  })
+  
+  modelSelectorMenu.innerHTML = ''
+  Object.keys(models).forEach(m => {
+    modelSelectorMenu.insertAdjacentHTML('beforeend', 
+      `<div class="btn${m === selected ? ' selected' : ''}">${locale(`generator.${m}`)}</div>`)
+    modelSelectorMenu.lastChild?.addEventListener('click', evt => {
+      updateModel(m)
+      history.pushState({model: m}, m, `../${m}`)
+      modelSelectorMenu.style.visibility = 'hidden'
+    })
+  })

-  modelSelector.addEventListener('change', evt => {
-    const newModel = modelSelector.value
-    updateModel(newModel)
-    history.pushState({model: newModel}, newModel, `../${newModel}`)
+  modelSelector.addEventListener('click', evt => {
+    modelSelectorMenu.style.visibility = 'visible'
+    document.body.addEventListener('click', evt => {
+      modelSelectorMenu.style.visibility = 'hidden'
+    }, { capture: true, once: true })
  })

  window.onpopstate = (evt: PopStateEvent) => {
    updateModel(modelFromPath(location.pathname))
  }

+  languageSelectorMenu.innerHTML = ''
+  Object.keys(languages).forEach(key => {
+    languageSelectorMenu.insertAdjacentHTML('beforeend',
+      `<div class="btn${key === LOCALES.language ? ' selected' : ''}">${languages[key]}</div>`)
+    languageSelectorMenu.lastChild?.addEventListener('click', evt => {
+      updateLanguage(key)
+      languageSelectorMenu.style.visibility = 'hidden'
+    })
+  })
+
+  languageSelector.addEventListener('click', evt => {
+    languageSelectorMenu.style.visibility = 'visible'
+    document.body.addEventListener('click', evt => {
+      languageSelectorMenu.style.visibility = 'hidden'
+    }, { capture: true, once: true })
+  })
+
+  themeSelector.addEventListener('click', evt => {
+    Array.from(themeSelector.children).forEach(el => {
+      if (el.classList.contains('inactive')) {
+        el.classList.remove('inactive')
+      } else {
+        el.classList.add('inactive')
+      }
+    })
+  })
+
+  githubLink.addEventListener('click', evt => {
+    location.href = 'https://github.com/misode/misode.github.io'
+  })
+
  sourceControlsToggle.addEventListener('click', evt => {
    sourceControlsMenu.style.visibility = 'visible'
    document.body.addEventListener('click', evt => {
@@ -102,9 +163,5 @@ Promise.all([
    downloadAnchor.click()
  })

-  document.querySelectorAll('[data-i18n]').forEach(el => {
-    el.textContent = locale(el.attributes.getNamedItem('data-i18n')!.value)
-  })
-
  document.body.style.visibility = 'initial'
 })
--- a/src/generator.html
+++ b/src/generator.html
@@ -10,7 +10,26 @@
 <body style="visibility: hidden;">
  <div class="container">
    <div class="header">
-      <select id="model-selector" class="btn"></select>
+      <div class="header-title">
+        <h2 id="selected-model">Loot Table Generator</h2>
+        <div class="nav-selector">
+          <svg id="model-selector" class="btn model-selector" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="32" height="32"><path fill-rule="evenodd" d="M12.78 6.22a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06 0L3.22 7.28a.75.75 0 011.06-1.06L8 9.94l3.72-3.72a.75.75 0 011.06 0z"></path></svg>
+          <div class="nav-selector-menu btn-group" id="model-selector-menu"></div>
+        </div>
+      </div>
+      <div class="nav">
+        <div class="nav-item nav-selector">
+          <svg id="language-selector" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="24" height="24"><path fill-rule="evenodd" d="M1.543 7.25h2.733c.144-2.074.866-3.756 1.58-4.948.12-.197.237-.381.353-.552a6.506 6.506 0 00-4.666 5.5zm2.733 1.5H1.543a6.506 6.506 0 004.666 5.5 11.13 11.13 0 01-.352-.552c-.715-1.192-1.437-2.874-1.581-4.948zm1.504 0h4.44a9.637 9.637 0 01-1.363 4.177c-.306.51-.612.919-.857 1.215a9.978 9.978 0 01-.857-1.215A9.637 9.637 0 015.78 8.75zm4.44-1.5H5.78a9.637 9.637 0 011.363-4.177c.306-.51.612-.919.857-1.215.245.296.55.705.857 1.215A9.638 9.638 0 0110.22 7.25zm1.504 1.5c-.144 2.074-.866 3.756-1.58 4.948-.12.197-.237.381-.353.552a6.506 6.506 0 004.666-5.5h-2.733zm2.733-1.5h-2.733c-.144-2.074-.866-3.756-1.58-4.948a11.738 11.738 0 00-.353-.552 6.506 6.506 0 014.666 5.5zM8 0a8 8 0 100 16A8 8 0 008 0z"></path></svg>
+          <div class="nav-selector-menu btn-group" id="language-selector-menu"></div>
+        </div>
+        <div id="theme-selector" class="nav-item">
+          <svg id="theme-selection-light" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="24" height="24"><path fill-rule="evenodd" d="M8 10.5a2.5 2.5 0 100-5 2.5 2.5 0 000 5zM8 12a4 4 0 100-8 4 4 0 000 8zM8 0a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0V.75A.75.75 0 018 0zm0 13a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 018 13zM2.343 2.343a.75.75 0 011.061 0l1.06 1.061a.75.75 0 01-1.06 1.06l-1.06-1.06a.75.75 0 010-1.06zm9.193 9.193a.75.75 0 011.06 0l1.061 1.06a.75.75 0 01-1.06 1.061l-1.061-1.06a.75.75 0 010-1.061zM16 8a.75.75 0 01-.75.75h-1.5a.75.75 0 010-1.5h1.5A.75.75 0 0116 8zM3 8a.75.75 0 01-.75.75H.75a.75.75 0 010-1.5h1.5A.75.75 0 013 8zm10.657-5.657a.75.75 0 010 1.061l-1.061 1.06a.75.75 0 11-1.06-1.06l1.06-1.06a.75.75 0 011.06 0zm-9.193 9.193a.75.75 0 010 1.06l-1.06 1.061a.75.75 0 11-1.061-1.06l1.06-1.061a.75.75 0 011.061 0z"></path></svg>
+          <svg id="theme-selection-dark" class="inactive" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="24" height="24"><path fill-rule="evenodd" d="M9.598 1.591a.75.75 0 01.785-.175 7 7 0 11-8.967 8.967.75.75 0 01.961-.96 5.5 5.5 0 007.046-7.046.75.75 0 01.175-.786zm1.616 1.945a7 7 0 01-7.678 7.678 5.5 5.5 0 107.678-7.678z"></path></svg>
+        </div>
+        <div id="github-link" class="nav-item">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="28" height="28"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg>
+        </div>
+      </div>
    </div>
    <div class="content">
      <div class="tree" id="tree-view"></div>
@@ -22,7 +41,7 @@
            <span data-i18n="copy"></span>
          </button>
        </div>
-        <div class="source-controls-more" id="source-controls-menu">
+        <div class="source-controls-menu btn-group" id="source-controls-menu">
          <button class="btn" id="source-controls-download">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.47 10.78a.75.75 0 001.06 0l3.75-3.75a.75.75 0 00-1.06-1.06L8.75 8.44V1.75a.75.75 0 00-1.5 0v6.69L4.78 5.97a.75.75 0 00-1.06 1.06l3.75 3.75zM3.75 13a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5z"></path></svg>
            <span data-i18n="download"></span>
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -1,8 +1,9 @@
 {
-  "generator.loot-table": "Loot Table",
-  "generator.predicate": "Predicate",
-  "generator.advancement": "Advancement",
-  "generator.sandbox": "Sandbox",
+  "generator.loot-table": "Loot Table Generator",
+  "generator.predicate": "Predicate Generator",
+  "generator.advancement": "Advancement Generator",
+  "generator.sandbox": "Sandbox Generator",
+  "language": "Language",
  "copy": "Copy",
  "download": "Download",
  "share": "Share"
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -4,12 +4,19 @@
  padding: 0;
 }

+body {
+  font-size: 18px;
+  font-family: Arial, Helvetica, sans-serif;
+}
+
 .container {
  background-color: #ffffff;
 }

 .header {
  display: flex;
+  justify-content: space-between;
+  align-items: center;
  padding: 10px;
  height: 56px;
  /* background: #2e2e2e; */
@@ -17,6 +24,62 @@
  color: #343a40
 }

+.header-title {
+  display: flex;
+}
+
+.header-title h2 {
+  margin-right: 10px;
+}
+
+.header-title .model-selector {
+  padding: 2px;
+}
+
+.nav {
+  display: flex;
+  align-items: center;
+}
+
+.nav-item {
+  display: flex;
+  align-items: center;
+  fill: #343a40;
+  cursor: pointer;
+  margin-left: 32px;
+  user-select: none;
+}
+
+.nav-item:hover {
+  fill: #565d64;
+}
+
+.nav-item .inactive {
+  display: none;
+}
+
+.nav-item span {
+  font-size: 1.1em;
+}
+
+.nav-selector {
+  position: relative;
+}
+
+.nav-selector-menu {
+  display: flex;
+  flex-direction: column;
+  visibility: hidden;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  margin-top: 10px;
+  z-index: 10;
+  font-size: 1rem;
+  border-radius: 3px;
+  background-color: #ffffff;
+}
+
 .content {
  display: flex;
  height: calc(100vh - 56px);
@@ -60,7 +123,7 @@
  margin-right: 5px;
 }

-.source-controls-more {
+.source-controls-menu {
  display: flex;
  visibility: hidden;
  flex-direction: column;
@@ -70,11 +133,6 @@
  padding: 5px;
 }

-.source-controls .btn,
-.source-controls-more .btn {
-  background: #1f2020a6;
-}
-
 .gutter.gutter-horizontal {
  border-left: 2px solid #ccc;
  float: left;
@@ -85,18 +143,20 @@
  display: flex;
  align-items: center;
  border: none;
+  border-radius: 3px;
  color: #ffffff;
  fill: #ffffff;
  background-color: #1f2020a6;
  padding: 7px 11px;
  cursor: pointer;
  outline: none;
+  font-size: 1rem;
  transition: background-color 0.2s;
 }

 .btn.check {
-  fill: #97fa55;
-  color: #97fa55;
+  fill: #a5e77a;
+  color: #a5e77a;
 }

 .btn svg:not(:last-child) {
@@ -106,3 +166,13 @@
 .btn:hover {
  background-color: #5d5f5fa6;
 }
+
+.btn-group .btn:not(:last-child) {
+  border-bottom-right-radius: 0px;
+  border-bottom-left-radius: 0px;
+}
+
+.btn-group .btn:not(:first-child) {
+  border-top-right-radius: 0px;
+  border-top-left-radius: 0px;
+}
--- a/src/styles/nodes.css
+++ b/src/styles/nodes.css
@@ -1,9 +1,4 @@

-.node {
-  font-size: 18px;
-  font-family: Arial, Helvetica, sans-serif
-}
-
 .list-entry:not(:last-child),
 .map-entry:not(:last-child),
 .object-node:not(:last-child) > .object-fields {