Feature: Glanceable UI theme + additional progress percentage. (#1151)

* Updated Filament in Theme.

Filament screen corrected with the following changes:
* Filament bar background colour changed to match theme.
* Filament table background gradient removed.
* Filament bar width adjusted to match files section, this also lined up
the scroll bar with its background.

* Progress Percentage Added
Addition of a second progress percentage which
is attached to the progress bar div.
CSS set to make this percentage hidden by default.
This will allow the creation of themes where percentage is
visible for both round and straight progress bars.

* New Theme:  "Glanceable"
Theme creates a horizontal progress bar when printing that is more
easily readable from across the room.
This theme requires the additional div from the previous commit,
but the instructions in the Readme.md include a workaround.

* Cleaned up whitespace at EOL

* remove third percentage div

* Slightly move percentage in progress bar to left.

Co-authored-by: UnchartedBull <[email protected]>

src/app/job-status/job-status.component.html

@@ -11,16 +11,13 @@
     <div class="job-info__progress-percentage">{{ job.progress }}<span style="font-size: 40%">%</span></div>
   </div>
   <div class="job-info__progress" *ngIf="showPreview() && job.thumbnail">
-    <div class="job-info__progress-percentage" [hidden]="true">
-      {{ job.progress }}<span style="font-size: 40%">%</span>
-    </div>
-    <div *ngIf="!useCircularProgressBar()" style="height: 22vw; padding-top: -1.5vw">
+    <div *ngIf="!useCircularProgressBar()" style="height: 22vw; padding-top: -1.5vw" id="progress-preview-bar">
       <img class="job-info__progress-preview" [src]="job.thumbnail" />
       <div class="job-info__progress-bar__wrapper">
         <div class="job-info__progress-bar" [style.width]="job.progress + '%'"></div>
       </div>
     </div>
-    <div *ngIf="useCircularProgressBar()" style="height: 23.5vw">
+    <div *ngIf="useCircularProgressBar()" style="height: 23.5vw" id="progress-preview-circle">
       <round-progress
         [current]="job.progress"
         [max]="100"
@@ -33,6 +30,9 @@
         <img class="job-info__progress-preview-image" [src]="job.thumbnail" />
       </div>
     </div>
+    <div class="job-info__progress-percentage" [hidden]="true">
+      {{ job.progress }}<span style="font-size: 40%">%</span>
+    </div>
   </div>
   <span class="job-info__filename">{{ job.filename }}</span>
   <br />

themes/theGarbz/Glanceable/README.md

@@ -0,0 +1,44 @@
+# Glanceable theme v0.1
+
+This variation on the standard theme includes a nearly full width horizontal progress bar during printing. This makes it far easier to see the progress of a print when glancing at the screen from a distance, hence the name "Glanceable theme". 
+
+To install copy the custom-styles.css file into the octodash config folder:
+```
+~/.config/octodash/custom-styles.css
+```
+Users of Octodash 2.1.1 read the important note below. 
+
+###### Theme by theGarbz.
+
+## Screenshots:
+
+1. Printing with the Horizontal Progressbar:
+
+   ![Filament List](screenshots/screenshot_printing_straight.png)
+
+2. Printing with Circular Progressbar:
+
+   ![File List](screenshots/screenshot_printing_circle.png)
+
+## Important Note for Octodash 2.1.1 users
+
+This theme relies on an additional progress percentage element which is not available in Octodash 2.1.1. Using this theme on Octodash 2.1.1 without modification (read on) will result in no progress percentage visible when the horizontal progressbar is displayed. 
+
+It is possible to move the progress percentage from the circular progressbar to the horizontal progressbar by __uncommenting the following lines__ in this custom-styles.css:
+
+```
+/*.job-info__progress-percentage {
+    margin-top: -0.3vh!important;
+    margin-left: 0vw!important;
+    font-size: 6.7vh!important;
+    font-weight: 500!important;
+    display:block!important;
+    position:fixed!important;
+    left: 43.4vw!important;
+    top: 77vh!important;
+    z-index:1!important;
+    color:white!important;
+    text-shadow: 1px 1px 4px black;
+}*/
+```
+

themes/theGarbz/Glanceable/custom-styles.css

@@ -0,0 +1,100 @@
+
+/**** Job-Info Resizes ****/
+
+app-job-status ~ app-printer-status .printer-status{
+    position:absolute!important;
+    top: 43vh!important;
+    left: 0vw!important;
+}
+
+/**** Job-Info Layer Progress ****/
+
+.layer-indication{
+    position:absolute!important;
+    top: 65vh!important;
+    left: 0vw!important;
+    font-size: 3vw!important;
+}
+
+.layer-indication__current-layer{
+    font-size: 6vh!important;
+}
+
+.layer-indication__total-layers{
+    font-size: 5vh!important;
+}
+
+/**** Job-Info Progress ****/
+
+.job-info__progress-bar {
+    height: 8vh!important;
+    border-radius: 1.7vw!important;
+}
+
+.job-info__progress-bar__wrapper {
+    position:fixed!important;
+    top: 77vh!important;
+    left: 3vw!important;
+    width: 92vw!important;
+    height: 8vh!important;
+    border-radius: 2vw!important;
+    background-color: rgba(38, 44, 53, 1);
+    border-style: solid!important;
+    border-color: rgb(121, 121, 121);
+    border-width: 2px!important;
+}
+
+#progress-preview-bar + .job-info__progress-percentage {
+    margin-top: -0.3vh!important;
+    margin-left: 0vw!important;
+    font-size: 6.7vh!important;
+    font-weight: 500!important;
+    display:block!important;
+    position:fixed!important;
+    left: 43.4vw!important;
+    top: 77vh!important;
+    z-index:1!important;
+    color:white!important;
+    text-shadow: 1px 1px 4px black;
+    visibility: visible!important;
+}
+
+/**** by-line ****/
+
+.settings-container {
+    height: 86vh!important;
+    top: 8vh!important;
+}
+
+.settings__made::after {
+    content: "Glanceable theme v0.1 by theGarbz";
+    width: auto!important;
+    font-size: 73%;
+    display: inline-block;
+}
+
+/*
+ * Version 2.1.1 and previous of Octodash are missing
+ * the progress-bar-percentage element. As such the
+ * bar renders without showing the percentage complete.
+ * to relocate the percentage complete from the
+ * circular progress bar to the horizontal progress bar
+ * uncomment the following lines.
+ *
+ * Note: Doing so will remove the percentage number
+ * from the circular progress bar. (See Readme.md)
+ */
+
+/*.job-info__progress-percentage {
+    margin-top: -0.3vh!important;
+    margin-left: 0vw!important;
+    font-size: 6.7vh!important;
+    font-weight: 500!important;
+    display:block!important;
+    position:fixed!important;
+    left: 43.4vw!important;
+    top: 77vh!important;
+    z-index:1!important;
+    color:white!important;
+    text-shadow: 1px 1px 4px black;
+}*/