💄Update boilerplate generator theme (ampproject#2047)

* 💬 Change order of items * 💄 Update styles and UI * 🐛 Fix dropdown bug on touch devices * 💄 Update stylesheet to match other code-snippets * ♻️ Move changes to boilerplate specific stylesheet * 💄 Change behaviour of dropdown * 💄 Increase line-height and font-size * 💄 Add indicator state to dropdown caret
getzaymo · May 13, 2019 · 77cad07 · 77cad07
1 parent eb9b7b7
commit 77cad07
Show file tree

Hide file tree

Showing 6 changed files with 166 additions and 27 deletions.
diff --git a/boilerplate/build.js b/boilerplate/build.js
@@ -39,7 +39,7 @@ function initConfig() {
     formats: require('./data/formats.json'),
     templates: templates.find('./templates/files'),
     highlightTheme:
-      io.readFile(path.join(__dirname, '../node_modules/highlight.js/styles/monokai.css')),
+      io.readFile(path.join(__dirname, './templates/styles/code-snippet.scss')),
   };
   // assign default template
   let defaultTemplate;

diff --git a/boilerplate/data/formats.json b/boilerplate/data/formats.json
@@ -8,12 +8,12 @@
     "id": "stories",
     "name": "Stories"
   },
-  {
-    "id": "email",
-    "name": "Email"
-  },
   {
     "id": "ads",
     "name": "Ads"
+  },
+  {
+    "id": "email",
+    "name": "Email"
   }
 ]
diff --git a/boilerplate/templates/index.html b/boilerplate/templates/index.html
@@ -138,28 +138,42 @@
     <section class="config">
       <h3>Select Format</h3>
       <p>What do you want to build with AMP?</p>
-      <ul class="ap-m-format-toggle">
-        {{#formats}}
-        <li class="ap-m-format-toggle-format">
-          <div class="ap-m-format-toggle-link ap-m-format-toggle-link-{{id}} {{^default}}inactive{{/default}} {{#default}}active{{/default}}" 
-             [class]="'ap-m-format-toggle-link ap-m-format-toggle-link-{{id}} ' + (config.format == '{{id}}' ? 'active' : 'inactive')"
-          on="tap:AMP.setState({
-              config: {
-                format: '{{id}}',
-                changed: true
-              }
-            })"
-            role="button"
-            tabindex="0">
-            <div class="ap-a-ico">
-              <svg>
-                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-{{id}}"></use>
-              </svg>
-            </div>AMP
-            <br>{{name}}</div>
-        </li>
-        {{/formats}}
-      </ul>
+      <div class="ap-m-format-toggle" [class]="'ap-m-format-toggle ' + (config.open ? 'open' : '')">
+        <button class="ap-m-format-toggle-selected ap-m-format-toggle-link-websites" [class]="'ap-m-format-toggle-selected ap-m-format-toggle-link-' + config.format" on="tap:AMP.setState({config: {open: !config.open}})">
+          <span class="ap-a-ico">
+            <svg>
+              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-websites" [hidden]="config.format != 'websites'"></use>
+              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-stories" hidden [hidden]="config.format != 'stories'"></use>
+              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-ads" hidden [hidden]="config.format != 'ads'"></use>
+              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-email" hidden [hidden]="config.format != 'email'"></use>
+            </svg>
+          </span>
+          <span [text]="config.format">websites</span>
+          <span class="ap-a-ico ap-m-format-toggle-angle">
+            <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"></use></svg>
+          </span>
+        </button>
+        <div class="ap-m-format-toggle-formats">
+          {{#formats}}
+            <a class="ap-m-format-toggle-link ap-m-format-toggle-link-{{id}} {{^default}}inactive{{/default}} {{#default}}active{{/default}}" 
+              [class]="'ap-m-format-toggle-link ap-m-format-toggle-link-{{id}} ' + (config.format == '{{id}}' ? 'active' : 'inactive')"
+            on="tap:AMP.setState({
+                config: {
+                  format: '{{id}}',
+                  changed: true,
+                  open: false
+                }
+              })"
+              role="button"
+              tabindex="0">
+              <span class="ap-a-ico">
+                <svg>
+                  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-{{id}}"></use>
+                </svg>
+              </span>{{id}}</a>
+          {{/formats}}
+        </div>
+      </div>
 
       <div [hidden]="config.format == 'email'">
       <h3>Select Features</h3>

diff --git a/boilerplate/templates/styles/code-snippet.scss b/boilerplate/templates/styles/code-snippet.scss
@@ -0,0 +1,80 @@
+/*
+Monokai style
+*/
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  background: #272822; color: #ddd;
+}
+
+.hljs-tag {
+  color: #f8f8f2;
+}
+
+.hljs-number {
+  color: #ae81ff;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-literal,
+.hljs-strong,
+.hljs-name {
+  color: #f15a5a;
+}
+
+.hljs-code,
+.hljs-attribute {
+  color: #66d9ef;
+}
+
+.hljs-class .hljs-title {
+  color: #ffffff;
+}
+
+.hljs-symbol,
+.hljs-regexp,
+.hljs-link {
+  color: #bf79db;
+}
+
+.hljs-string {
+  color: #e6db74;
+}
+
+.hljs-attr,
+.hljs-bullet,
+.hljs-subst,
+.hljs-title,
+.hljs-section,
+.hljs-emphasis,
+.hljs-type,
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-selector-pseudo,
+.hljs-addition,
+.hljs-variable,
+.hljs-template-tag,
+.hljs-template-variable {
+  color: #a6e22e;
+}
+
+.hljs-comment,
+.hljs-quote,
+.hljs-deletion,
+.hljs-meta {
+  color: #75715e;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-literal,
+.hljs-doctag,
+.hljs-title,
+.hljs-section,
+.hljs-type,
+.hljs-selector-id {
+  font-weight: normal;
+}
diff --git a/boilerplate/templates/styles/main.scss b/boilerplate/templates/styles/main.scss
@@ -28,10 +28,52 @@
   pre {
     max-height: 100%;
   }
+  code {
+    @include txt-mono;
+  }
 }
 
 .#{molecule('format-toggle')} {
   margin-left: 0;
+  max-width: 240px;
+
+  .#{molecule('format-toggle')}-angle {
+    transition: all 0.2s ease;
+    transition-delay: 0.05s;
+  }
+
+  &.open .#{molecule('format-toggle')}-angle {
+    transform: rotate(-180deg);
+  }
+
+  &-link {
+    &.active {
+      display: none;
+    }
+  }
+
+  &-link,
+  &-selected {
+    line-height: 2rem;
+    font-size: 16px;
+  }
+
+  &-formats {
+    .#{molecule('format-toggle')}-selected:focus + &,
+    .#{molecule('format-toggle')}-selected:hover + &,
+    &:focus-within,
+    &:hover {
+      pointer-events: none;
+      opacity: 0;
+      transform: translateY(-20px);
+    }
+
+    .#{molecule('format-toggle')}.open & {
+      pointer-events: auto;
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
 }
 
 main {

diff --git a/frontend/scss/components/molecules/format-toggle.scss b/frontend/scss/components/molecules/format-toggle.scss
@@ -19,6 +19,9 @@
   }
 
   &-selected {
+    .amp-mode-touch & {
+      position: relative;
+    }
     border: 0;
 
     &:focus, &:hover {