mobile friendly, add camic logo

camicroscope · Oct 31, 2024 · a55765b · a55765b
1 parent f091906
commit a55765b
Show file tree

Hide file tree

Showing 4 changed files with 96 additions and 24 deletions.
diff --git a/components/sidemenu/sidemenu.js b/components/sidemenu/sidemenu.js
@@ -98,7 +98,7 @@ SideMenu.prototype.__refresh = function() {
   if (this.setting.top) {
     this.elt.style.top = this.setting.top;
   } else {
-    this.elt.style.top = '0';
+    this.elt.style.top = '42px';
   }
 
   if (this.setting.position === 'right') {

diff --git a/components/toolbar/toolbar.css b/components/toolbar/toolbar.css
@@ -1,3 +1,5 @@
+
+
 ul.tools > li.handler {
   width: 1.2rem;
   height: 100%;
@@ -14,7 +16,7 @@ ul.tools {
   left: 0;
   padding: 0;
   margin: 0;
-  height: 2.4rem;
+  height: 36px;
   border-radius: 0 0.5rem 0.5rem 0;
   border: solid #365f9c 0.2rem;
   background-color: #365f9c;
@@ -23,7 +25,6 @@ ul.tools {
 ul.tools > li {
   cursor: pointer;
   height: 100%;
-  width: 2.4rem;
   float: left;
   margin-left: 0.2rem;
   list-style: none;
@@ -54,6 +55,7 @@ ul.tools > li:not(.handler) > input[type="checkbox"]:checked + label {
   background-color: #365f9c;
   color: #fff;
   /*box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.3);*/
+  padding: 0 2px 2px 2px;
 }
 
 ul.tools > li:not(.handler) > input[type="checkbox"] + label:hover {
@@ -62,13 +64,8 @@ ul.tools > li:not(.handler) > input[type="checkbox"] + label:hover {
 
 /* ------------- */
 
-.drop_down_container{
-  position: relative;
-  padding: 5px;
-}
-
 ul.drop_down {
-  width: 2.4rem;
+  z-index: 100;
   font-size: 1.4rem;
   padding: 0;
   margin: 0;
@@ -78,12 +75,30 @@ ul.drop_down {
 }
 
 ul.tools > li:hover ul.drop_down {
-  flex-direction: row; /* Consumes less space */
-  display: flex;
+  flex-direction: column; /* Consumes less space */
+  display: block;
   width: fit-content;
   width: -moz-fit-content;
 }
 
+.camic-logo{
+  min-width: 25px;
+  min-height: 25px;
+}
+
+.material-icons.md-36 { 
+  font-size: 36px;
+}
+
+@media (max-width: 750px) {
+  .material-icons.md-36 {
+    font-size: 24px;
+  }
+}
+
+
+
+
 ul.drop_down li {
   cursor: pointer;
   /* width: 2.4rem;

diff --git a/components/toolbar/toolbar.js b/components/toolbar/toolbar.js
@@ -54,6 +54,42 @@
  *        changing status(check/radio/dropdown), return a object which has value and status.
  *
  */
+
+const camic_svg = `
+<svg
+   version="1.1"
+   id="svg1"
+   viewBox="0 0 392 392"
+   xmlns="http://www.w3.org/2000/svg">
+  <g id="layer1">
+    <path
+       style="fill:currentColor"
+       d="m 235.37858,200.06453 48.41567,-17.02896 C 246.56105,133.47258 219.56516,83.165139 201.98846,21.427389 l -19.03237,8.013628 z" />
+    <path
+       style="fill:currentColor"
+       d="m 156.28676,116.50371 c 0,0 14.69165,-11.68654 0,0 z" />
+    <path
+       style="fill:currentColor"
+       d="m 155.95286,116.83761 c 0,0 5.34242,-6.01022 0,0 z" />
+    <path
+       style="fill:currentColor;stroke-width:1.09145"
+       d="m 139.38922,122.8447 c 15.23488,-7.61623 35.55245,-11.52666 49.73998,-13.86767 l -5.41955,-17.127845 c -19.13718,3.23649 -39.75853,8.958985 -54.66219,16.637765 z" />
+    <path
+       style="fill:currentColor;stroke-width:1.09145"
+       d="m 122.16662,133.77573 c -23.015532,15.981 -35.642057,37.20602 -39.521215,57.6266 l -23.492631,-4.34071 c 8.128925,-25.58183 23.897012,-50.05419 51.164286,-68.27094 z" />
+    <path
+       style="fill:currentColor;stroke-width:1.09145"
+       d="m 79.122739,208.94401 c -1.547813,23.32001 -2.010619,45.68546 13.242816,64.59801 L 71.955844,284.72771 C 57.431731,260.5187 51.196077,234.95396 55.733377,204.52227 Z" />
+    <path
+       style="fill:currentColor;stroke-width:1.09145"
+       d="m 107.61472,290.35656 c 18.94063,20.51975 41.85149,37.02418 68.16374,42.40749 l -4.70291,18.87034 C 141.91129,341.51155 109.06814,329.00813 87.063288,303.43108 Z" />
+    <path
+       style="fill:currentColor;stroke-width:1.38034"
+       d="m 199.36286,333.54662 -1.94994,19.73107 132.52921,-0.93353 -4.77015,-29.85319 z" />
+  </g>
+</svg>
+`
+
 function CaToolbar(options) {
   this.name = 'CaToolbar';
   // DOM elts
@@ -80,7 +116,7 @@ function CaToolbar(options) {
     // may be it can be extension in future...
     mainTools: [
       {
-        icon: 'apps',
+        icon: 'camic',
         title: 'Applications',
         type: 'check',
         value: 'apps',
@@ -154,8 +190,16 @@ CaToolbar.prototype.__createBtn = function(options) {
   if (options.name) li.name = options.name;
   const btn = document.createElement('i');
   btn.classList.add('material-icons');
-  btn.classList.add('md-24');
-  btn.textContent = options.icon;
+  btn.classList.add('md-36');
+  if (options.icon =="camic"){
+    btn.innerHTML = camic_svg;
+    btn.classList.add("camic-logo");
+    btn.title = "camic";
+    btn.style.height = "36px"
+    btn.style.width = "36px"
+  } else {
+    btn.textContent = options.icon;
+  }
   if (options.title) {
     tippy(btn, {
       content: options.title,
@@ -211,8 +255,15 @@ CaToolbar.prototype.__createCheck = function(options) {
   // icon
   const icon = document.createElement('label');
   icon.classList.add('material-icons');
-  icon.classList.add('md-24');
-  icon.textContent = options.icon;
+  icon.classList.add('md-36');
+  if (options.icon == "camic"){
+    icon.innerHTML = camic_svg;
+    icon.title = "camic";
+    icon.style.height = "36px"
+    icon.style.width = "36px"
+  } else {
+    icon.textContent = options.icon;
+  }
   if (options.ariaLabel) icon.ariaLabel = options.ariaLabel;
   icon.htmlFor = id;
   if (options.title) {
@@ -275,7 +326,7 @@ CaToolbar.prototype.__createRadio = function(options) {
   const icon = document.createElement('label');
   if (options.icon) {
     icon.classList.add('material-icons');
-    icon.classList.add('md-24');
+    icon.classList.add('md-36');
     if (options.ariaLabel) icon.ariaLabel = options.ariaLabel;
     icon.textContent = options.icon;
   } else {
@@ -333,7 +384,7 @@ CaToolbar.prototype.__createMultiStateBtns = function(options) {
   const icon = document.createElement('label');
   icon.id = randomId(); // create a timestamp id
   icon.classList.add('material-icons');
-  icon.classList.add('md-24');
+  icon.classList.add('md-36');
   if (options.ariaLabel) icon.ariaLabel = options.ariaLabel;
   icon.classList.add(0);
   icon.dataset.state = 0;
@@ -387,7 +438,7 @@ CaToolbar.prototype.__createMultiDropDown = function(options) {
   // icon
   const icon = document.createElement('label');
   icon.classList.add('material-icons');
-  icon.classList.add('md-24');
+  icon.classList.add('md-36');
   if (options.ariaLabel) icon.ariaLabel = options.ariaLabel;
   icon.textContent = options.icon;
   icon.htmlFor = id;
@@ -515,8 +566,11 @@ CaToolbar.prototype.__createDropDown = function(options) {
   // icon
   const icon = document.createElement('label');
   icon.classList.add('material-icons');
-  icon.classList.add('md-24');
-  if (options.ariaLabel) icon.ariaLabel = options.ariaLabel;
+  icon.classList.add('md-36');
+  if (options.ariaLabel){
+    icon.ariaLabel = options.ariaLabel;
+    icon.title = options.ariaLabel;
+  } 
   icon.textContent = options.icon;
   icon.htmlFor = id;
   if (options.title) {

diff --git a/css/style.css b/css/style.css
@@ -1,6 +1,7 @@
 /* css style */
 html {
   font-size: 10px;
+  min-width: 320px;
 }
 
 html,
@@ -10,6 +11,7 @@ body {
   font-family: sans-serif;
   height: 100%;
   width: 100%;
+
 }
 
 body {
@@ -18,6 +20,7 @@ body {
   background-size: 2rem 2rem;
   background-position: 0 0, 5rem 0, 5rem -5rem, 0px 5rem;
   background-color: rgba(220, 220, 220, 1);
+  min-width: 400px;
 }
 
 /* osd main viewer */
@@ -261,8 +264,8 @@ opacity: 0.3 !important;
   }
 
   ul.tools>li{
-    height: 2vw !important;
-    width: 2vw !important;
+    height: 3vw !important;
+    width: 3vw !important;
     min-height: 25px;
     min-width: 25px;
   }
@@ -278,7 +281,7 @@ opacity: 0.3 !important;
   }
 
   ul.tools{
-    height: 2vw !important;
+    height: 3vw !important;
   }
 
   .material-icons.md-24 {