add login link in header

Author: ContentsViewer

Client/ContentsViewer/ContentsViewerStandard.css

@@ -525,7 +525,8 @@ ul.tag-list.removable li a:hover::before{
   justify-content: flex-end;
 }
 
-.toolbar button {
+.toolbar>* {
+  box-sizing: border-box;
   width: 30px;
   height: 25px;
   border-radius: 2px;
@@ -540,7 +541,7 @@ ul.tag-list.removable li a:hover::before{
   color: white;
 }
 
-.toolbar button:hover {
+.toolbar>*:hover {
   background-color: rgba(255, 255, 255, 0.1);
 }
 
@@ -559,6 +560,11 @@ ul.tag-list.removable li a:hover::before{
   url('data:image/svg+xml;charset=utf8,%3Csvg%20aria-hidden%3D%22true%22%20focusable%3D%22false%22%20data-prefix%3D%22fas%22%20data-icon%3D%22link%22%20class%3D%22svg-inline--fa%20fa-link%20fa-w-16%22%20role%3D%22img%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M326.612%20185.391c59.747%2059.809%2058.927%20155.698.36%20214.59-.11.12-.24.25-.36.37l-67.2%2067.2c-59.27%2059.27-155.699%2059.262-214.96%200-59.27-59.26-59.27-155.7%200-214.96l37.106-37.106c9.84-9.84%2026.786-3.3%2027.294%2010.606.648%2017.722%203.826%2035.527%209.69%2052.721%201.986%205.822.567%2012.262-3.783%2016.612l-13.087%2013.087c-28.026%2028.026-28.905%2073.66-1.155%20101.96%2028.024%2028.579%2074.086%2028.749%20102.325.51l67.2-67.19c28.191-28.191%2028.073-73.757%200-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037%2016.037%200%200%201-6.947-12.606c-.396-10.567%203.348-21.456%2011.698-29.806l21.054-21.055c5.521-5.521%2014.182-6.199%2020.584-1.731a152.482%20152.482%200%200%201%2020.522%2017.197zM467.547%2044.449c-59.261-59.262-155.69-59.27-214.96%200l-67.2%2067.2c-.12.12-.25.25-.36.37-58.566%2058.892-59.387%20154.781.36%20214.59a152.454%20152.454%200%200%200%2020.521%2017.196c6.402%204.468%2015.064%203.789%2020.584-1.731l21.054-21.055c8.35-8.35%2012.094-19.239%2011.698-29.806a16.037%2016.037%200%200%200-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639%200-101.83l67.2-67.19c28.239-28.239%2074.3-28.069%20102.325.51%2027.75%2028.3%2026.872%2073.934-1.155%20101.96l-13.087%2013.087c-4.35%204.35-5.769%2010.79-3.783%2016.612%205.864%2017.194%209.042%2034.999%209.69%2052.721.509%2013.906%2017.454%2020.446%2027.294%2010.606l37.106-37.106c59.271-59.259%2059.271-155.699.001-214.959z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E')
 }
 
+.login-icon::before {
+  background-image: linear-gradient(transparent, transparent),
+  url('data:image/svg+xml;charset=utf8,%3Csvg%20aria-hidden%3D%22true%22%20focusable%3D%22false%22%20data-prefix%3D%22fas%22%20data-icon%3D%22sign-in-alt%22%20class%3D%22svg-inline--fa%20fa-sign-in-alt%20fa-w-16%22%20role%3D%22img%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M416%20448h-84c-6.6%200-12-5.4-12-12v-40c0-6.6%205.4-12%2012-12h84c17.7%200%2032-14.3%2032-32V160c0-17.7-14.3-32-32-32h-84c-6.6%200-12-5.4-12-12V76c0-6.6%205.4-12%2012-12h84c53%200%2096%2043%2096%2096v192c0%2053-43%2096-96%2096zm-47-201L201%2079c-15-15-41-4.5-41%2017v96H24c-13.3%200-24%2010.7-24%2024v96c0%2013.3%2010.7%2024%2024%2024h136v96c0%2021.5%2026%2032%2041%2017l168-168c9.3-9.4%209.3-24.6%200-34z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E')
+}
+
 .header-link-button {
   display: block;
   -webkit-transform: perspective(1px) translateZ(0);

Module/ContentsViewerUtils.php

@@ -146,10 +146,10 @@ function CreateHeaderArea($rootContentPath, $showRootChildren, $showPrivateIcon)
     $header = 
         '<header id="header">'.
           '<div class="logo"><a href="' . CreateContentHREF($rootContentPath) . '">ContentsViewer</a></div>'.
-            '<button id="search-button" onclick="OnClickSearchButton()" aria-label="' . Localization\Localize('search', 'Search') . '"><div class="search-icon"><div class="circle"></div><div class="rectangle"></div></div></button>'.
-            '<button id="pull-down-menu-button" class="pull-updown-button" onclick="OnClickPullDownButton()" aria-haspopup="true" aria-controls="pull-down-menu"><div class="pull-down-icon"></div></button>'.
-            '<button id="pull-up-menu-button" class="pull-updown-button" onclick="OnClickPullUpButton()" aria-haspopup="true" aria-controls="pull-down-menu"><div class="pull-up-icon"></div></button>'.
-            '<div id="pull-down-menu" class="pull-down-menu" aria-hidden="true">'.
+          '<button id="search-button" onclick="OnClickSearchButton()" aria-label="' . Localization\Localize('search', 'Search') . '"><div class="search-icon"><div class="circle"></div><div class="rectangle"></div></div></button>'.
+          '<button id="pull-down-menu-button" class="pull-updown-button" onclick="OnClickPullDownButton()" aria-haspopup="true" aria-controls="pull-down-menu"><div class="pull-down-icon"></div></button>'.
+          '<button id="pull-up-menu-button" class="pull-updown-button" onclick="OnClickPullUpButton()" aria-haspopup="true" aria-controls="pull-down-menu"><div class="pull-up-icon"></div></button>'.
+          '<div id="pull-down-menu" class="pull-down-menu" aria-hidden="true">'.
             '<nav class="pull-down-menu-top">'.
               '<a class="header-link-button" href="' . CreateContentHREF($rootContentPath) . '">' . Localization\Localize('frontpage', 'FrontPage') . '</a>'.
               '<a class="header-link-button" href="' . CreateTagMapHREF([], $rootDirectory, $layerName) . '">' . Localization\Localize('tagmap', 'TagMap') . '</a>'.
@@ -172,9 +172,15 @@ function CreateHeaderArea($rootContentPath, $showRootChildren, $showPrivateIcon)
         }
     }
 
-    $header .= '</nav><div class="toolbar"><button class="icon adjust-icon" title="' . 
-        Localization\Localize('changeTheme', 'Change Theme') . 
-        '" onclick="OnClickThemeChangeButton()"></button></div></div>';
+    $header .= '</nav>';
+    
+    $header .= 
+        '<div class="toolbar">' . 
+        '<button class="icon adjust-icon" title="' . Localization\Localize('changeTheme', 'Change Theme') . '" onclick="OnClickThemeChangeButton()"></button>' .
+        '<a class="icon login-icon" href="' . ROOT_URI . '/Login" target="FileManager" title="' . Localization\Localize('login', 'Log in') . '"></a>'. 
+        '</div>';
+
+    $header .= '</div>';
 
     if($showPrivateIcon){
         $header .= '<div class="icon private-icon" title="' .