Merge pull request #222 from HumanBrainProject/dev_remove_dependecies#134

Remove isMobile and darktheme dependencies plus mobile menu style

src/components/dropdown/dropdown.component.ts

@@ -22,9 +22,6 @@ export class DropdownComponent{
   @Input() listDisplay : (obj:any)=>string = (obj)=>obj.name
   @Input() activeDisplay : (obj:any|null)=>string = (obj)=>obj ? obj.name : `Please select an item.`
 
-  @Input() isMobile: boolean
-  @Input() darktheme: boolean
-
   @Output() itemSelected : EventEmitter<any> = new EventEmitter()
   @Output() listItemButtonClicked: EventEmitter<any> = new EventEmitter()
 

src/components/dropdown/dropdown.style.css

@@ -56,3 +56,21 @@ radio-list
   overflow-x:hidden;
   display:block;
 }
+
+
+.dropdownTitle {
+  border: 1px solid !important;
+}
+
+.dropdownTitleOpen {
+  border: solid !important;
+  border-width: 1px 1px 0 1px !important;
+}
+
+:host-context([darktheme="true"][isMobile="true"]) .dropdownTitle {
+  border-color: white !important;
+}
+
+:host-context([darktheme="false"][isMobile="true"]) .dropdownTitle {
+  border-color: black !important;
+}
\ No newline at end of file

src/components/dropdown/dropdown.template.html

 <!-- TODO remove dependency on ismobile -->
 <span
-  class="btn btn-default"
+  class="btn btn-default dropdownTitle"
   [innerHTML]="activeDisplay(selectedItem)"
   [hoverable]="{translateY:-2}"
   #dropdownToggle
   dropdownToggle
-              
-  [ngStyle]="{'border': isMobile? 'none' : 'none', 'border-color': darktheme? 'white' : 'black', 'border-width': openState? '1px 1px 0 1px' : ''}">
-
+  [ngClass]="openState ? 'dropdownTitleOpen' : 'dropdownTitle'">
 </span>
 
 <!-- needed to ensure dropdown width matches  -->
@@ -24,8 +22,5 @@
   [selectedItem]="selectedItem"
   [inputArray]="inputArray"
   [@showState]="openState ? 'show' : 'hide'"
-  [isMobile]="isMobile"
-  [darktheme]="darktheme"
   (listItemButtonClicked) = listItemButtonClicked.emit($event)>
-
 </radio-list>

src/components/radiolist/radiolist.component.ts

@@ -27,9 +27,6 @@ export class RadioList{
   
   @Input() checkSelected: (selectedItem:any, item:any) => boolean = (si,i) => si === i
 
-  @Input() isMobile: boolean
-  @Input() darktheme: boolean
-
   @Output() listItemButtonClicked = new EventEmitter<string>();
 
   clickListButton(i) {

src/components/radiolist/radiolist.style.css

@@ -68,4 +68,19 @@ ul,span.dropdown-item-1
   min-width: 24px;
   cursor: pointer;
   text-align: center;
+}
+
+:host-context([darktheme="true"]) .radioListMenu {
+  border-color: white;
+}
+:host-context([darktheme="false"]) .radioListMenu {
+  border-color: black;
+}
+:host-context([isMobile="true"]) .radioListMenu {
+  opacity: 1;
+  border-style: solid;
+  border-width: 0px 1px 1px 1px;
+}
+:host-context([isMobile="false"]) radioListMenu {
+  opacity: 0.8;
 }
\ No newline at end of file

src/components/radiolist/radiolist.template.html

 <ul
   [ngClass]="ulClass"
-  [ngStyle]="{'opacity': isMobile? '1' : '0.8', 'border-color': darktheme? 'white' : 'black'}"
+  class="radioListMenu"
   role="menu">
   <li
     *ngFor="let input of inputArray; let i = index"

src/ui/signinBanner/signinBanner.template.html

@@ -7,9 +7,7 @@
     [activeDisplay]="displayActiveTemplate"
     [selectedItem]="selectedTemplate$ | async"
     [inputArray]="loadedTemplates$ | async | filterNull"
-    [isMobile] = "isMobile"
     [ngClass]="isMobile ? flexItemIsMobileClass : flexItemIsDesktopClass"
-    [darktheme] ="darktheme"
     (listItemButtonClicked)="showInfoToast($event, 'template')">
   </dropdown-component>
 
@@ -21,9 +19,7 @@
       [activeDisplay]="displayActiveParcellation"
       [selectedItem]="selectedParcellation"
       [inputArray]="selectedTemplate.parcellations"
-      [isMobile] = "isMobile"
       [ngClass]="isMobile ? flexItemIsMobileClass : flexItemIsDesktopClass"
-      [darktheme] ="darktheme"
       (listItemButtonClicked)="showInfoToast($event, 'parcellation')">>
 
     </dropdown-component>