populate themes settings pane

1 files changed, 62 insertions, 5 deletions

diff --git a/src/views/panes/settings/themes.ecr b/src/views/panes/settings/themes.ecr
index a88f24e..9aabffe 100644
--- a/src/views/panes/settings/themes.ecr
+++ b/src/views/panes/settings/themes.ecr
@@ -5,12 +5,69 @@
 >
   <div class='panel panel-default'>
     <div class='panel-heading'>
+      <div class='btn-toolbar'>
+        <div class='btn-group btn-group-sm'>
+          <a
+            href='#'
+            class='btn btn-primary disabled'
+            title='Upload new theme.'
+            data-toggle='modal'
+            data-target='#theme-add-dialog'
+          >
+            <i class='fa fa-plus-circle'></i>
+            Add Theme
+          </a><!-- btn -->
+        </div><!-- btn-group -->
+
+        <div class='btn-group btn-group-sm pull-right'>
+          <a
+            href='#'
+            class='btn btn-default search-toggle'
+            title='Toggle search field.'
+          >
+            <i class='fa fa-fw fa-search'></i>
+          </a><!-- btn-->
+        </div><!-- btn-group -->
+
+        <div class='btn-group btn-group-sm pull-right'>
+          <a
+            href='#'
+            id='themes-reload'
+            class='btn btn-default'
+            title='Reload themes.'
+          >
+            <span class='loading'>
+              <i class='fa fa-fw fa-refresh'></i>
+            </span>
+
+            <span class='loading hidden'>
+              <i class='fa fa-fw fa-spinner fa-spin'></i>
+            </span>
+          </a><!-- #reload -->
+        </div><!-- btn-group -->
+      </div><!-- btn-toolbar -->
+    </div><!-- panel-heading -->
+
+    <div class='panel-heading hidden search-toggle'>
+      <div class='input-group input-group-sm'>
+        <span class='input-group-addon'>
+          <i class='fa fa-search'></i>
+        </span>
+
+        <input
+          type='text'
+          id='themes-q'
+          class='form-control'
+          title='Enter search terms'
+        />
+      </div><!-- input-group -->
     </div><!-- panel-heading -->
 
-    <div id='themes' class='panel-body'>
-      <p>
-        TODO: themes
-      </p>
-    </div><!-- panel-body -->
+    <div id='themes' class='list-group'>
+      <span class='list-group-item disabled'>
+        <i class='fa fa-spinner fa-spin'></i>
+        Loading...
+      </span><!-- list-group-item -->
+    </div><!-- list-group -->
   </div><!-- panel -->
 </div><!-- tab-pane -->