OHIFVIEWER17: Hiding Panel shall be appear when mouse is over on panel, hiding panel shall be hidden when mouse is away from panel.

OHIFVIEWER18: Pin/Unpin hiding panel
2015-12-10 07:45:13 -05:00
1 parent e4112c44f1
commit 418d81f543
@@ -1,70 +1,74 @@

-.hidingPanel,.hidingPanelCollapse, .toggleBtnContainer, .studyBrowserContainer, .studyBrowserContainerCollapse, #btnCollapse,.btnCollapseIcon, .btnCollapseIcon-collapse, .viewportStyle {
+.hidingPanel,.studyBrowserContainer, .arrowIcon
+
+  -o-transition: all 0.3s ease-out
+  -ms-transition: all 0.3s ease-out
+  -moz-transition: all 0.3s ease-out
+  -webkit-transition: all 0.3s ease-out
+  transition: all 0.3s ease-out
+
+
+.hidingPanel
+  width: 1%
+  height: 100%
+  position: relative
+  float: left
+
+  .arrowIcon
+    color: white
+    float: left
+    margin-top: 8px
+    margin-left: 2px;
+    line-height: 12px
+
+  .hidingPanelContent
+    width: 100%
+    height: 100%
+    margin: 0 auto
+    float: none
+    opacity: 0
+    border: 1px solid #666
+
+    .studyBrowserContainer
+      position: absolute
+      display: block
+      width: 100%
+      bottom: 0
+      left: 0
+      right: 0
+      top: 100px
+
+    .panelPinContainer
+      width: 100%
+      height: auto
+      text-align: right
+      vertical-align: center
+      padding: 0
+      margin: 0
+      border-bottom: 1px solid #666
+
+      .btnPin
+        margin: 1px
+        color: #424242
+        outline: none
+        background-color: #202020
+        border: solid 1px #424242
+        border-radius: 3px
+
+      .btnPinActive
+        border-color: white
+
+      .btnPinInactive
+        border: solid 1px #424242
+
+      .btnPin:hover
+        border: solid 1px lightgray
+
+      .pinActive
+        color: #FFFFFF
+
+      .pinInactive
+        color: #424242

-  -o-transition: all 0.3s ease-out;
-  -ms-transition: all 0.3s ease-out;
-  -moz-transition: all 0.3s ease-out;
-  -webkit-transition: all 0.3s ease-out;
-  transition: all 0.3s ease-out;
-}
-
-.hidingPanel {
-  width: 120px;
-  height: 100%;
-  position: relative;
-  float: left;
-}
-
-.hidingPanelCollapse{
-  width: 0px;
-}
-
-.toggleBtnContainer{
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 25px;
-  height: 25px;
-}
-
-.studyBrowserContainer {
-  position: absolute;
-  display: block;
-  margin-top: 30px;
-  height: calc(100% - 30px);
-  width: 100%;
-  opacity: 1;
-}
-
-.studyBrowserContainerCollapse {
-  opacity: 0;
-  width: 0px;
-
-}
-.studyBrowserContainerCollapseDisplay {
-  display: none;
-}
-
-#btnCollapse{
-  position: absolute;
-  display: block;
-  width: 25px;
-  height: 25px;
-  line-height: 25px;
-  padding: 0;
-  border: 0;
-  border-top: 1px solid #e6e6e6;
-  background: #f6f6f6;
-  color: #666;
-  font-size: 0.875rem;
-  text-align: center;
-  cursor: pointer;
-}
-
-.btnCollapseIcon-collapse{
-  -moz-transform: rotate(180deg);
-  -webkit-transform: rotate(180deg);
-  transform: rotate(180deg);
-}