Initial commit of the theme working in mailspring, more work to be do…

…ne, will track these through issues. Main focus on this update was on improving the look of the main menu bar, and getting the original forked theme running on mailspring.

README.md

@@ -1,16 +1,15 @@
-| WIP: This theme is still being updated from the original n1-agapanthus theme created by taniadaniela to work for MailSpring. Importing it in it's current state will result in a broken UI. |
-| --- |
-
 # Agapanthus
 
-Inspired on Inbox by Google. Based on [Taiga](https://github.com/noahbuscher/N1-Taiga).
+Mailspring theme inspired by Inbox, and Google Cloud Console. Forked from [Agapanthus for Nylas Mail Client](https://github.com/taniadaniela/n1-agapanthus).
+
+**_Previews below have not yet been updated to reflect newest changes as the theme is still a work in progress._**
 
 ![preview](./preview.jpg)
 
 ![preview](./preview-compose.jpg)
 
 ## Installing
 
-1. [Download](https://getmailspring.com/) Mailspring email client if you have not yet
-2. [Just download the master branch](https://github.com/danieljimeneznz/mailspring-agapanthus)
-3. Open `Install theme` and select the folder.
+1. [Download Mailspring email client.](https://getmailspring.com/)
+2. [Download the master branch.](https://github.com/danieljimeneznz/agapanthus-mailspring-theme)
+3. Open `Install Theme...` and select the folder.

package.json

@@ -1,12 +1,21 @@
 {
-  "name": "N1-Agapanthus",
-  "theme": "Agapanthus",
-  "version": "1.1.0",
-  "description": "A clean, Inbox-inspired theme for Nylas N1",
+  "name": "Agapanthus",
+  "theme": "agapanthus-mailspring",
+  "version": "2.0.0-rc1",
+  "description": "A clean, Inbox-inspired theme for Mailspring",
   "license": "GPL-3.0",
   "engines": {
-    "nylas": "*"
+    "mailspring": "*"
   },
-  "styleSheets": ["controls", "email-frame", "sidebar", "threads", "notifications", "compose-button", "headerbar","compose"],
+  "styleSheets": [
+    "compose-button",
+    "compose",
+    "controls",
+    "email-frame",
+    "notifications",
+    "sheet-toolbar",
+    "sidebar",
+    "threads"
+  ],
   "private": true
 }

styles/compose-button.less

@@ -1,26 +1,23 @@
-@import "variables";
 @import "ui-variables";
 
-.sheet-toolbar{
-  .btn.btn-toolbar.item-compose{
-      position: fixed;
-      z-index: 999;
-      background: @compose-buttom-color!important;
-      bottom: 22px;
-      height: 52px;
-      display: block;
-      right: 12px;
-      border-radius: @compose-buttom-radius!important;
-      padding: 19px;
-      padding-top: 15px;
-      box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28) !important;
-      img.content-mask{
-          transition: transform 400ms ease-in;
-      }
-      &:hover{
-        img.content-mask{
-          transform: rotate(360deg);
-        }
-      }
+.sheet-toolbar {
+  .btn.btn-toolbar.item-compose {
+    position: fixed;
+    z-index: 999;
+    background: @compose-button-color!important;
+    bottom: 22px;
+    height: 52px;
+    display: block;
+    right: 12px;
+    border-radius: @compose-button-radius!important;
+    padding: 19px;
+    padding-top: 15px;
+    box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28) !important;
+    img.content-mask {
+      transition: transform 400ms ease-in;
+    }
+    &:hover {
+      box-shadow: 0 0 8px rgba(0, 0, 0, 0.14), 0 8px 16px rgba(0, 0, 0, 0.28) !important;
+    }
   }
 }

styles/compose.less

@@ -1,11 +1,14 @@
-@import "variables";
 @import "ui-variables";
 
-
-  .scroll-region-content{
-    .scroll-region-content-inner{
-      .composer-centered{
-        background: @white !important;
-      }
+.scroll-region-content {
+  .scroll-region-content-inner {
+    .composer-centered {
+      background: @white !important;
     }
   }
+}
+
+// TODO: TEMPORARY VARIABLE SO THIS CAN BE USED
+.composer-action-bar-wrap {
+  background: #666 !important;
+}

styles/controls.less

@@ -1,9 +1,13 @@
-@import "variables";
+@import "ui-variables";
 
 /**
  * Buttons
  */
-.btn-toolbar, .token, .actions>.btn, .new-package>.btn, .appearance-mode-switch>.btn {
+.btn-toolbar,
+.token,
+.actions > .btn,
+.new-package > .btn,
+.appearance-mode-switch > .btn {
   box-shadow: none !important;
   background: @white !important;
   border: 1px solid @taiga-light !important;
@@ -19,10 +23,11 @@
   }
 }
 
-.composer-action-bar-plugins, .composer-action-bar-content{
-  .btn-toolbar{
-    .content-mask{
-      background: @taiga-dark !important;
+.composer-action-bar-plugins,
+.composer-action-bar-content {
+  .btn-toolbar {
+    .content-mask {
+      background: white !important;
     }
   }
 }
@@ -36,8 +41,9 @@
 /**
  * Placeholder
  */
-::-webkit-input-placeholder { /* WebKit, Blink, Edge */
-    color: @white;
+::-webkit-input-placeholder {
+  /* WebKit, Blink, Edge */
+  color: @white;
 }
 
 /**
@@ -52,16 +58,14 @@
   }
 }
 
-.toolbar-activity{
+.toolbar-activity {
   padding-right: 10px;
   .content-mask {
     background: @white !important;
     border: none !important;
   }
 }
 
-
-
 body.platform-win32 {
   .sheet-toolbar-container {
     .btn-toolbar {
@@ -105,14 +109,14 @@ body.platform-win32 {
   }
 
   .secondary-items {
-    .item  {
+    .item {
       cursor: pointer;
       color: @taiga-light !important;
       background: @white !important;
 
       .button-dropdown {
         img {
-          background: @taiga-light  !important;
+          background: @taiga-light !important;
         }
       }
     }
@@ -131,10 +135,10 @@ body.platform-win32 {
  * Search bar
  */
 
- .search-bar .menu .header-container input.empty {
-   background: @inbox-lighter;
-   color: @white;
- }
+.search-bar .menu .header-container input.empty {
+  background: @inbox-lighter;
+  color: @white;
+}
 
 .content-container {
   .item.selected {

styles/email-frame.less

@@ -1,4 +1,4 @@
-@import "variables";
+@import "ui-variables";
 
 .ignore-in-parent-frame {
   body {

styles/notifications.less

@@ -1,6 +1,9 @@
-@import "variables";
+@import "ui-variables";
 
-.notifications-sticky, .notification-developer, .notifications-sticky-item, .notification-info {
+.notifications-sticky,
+.notification-developer,
+.notifications-sticky-item,
+.notification-info {
   color: @white !important;
   background: @taiga-accent !important;
 
@@ -13,4 +16,3 @@
 .notification {
   color: @white !important;
 }
-

styles/sheet-toolbar.less

@@ -0,0 +1,70 @@
+@import "ui-variables";
+
+div:not(.layout-mode-popout) {
+  .sheet-toolbar {
+    box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);
+    border: none;
+    height: @header-bar-height;
+    max-height: @header-bar-height;
+    .sheet-toolbar-container {
+      background: @toolbar-bg;
+      > div {
+        height: @header-bar-height;
+        padding-top: 5px;
+      }
+
+      .item-container {
+        padding-right: 0 !important;
+      }
+
+      .toolbar-activity {
+        padding: 0 !important;
+        margin-right: 1em !important;
+      }
+    }
+    div.item-container {
+      padding-right: 2em;
+    }
+    .toolbar-ThreadList {
+      padding-top: 0px !important;
+
+      .thread-search-bar {
+        background: @inbox-lighter;
+        height: 34px !important;
+        line-height: 34px !important;
+        box-shadow: none !important;
+        border-radius: 2px !important;
+
+        .suggestions {
+          top: 34px !important;
+        }
+
+        .layer-text {
+          color: @white;
+        }
+
+        .layer-tokens {
+          display: none;
+        }
+
+        img.search-accessory.search {
+          content: url("mailspring://agapanthus-mailspring/img/searchloupe-white@2x.png");
+          background-size: auto;
+        }
+      }
+    }
+  }
+}
+
+// TODO: CHECK WHAT THIS IS DOING...
+
+/*
+ * Compose email window
+ */
+.sheet-toolbar-container.mode-popout {
+  background: @taiga-dark !important;
+}
+
+.window-title {
+  color: @white;
+}