feat: make all settings expandables

Author: johannesjo

app-src/scripts/collapsible/_collapsible-d.scss

@@ -8,6 +8,10 @@ collapsible {
   .collapsible-title {
     cursor: pointer;
 
+    &:focus{
+      outline: none;
+    }
+
     .collapsible-expand-icon {
       transition: all 200ms;
     }

app-src/scripts/routes/settings/_settings-c.scss

@@ -1,36 +1,45 @@
 .page-settings {
   text-align: left;
 
-  h1 {
-    // NOTE: this is not working
-    break-after: avoid;
+  collapsible {
+    position: relative;
   }
 
-  @media(min-width: $layout-gt-sm) {
-    column-count: 2;
-    section {
-      display: inline-block;
-      width: 100%;
-      overflow: hidden;
-      break-inside: avoid;
-      -webkit-column-break-inside: avoid;
+  .collapsible-title {
+    font-size: 18px;
+    margin-top: 0;
+    max-width: 90%;
+    display: block;
+  }
+
+  .collapsible-panel {
+    overflow: visible;
+    padding-top: 10px;
+
+    > * {
+      // for help icon positioning
+      position: static;
     }
   }
 
-  @media(min-width: $layout-gt-lg) {
-    column-count: 3;
+  .help-btn {
+    top: -8px;
+    right: -8px;
+    visibility: hidden;
+    animation: 0.3s help-ico-animation ease-in-out;
+    animation-fill-mode: forwards;
+    // wait for slide up
+    animation-delay: 0.3s;
   }
 
-  .keep-together {
-    display: inline-block;
-    width: 100%;
+  .ng-leave .help-btn {
+    display: none;
   }
 
   .config-section {
     padding: 15px;
     margin-bottom: 10px;
     background: #ffffff;
-    position: relative;
 
     @include dark-theme {
       background-color: $dark-theme-bg-lighter;
@@ -40,6 +49,17 @@
     }
   }
 
+  @media(min-width: $layout-gt-sm) {
+    .settings-col {
+      &:first-child {
+        margin-right: 10px;
+      }
+      &:last-child {
+        margin-left: 10px;
+      }
+    }
+  }
+
   @media(max-width: $layout-xs) {
     .keyboard-settings {
       display: none;
@@ -57,4 +77,21 @@
       }
     }
   }
+}
+
+@keyframes help-ico-animation {
+  0% {
+    -webkit-transform: scale(0);
+    transform: scale(0);
+    visibility: visible;
+  }
+  50% {
+    -webkit-transform: scale(1.1);
+    transform: scale(1.1);
+  }
+  100% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+    visibility: visible;
+  }
 }

app-src/scripts/routes/settings/settings-c.html

@@ -1,50 +1,81 @@
 <div class="page-settings">
 
-  <section class="config-section"
-           md-whiteframe="2">
-    <project-settings all-projects="vm.allProjects"
-                      selected-current-project="vm.selectedCurrentProject"></project-settings>
-  </section>
+  <div layout-gt-sm="row">
+    <div flex-gt-sm="50"
+         class="settings-col">
+      <h1 class="md-title">Global Settings</h1>
 
+      <section class="config-section"
+               md-whiteframe="2">
+        <collapsible collapsible-title="Projects"
+                     icon="account_balance">
+          <project-settings all-projects="vm.allProjects"
+                            selected-current-project="vm.selectedCurrentProject"></project-settings>
+        </collapsible>
+      </section>
 
-  <section class="config-section"
-           md-whiteframe="2">
-    <backup-settings settings="r.config"></backup-settings>
-  </section>
 
+      <section class="config-section"
+               md-whiteframe="2">
+        <collapsible collapsible-title="Backup and Sync"
+                     icon="swap_vert">
 
-  <section class="config-section keyboard-settings"
-           md-whiteframe="2">
-    <keyboard-settings keys="r.keys"></keyboard-settings>
-  </section>
+          <backup-settings settings="r.config"></backup-settings>
+        </collapsible>
+      </section>
 
 
-  <section class="config-section"
-           md-whiteframe="2">
-    <misc-settings settings="r.config"></misc-settings>
-  </section>
+      <section class="config-section keyboard-settings"
+               md-whiteframe="2">
+        <collapsible collapsible-title="Keyboard Shortcuts"
+                     icon="keyboard">
 
+          <keyboard-settings keys="r.keys"></keyboard-settings>
+        </collapsible>
+      </section>
 
-  <div class="keep-together">
-    <h1 class="md-title">Project Specific Settings</h1>
 
-    <section class="config-section"
-             md-whiteframe="2">
-      <theme-settings current-theme="r.theme"
-                      is-current-project-theme="true"></theme-settings>
-    </section>
-  </div>
+      <section class="config-section"
+               md-whiteframe="2">
+        <collapsible collapsible-title="Misc Settings"
+                     icon="settings">
+
+          <misc-settings settings="r.config"></misc-settings>
+        </collapsible>
+      </section>
+    </div>
+
+    <div flex-gt-sm="50"
+         class="settings-col">
 
-  <section class="config-section"
-           md-whiteframe="2">
-    <jira-settings settings="r.jiraSettings"></jira-settings>
-  </section>
+      <h1 class="md-title">Project Specific Settings</h1>
 
+      <section class="config-section"
+               md-whiteframe="2">
+        <collapsible collapsible-title="Theme Settings"
+                     icon="color_lens">
+          <theme-settings current-theme="r.theme"
+                          is-current-project-theme="true"></theme-settings>
+        </collapsible>
+      </section>
 
-  <section class="config-section"
-           md-whiteframe="2">
-    <git-settings settings="r.git"></git-settings>
-  </section>
+      <section class="config-section"
+               md-whiteframe="2">
+        <collapsible collapsible-title="Jira-Integration">
 
+          <jira-settings settings="r.jiraSettings"></jira-settings>
+        </collapsible>
+      </section>
 
+
+      <section class="config-section"
+               md-whiteframe="2">
+        <collapsible collapsible-title="Git Integration"
+                     icon="github-circle">
+
+          <git-settings settings="r.git"></git-settings>
+        </collapsible>
+      </section>
+    </div>
+  </div>
 </div>

app-src/scripts/settings/backup-settings/backup-settings-d.html

@@ -1,8 +1,3 @@
-<h2 class="md-title">
-  <ng-md-icon icon="swap_vert"></ng-md-icon>
-  Backup and Sync
-</h2>
-
 <help-section>
   <p>Here you can export all your data as a
     <strong>JSON</strong> for backups, but also to use it in a different context (e.g. you might want to export your projects in the browser and import them into the desktop version).

app-src/scripts/settings/git-settings/git-settings-d.html

@@ -1,4 +1,3 @@
-<h2 class="md-title">Git integration</h2>
 <help-section>
   <p>Here you can configure SuperProductivity to list open GithHub issues for a specific repository in the task creation panel in the daily planning view. They will be listed as suggestions and will provide a link to the issue as well as more information about it.</p>
   <p>In addition you can automatically add and sync all open issues to your task backlog.</p>

app-src/scripts/settings/jira-settings/jira-settings-d.html

@@ -1,5 +1,3 @@
-<h2 class="md-title">Jira-Integration</h2>
-
 <help-section ng-if="vm.hasJiraSupport">
   <div class="md-caption">Basic configuration</div>
   <p>Please provide a username (can be found on your profile page) and an

app-src/scripts/settings/keyboard-settings/keyboard-settings-d.html

@@ -1,8 +1,3 @@
-<h2 class="md-title">
-  <ng-md-icon icon="keyboard"></ng-md-icon>
-  Keyboard Shortcuts
-</h2>
-
 <help-section>
   <p>Here you can configure all keyboard shortcuts.</p>
   <p>Click on the text input and enter the desired keyboard combination. Hit enter to save and Escape to abort.</p>

app-src/scripts/settings/misc-settings/misc-settings-d.html

@@ -1,8 +1,3 @@
-<h2 class="md-title">
-  <ng-md-icon icon="settings"></ng-md-icon>
-  Misc Settings
-</h2>
-
 <help-section>
   <div class="md-caption">Auto-start next task on done</div>
   <p>Decide if you want to automatically start the next task, once you mark a task as done.</p>

app-src/scripts/settings/project-settings/project-settings-d.html

@@ -1,8 +1,3 @@
-<h2 class="md-title">
-  <ng-md-icon icon="account_balance"></ng-md-icon>
-  Project
-</h2>
-
 <help-section>
   <p>Here you can add, edit, switch and delete different projects.</p>
 </help-section>

app-src/scripts/settings/theme-settings/theme-settings-d.html

@@ -1,4 +1,4 @@
-<h2 class="md-title">
+<h2 class="md-caption">
   <ng-md-icon icon="color_lens"></ng-md-icon>
   Select Theme
 </h2>