[WIP] Add basic support for sharing pedalboards via Patchstorage

html/css/less/blokas.less

@@ -3,6 +3,8 @@
     #bank-library header,
     #cloud-plugins-library header,
     #patchstorage-library header,
+    #patchstorage-pedalboards-library header,
+    #patchstorage-hub header,
     #pedalboards-library header,
     #file-manager-library header {
         background-image: none !important;
@@ -18,6 +20,7 @@
     #bank-library #bank-edit,
     #file-manager-library,
     #patchstorage-library .patchstorage-plugins,
+    #patchstorage-pedalboards-library .patchstorage-plugins,
     #cloud-plugins-library .cloud-plugins {
         background-image: none !important;
     }

html/css/less/main.less

@@ -521,7 +521,7 @@ hr.dotted {
   float: right;
   font-size: 21px;
 }
-#cloud_update_all, #patchstorage_update_all {
+#cloud_update_all, #patchstorage_update_all, #patchstorage_pedalboards_update_all {
   background-image: url(../img/icons/36/update.png);
   float: right;
   font-size: 21px;
@@ -533,6 +533,8 @@ header#pedalboard-actions,
 #bank-library header,
 #cloud-plugins-library header,
 #patchstorage-library header,
+#patchstorage-pedalboards-library header,
+#patchstorage-hub header,
 #pedalboards-library header,
 #file-manager-library header {
   display: block;

html/css/less/patchstorage.less

@@ -1,4 +1,6 @@
-#patchstorage-library {
+#patchstorage-library,
+#patchstorage-pedalboards-library,
+#patchstorage-hub {
   background: #2c2c2c;
   bottom: 45px;
   left: 0;

html/css/patchstorage-pedalboards.css

@@ -0,0 +1,157 @@
+/* Patchstorage hub + pedalboards library (supplemental to main.css) */
+
+#cloud_update_all,
+#patchstorage_update_all,
+#patchstorage_pedalboards_update_all {
+  background-image: url(../img/icons/36/update.png);
+  float: right;
+  font-size: 21px;
+}
+
+#patchstorage-hub header,
+#patchstorage-pedalboards-library header {
+  display: block;
+  left: 0;
+  height: 45px;
+  line-height: 45px;
+  position: fixed;
+  right: 0;
+  top: 0;
+  z-index: 5;
+  box-shadow: 0 1px 10px rgba(0,0,0,.1);
+  background-color: #111;
+  background-position: 3px 50%;
+  background-size: 36px;
+  background-repeat: no-repeat;
+  background-image: url(../img/icons/36/mod.png);
+  padding-left: 45px;
+}
+
+.blokas #patchstorage-hub header,
+.blokas #patchstorage-pedalboards-library header {
+  background-image: none !important;
+  padding-left: 10px !important;
+}
+
+.blokas #patchstorage-pedalboards-library .patchstorage-plugins {
+  background-image: none !important;
+}
+
+#patchstorage-pedalboards-library .ps-label {
+  border: 1px solid #e53935;
+  background: #e53935;
+}
+
+/* Back button shared by plugins / pedalboards pages */
+.ps-back-btn {
+  float: left;
+  margin: 8px 12px 0 0;
+  height: 28px;
+  line-height: 28px;
+  padding: 0 12px;
+  border: 1px solid #444;
+  border-radius: 2px;
+  background: #222;
+  color: #ddd;
+  font-size: 13px;
+  cursor: pointer;
+}
+.ps-back-btn:hover {
+  background: #000;
+  border-color: #03a9f4;
+  color: #fff;
+}
+
+/* Hub selection page */
+#patchstorage-hub {
+  background: #2c2c2c;
+  bottom: 45px;
+  left: 0;
+  overflow: auto;
+  position: fixed;
+  right: 0;
+  top: 0;
+  z-index: 2;
+}
+#patchstorage-hub h1 {
+  color: #fff;
+  display: inline-block;
+  font-size: 24px;
+  line-height: 35px;
+  margin: 0;
+  padding: 0;
+}
+#patchstorage-hub .ps-hub-content {
+  position: fixed;
+  top: 45px;
+  bottom: 45px;
+  left: 0;
+  right: 0;
+  padding: 48px 40px;
+  background: #111 url(../img/watermark.png) 100% 100% no-repeat;
+  overflow-y: auto;
+}
+#patchstorage-hub .ps-hub-intro {
+  color: #aaa;
+  font-size: 15px;
+  margin: 0 0 28px 0;
+  max-width: 520px;
+}
+#patchstorage-hub .ps-hub-assets {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  max-width: 760px;
+}
+#patchstorage-hub .ps-hub-asset {
+  display: flex;
+  align-items: center;
+  gap: 18px;
+  width: 340px;
+  min-height: 96px;
+  padding: 18px 20px;
+  border: 1px solid #333;
+  border-radius: 2px;
+  background: rgba(255, 255, 255, 0.07);
+  color: #fff;
+  text-align: left;
+  cursor: pointer;
+  transition: background 0.25s, border-color 0.25s;
+}
+#patchstorage-hub .ps-hub-asset:hover {
+  background: #000;
+  border-color: #03a9f4;
+}
+#patchstorage-hub .ps-hub-icon {
+  flex: 0 0 48px;
+  width: 48px;
+  height: 48px;
+  line-height: 48px;
+  text-align: center;
+  font-size: 26px;
+  font-weight: 700;
+  border-radius: 4px;
+  color: #fff;
+}
+#patchstorage-hub .ps-hub-icon-plugins {
+  background: #03a9f4;
+}
+#patchstorage-hub .ps-hub-icon-pedalboards {
+  background: #e53935;
+}
+#patchstorage-hub .ps-hub-text {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+#patchstorage-hub .ps-hub-label {
+  font-size: 20px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+}
+#patchstorage-hub .ps-hub-desc {
+  font-size: 13px;
+  color: #aaa;
+  line-height: 1.35;
+}

html/include/patchstorage_pedalboard.html

@@ -0,0 +1,24 @@
+<div class="cloud-plugin plugin-container available-plugin js-available-effect" mod-role="cloud-plugin" mod-uri="{{uri}}">
+    <div class="cloud-plugin-border">
+        <figure class="thumb">
+            <img src="{{thumbnail_href}}" />
+        </figure>
+        <div class="description">
+            <span class="title">{{label}}</span>
+            <span class="author">{{brand}}</span>
+            <hr class="dotted" />
+            <p class="{{has_comment}}">{{comment}}<span class="limiter"></span></p>
+        </div>
+        <div class="status-container">
+            {{#download_count}}
+            <span class="status downloads" title="Pedalboard Downloads">&#129095; {{download_count}}</span>
+            {{/download_count}}
+            {{#state}}
+            <span class="status state {{state}}" title="Pedalboard State"></span>
+            {{/state}}
+            {{#status}}
+            <span class="status {{status}}" title="Pedalboard Status"></span>
+            {{/status}}
+        </div>
+    </div>
+</div>

html/include/patchstorage_pedalboard_info.html

@@ -0,0 +1,72 @@
+<div class="js-close patchstorage-info patchstorage-pedalboard-info plugin-container" mod-uri="{{escaped_uri}}">
+    <div class="container box">
+        <div class="row-fluid clearfix">
+          <span class="js-close alignright btn btn-mini btn-danger">Close</span>
+            <div class="span10 offset1 clearfix">
+                <figure class="screenshot text-center">
+                    {{#state}}
+                    <div class="state {{state}}" title="{{state}}"></div>
+                    {{/state}}
+                    <img src="{{screenshot_href}}">
+                </figure>
+
+                <div class="plugin-description">
+                    <header>
+                      <h1 class="text-uppercase">{{name}}</h1>
+                        <p></p>
+                        <p>
+                            {{#category}}
+                            <b>Category:</b> {{category}}<br/>
+                            {{/category}}
+                            {{#tags}}
+                            <b>Tags:</b> {{tags}}<br/>
+                            {{/tags}}
+                            {{#uploader}}
+                            <b>Uploader:</b> <span style="text-transform: uppercase;">{{uploader}}</span><br/>
+                            {{#link}}
+                            <b>Link:</b> <a href="{{link}}" target="_blank">{{link}}</a><br/>
+                            {{/link}}
+                            {{/uploader}}
+                        </p>
+                        <p class="version">
+                            {{#cloud_revision}}
+                            <span class="js-latest-version">
+                                <span class="ps-label">P</span> Latest Revision: <span class="bold">{{cloud_revision}}</span><br/>
+                            </span>
+                            {{/cloud_revision}}
+                            {{#local_revision}}
+                            <span class="js-installed-version">
+                                <span class="ps-label">P</span> Installed Revision: <span class="bold">{{local_revision}}</span><br/>
+                            </span>
+                            {{/local_revision}}
+                            {{#download_count}}
+                            <span>
+                                <span class="ps-label">P</span> Downloads: <span class="bold">{{download_count}}</span><br/>
+                            </span>
+                            {{/download_count}}
+                            <table><tr><td>
+                            <button class="js-install btn btn-info btn-mini">Install</button>
+                            <button class="js-upgrade btn btn-info btn-mini">Update</button>
+                            <button class="js-remove btn btn-danger btn-mini">Remove</button>
+                            <button class="js-load btn btn-success btn-mini">Load</button>
+                            </td>
+                            </tr></table>
+                        </p>
+                    </header>
+                    <p></p>
+                    <p>{{comment}}</p>
+                    {{#url}}
+                    <a target="_blank" href="{{url}}" class="btn btn-info">
+                        <span>View on Patchstorage</span>
+                    </a>
+                    {{/url}}
+                    {{#donate_url}}
+                    <a target="_blank" href="{{donate_url}}" class="btn btn-info">
+                        <span>Donate to Author</span>
+                    </a>
+                    {{/donate_url}}
+                </div>
+            </div>
+        </div>
+    </div>
+</div>