From fd74f761dcdbde44a2e4d4b08b421e6b21f63b7a Mon Sep 17 00:00:00 2001
From: "Patrik J. Braun" <bra.patrik@gmail.com>
Date: Fri, 2 Nov 2018 12:35:50 +0100
Subject: [PATCH] adding photo counter to navbar

---
 README.md                                     |  1 +
 .../navigator/navigator.gallery.component.css | 17 +++++++--
 .../navigator.gallery.component.html          | 35 +++++++++++--------
 frontend/translate/messages.en.xlf            | 16 ++++++---
 frontend/translate/messages.hu.xlf            | 16 ++++++---
 5 files changed, 58 insertions(+), 27 deletions(-)

diff --git a/README.md b/README.md
index fb6a4fae..2a6f4e04 100644
--- a/README.md
+++ b/README.md
@@ -15,6 +15,7 @@ Live Demo @ heroku: https://pigallery2.herokuapp.com/
 1. [Getting started](#getting-started-on-raspberry-pi-1)
 3. [Translate the page to your own language](#translate-the-page-to-your-own-language)
 2. [Feature list](#feature-list)
+2. [Known errors](#known-errors)
 4. [Credits](#credits) 
 
 
diff --git a/frontend/app/gallery/navigator/navigator.gallery.component.css b/frontend/app/gallery/navigator/navigator.gallery.component.css
index 421bd67e..4d432c88 100644
--- a/frontend/app/gallery/navigator/navigator.gallery.component.css
+++ b/frontend/app/gallery/navigator/navigator.gallery.component.css
@@ -2,13 +2,23 @@
   position: relative;
 }
 
-.btn-group {
+.right-side {
   position: absolute;
   right: 1rem;
   top: 50%;
   transform: translateY(-50%);
 }
 
+.photos-count {
+  display: inline-block;
+}
+
+.divider{
+  margin: 5px 10px;
+  border-left: 1px solid #6c757d;
+  display: inline-block;
+}
+
 ol {
   padding-right: 130px;
 }
@@ -23,9 +33,10 @@ ol {
   cursor: pointer;
 }
 
-nav{
+nav {
   z-index: 1;
 }
+
 .dropdown-toggle::after {
-  display:none;
+  display: none;
 }
diff --git a/frontend/app/gallery/navigator/navigator.gallery.component.html b/frontend/app/gallery/navigator/navigator.gallery.component.html
index c107c571..91c9a2ec 100644
--- a/frontend/app/gallery/navigator/navigator.gallery.component.html
+++ b/frontend/app/gallery/navigator/navigator.gallery.component.html
@@ -7,20 +7,27 @@
     </li>
   </ol>
 
-  <div class="btn-group" dropdown placement="bottom right">
-    <button id="button-alignment" dropdownToggle type="button"
-            class="btn btn-default dropdown-toggle" aria-controls="dropdown-alignment"
-            [innerHTML]="galleryService.sorting.value| iconizeSorting">
-    </button>
-    <ul id="dropdown-alignment" *dropdownMenu class="dropdown-menu dropdown-menu-right"
-        role="menu" aria-labelledby="button-alignment">
-      <li class="row dropdown-item" role="menuitem"
-          *ngFor="let type of sortingMethodsType"
-          (click)="setSorting(type.key)">
-        <div class="col-3" [outerHTML]="type.key | iconizeSorting"></div>
-        <div class="col-9">{{type.key | stringifySorting}}</div>
-      </li>
-    </ul>
+  <div class="right-side">
+    <div class="photos-count" *ngIf="directory.photos.length > 0">
+      {{directory.photos.length}} <span i18n>items</span>
+    </div>
+    <div class="divider" *ngIf="directory.photos.length > 0">&nbsp;</div>
+    <div class="btn-group" dropdown placement="bottom right">
+      <button id="button-alignment" dropdownToggle type="button"
+              class="btn btn-default dropdown-toggle" aria-controls="dropdown-alignment"
+              [innerHTML]="galleryService.sorting.value| iconizeSorting">
+      </button>
+      <ul id="dropdown-alignment" *dropdownMenu class="dropdown-menu dropdown-menu-right"
+          role="menu" aria-labelledby="button-alignment">
+        <li class="row dropdown-item" role="menuitem"
+            *ngFor="let type of sortingMethodsType"
+            (click)="setSorting(type.key)">
+          <div class="col-3" [outerHTML]="type.key | iconizeSorting"></div>
+          <div class="col-9">{{type.key | stringifySorting}}</div>
+        </li>
+      </ul>
+    </div>
   </div>
+
 </nav>
 
diff --git a/frontend/translate/messages.en.xlf b/frontend/translate/messages.en.xlf
index e7cc1378..e9681e56 100644
--- a/frontend/translate/messages.en.xlf
+++ b/frontend/translate/messages.en.xlf
@@ -198,7 +198,7 @@
         <source>Settings</source>
         <context-group purpose="location">
           <context context-type="sourcefile">app/frame/frame.component.html</context>
-          <context context-type="linenumber">41</context>
+          <context context-type="linenumber">42</context>
         </context-group>
         <target>Settings</target>
       </trans-unit>
@@ -206,7 +206,7 @@
         <source>Logout</source>
         <context-group purpose="location">
           <context context-type="sourcefile">app/frame/frame.component.html</context>
-          <context context-type="linenumber">47</context>
+          <context context-type="linenumber">48</context>
         </context-group>
         <target>Logout</target>
       </trans-unit>
@@ -295,6 +295,14 @@
         </context-group>
         <target>Months</target>
       </trans-unit>
+      <trans-unit id="064ce5140698af55532d5c8c6355e4605d2bcc1b" datatype="html">
+        <source>items</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">app/gallery/navigator/navigator.gallery.component.html</context>
+          <context context-type="linenumber">12</context>
+        </context-group>
+        <target>items</target>
+      </trans-unit>
       <trans-unit id="ac9751501a838bfb31f23e94ceb9616fe498a267" datatype="html">
         <source>
         Server notifications
@@ -890,9 +898,7 @@
           <context context-type="sourcefile">app/settings/random-photo/random-photo.settings.component.html</context>
           <context context-type="linenumber">25</context>
         </context-group>
-        <target>This feature enables you to generate 'random photo' urls.
-          That URL returns a photo random selected from your gallery.
-          You can use the url with 3rd party like random changing desktop background.</target>
+        <target>This feature enables you to generate 'random photo' urls. That URL returns a photo random selected from your gallery. You can use the url with 3rd party like random changing desktop background.</target>
       </trans-unit>
       <trans-unit id="6c02e8541a2e670f80de8b5a218ea14a16bb6c42" datatype="html">
         <source>
diff --git a/frontend/translate/messages.hu.xlf b/frontend/translate/messages.hu.xlf
index 87663fcc..cc74b085 100644
--- a/frontend/translate/messages.hu.xlf
+++ b/frontend/translate/messages.hu.xlf
@@ -198,7 +198,7 @@
         <source>Settings</source>
         <context-group purpose="location">
           <context context-type="sourcefile">app/frame/frame.component.html</context>
-          <context context-type="linenumber">41</context>
+          <context context-type="linenumber">42</context>
         </context-group>
         <target>Beállítások</target>
       </trans-unit>
@@ -206,7 +206,7 @@
         <source>Logout</source>
         <context-group purpose="location">
           <context context-type="sourcefile">app/frame/frame.component.html</context>
-          <context context-type="linenumber">47</context>
+          <context context-type="linenumber">48</context>
         </context-group>
         <target>Kijelentkezés</target>
       </trans-unit>
@@ -295,6 +295,14 @@
         </context-group>
         <target>Hónapok</target>
       </trans-unit>
+      <trans-unit id="064ce5140698af55532d5c8c6355e4605d2bcc1b" datatype="html">
+        <source>items</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">app/gallery/navigator/navigator.gallery.component.html</context>
+          <context context-type="linenumber">12</context>
+        </context-group>
+        <target>elem</target>
+      </trans-unit>
       <trans-unit id="ac9751501a838bfb31f23e94ceb9616fe498a267" datatype="html">
         <source>
         Server notifications
@@ -890,9 +898,7 @@
           <context context-type="sourcefile">app/settings/random-photo/random-photo.settings.component.html</context>
           <context context-type="linenumber">25</context>
         </context-group>
-        <target>Ez a funkció lehetővé teszi a "véletlenszerű fotó" URL-ek létrehozását.
-          Ez az URL egy galériából kiválasztott véletlenszerű fényképet jelenít meg.
-          Használhatja az url-t külső alkalmazásokhoz, például a asztali háttérkép beállításához.</target>
+        <target>Ez a funkció lehetővé teszi a "véletlenszerű fotó" URL-ek létrehozását. Ez az URL egy galériából kiválasztott véletlenszerű fényképet jelenít meg. Használhatja az url-t külső alkalmazásokhoz, például a asztali háttérkép beállításához.</target>
       </trans-unit>
       <trans-unit id="6c02e8541a2e670f80de8b5a218ea14a16bb6c42" datatype="html">
         <source>