UI updates

4 years ago · 0d6cfa64c4
parent 0a4d777953
commit 0d6cfa64c4
4 changed files with 147 additions and 17 deletions
--- a/src/drivers/webextension/css/styles.css
+++ b/src/drivers/webextension/css/styles.css
@ -87,9 +87,49 @@ a, a:focus, a:hover {
 }

 .footer__heading {
+  cursor: pointer;
+  display: flex;
+}
+
+.footer__heading-text {
+  flex: 1 0;
+  font-size: 1rem;
  font-weight: bold;
 }

+.footer--collapsed .footer__heading {
+  font-weight: inherit;
+}
+
+.footer--collapsed .footer__heading-text {
+  font-size: .9rem;
+  font-weight: inherit;
+  opacity: .8;
+}
+
+.footer__toggle {
+  flex: 0 1;
+}
+
+.footer--hidden {
+  display: none;
+}
+
+.footer__heading {
+  cursor: pointer;
+  display: flex;
+}
+
+.footer__toggle {
+  fle
+  flex: 1;
+  text-align: right;
+}
+
+.footer__toggle--hidden {
+  display: none;
+}
+
 .footer__content {
  font-size: .85rem;
  letter-spacing: .5px;
@ -98,19 +138,45 @@ a, a:focus, a:hover {
  max-width: 400px;
 }

-.footer__button, .footer__button:active, .footer__button:hover {
+.footer--collapsed .footer__content {
+  display: none;
+}
+
+.footer__button {
+  text-align: right;
+}
+
+.footer__button-link, .footer__button-link:active, .footer__button-link:hover {
  color: var(--color-primary);
-  display: block;
+  display: inline-block;
  font-size: .85rem;
  font-weight: bold;
-  margin-top: .5rem;
+  margin: -.3rem -.5rem -.5rem 0;
+  padding: .4rem 1rem .3rem 1rem;
+  position: relative;
  text-decoration: none;
  text-align: right;
 }

+.footer__button-link:hover:before {
+  background: var(--color-primary);
+  border-radius: 3px;
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  opacity: .1;
+}
+
+.footer--collapsed .footer__button {
+  display: none;
+}
+
 .footer__icon {
  height: 1.2rem;
-  margin: 0 .2rem .2rem 0;
+  margin: 0 -.4rem .1rem .2rem;
  width: 1.2rem;
  vertical-align: middle;
 }
--- a/src/drivers/webextension/html/popup.html
+++ b/src/drivers/webextension/html/popup.html
@ -40,7 +40,7 @@

    <div class="detections detections--hidden"></div>

-    <div class="terms">
+    <div class="terms terms--hidden">
      <div class="terms__content" data-i18n="termsContent"></div>

      <div class="terms__buttons">
@ -89,22 +89,33 @@

    <div class="footer footer--hidden">
      <div class="footer__heading">
-        Generate sales leads
+        <div class="footer__heading-text">&nbsp;</div>
+
+        <div class="footer__toggle footer__toggle--close">
+          <svg class="footer__icon" viewBox="0 0 24 24">
+            <path fill="currentColor" d="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z" />
+          </svg>
+        </div>
+        <div class="footer__toggle footer__toggle--open footer__toggle--hidden">
+          <svg class="footer__icon"viewBox="0 0 24 24">
+            <path fill="currentColor" d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" />
+          </svg>
+        </div>
      </div>

      <div class="footer__content">
-        <p>
-        Find new prospects by the technologies they use. Reach out to customers of Shopify, Magento, Salesforce and others.
-        </p>
+        <p class="footer__content-body">&nbsp;</p>
      </div>

-      <a class="footer__button" href="https://www.wappalyzer.com/lists/?utm_source=popup&utm_medium=extension&utm_campaign=wappalyzer">
+      <div class="footer__button">
+        <a class="footer__button-link" href="#">
+          <span class="footer__button-text">&nbsp;</span>
+
          <svg class="footer__icon" viewBox="0 0 24 24">
-          <path fill="currentColor" d="M6,13H18V11H6M3,6V8H21V6M10,18H14V16H10V18Z" />
+            <path fill="currentColor" d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z" />
          </svg>
-
-        Create a lead list
        </a>
+      </div>
    </div>
 	</body>
 </html>
--- a/src/drivers/webextension/js/popup.js
+++ b/src/drivers/webextension/js/popup.js
@ -5,6 +5,23 @@
 const { agent, open, i18n, getOption, setOption, promisify, sendMessage } =
  Utils

+const footers = [
+  {
+    heading: 'Generate sales leads',
+    body: 'Find new prospects by the technologies they use. Reach out to customers of Shopify, Magento, Salesforce and others.',
+    buttonText: 'Create a lead list',
+    buttonLink:
+      'https://www.wappalyzer.com/lists/?utm_source=popup&utm_medium=extension&utm_campaign=wappalyzer',
+  },
+  {
+    heading: 'Connect Wappalyzer to your CRM',
+    body: 'See the technology stacks of your leads without leaving your CRM. Connect to HubSpot, Pipedrive and many others.',
+    buttonText: 'See all apps',
+    buttonLink:
+      'https://www.wappalyzer.com/lists/?utm_source=popup&utm_medium=extension&utm_campaign=wappalyzer',
+  },
+]
+
 function setDisabledDomain(enabled) {
  if (enabled) {
    document
@ -147,6 +164,42 @@ const Popup = {
      .querySelector('.header__settings')
      .addEventListener('click', () => chrome.runtime.openOptionsPage())

+    // Footer
+    const item = footers[Math.round(Math.random() * (footers.length - 1))]
+
+    document.querySelector('.footer__heading-text').textContent = item.heading
+    document.querySelector('.footer__content-body').textContent = item.body
+    document.querySelector('.footer__button-text').textContent = item.buttonText
+    document.querySelector('.footer__button-link').href = item.buttonLink
+
+    const collapseFooter = await getOption('collapseFooter', false)
+
+    const footer = document.querySelector('.footer')
+    const footerClose = document.querySelector('.footer__toggle--close')
+    const footerOpen = document.querySelector('.footer__toggle--open')
+
+    if (collapseFooter) {
+      footer.classList.add('footer--collapsed')
+      footerClose.classList.add('footer__toggle--hidden')
+      footerOpen.classList.remove('footer__toggle--hidden')
+    }
+
+    document
+      .querySelector('.footer__heading')
+      .addEventListener('click', async () => {
+        const collapsed = footer.classList.contains('footer--collapsed')
+
+        footer.classList[collapsed ? 'remove' : 'add']('footer--collapsed')
+        footerClose.classList[collapsed ? 'remove' : 'add'](
+          'footer__toggle--hidden'
+        )
+        footerOpen.classList[collapsed ? 'add' : 'remove'](
+          'footer__toggle--hidden'
+        )
+
+        await setOption('collapseFooter', !collapsed)
+      })
+
    // Apply internationalization
    i18n()
  },
@ -191,7 +244,7 @@ const Popup = {
   * @param {Array} detections
   */
  async onGetDetections(detections = []) {
-    detections = detections
+    detections = (detections || [])
      .filter(({ confidence }) => confidence >= 50)
      .filter(({ slug }) => slug !== 'cart-functionality')

--- a/src/technologies.json
+++ b/src/technologies.json
@ -10725,7 +10725,7 @@
        "x-litespeed-cache": ""
      },
      "icon": "litespeed-cache.png",
-      "implies": "WordPress",
+      "implies": "LiteSpeed",
      "website": "https://wordpress.org/plugins/litespeed-cache/"
    },
    "Lithium": {