Improving Document Bar UI

Setting up new document bar UI to then set up switching document view modes. Improving layout of component and cleaning up. Added icons and button UI.

1 files changed, 63 insertions, 25 deletions

diff --git a/js/components/layout/document-bar.reel/document-bar.css b/js/components/layout/document-bar.reel/document-bar.css
index a356dd1a..cb9accdd 100755
--- a/js/components/layout/document-bar.reel/document-bar.css
+++ b/js/components/layout/document-bar.reel/document-bar.css
@@ -28,46 +28,84 @@ CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
 ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
 POSSIBILITY OF SUCH DAMAGE.
 </copyright> */
-.documentBar {
-    position: relative;
-    overflow: hidden;
-    color: white;
+
+.timelineResizer {
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(19,19,19,1)), color-stop(50%,rgba(44,44,44,1)), color-stop(100%,rgba(19,19,19,1))) !important;
 }
 
-.documentBar .active {
-    text-decoration: underline;
-    cursor: pointer;
-    color: #666666;
+.documentBar {
+    background: rgb(40, 40, 40);
+    height: 20px !important;
+    color: #FFF;
+    font-size: 11px;
 }
 
-.documentBar .active:hover {
-    color: #ffffff;
+.documentBar section{
+    background: rgb(60, 60, 60);
+    float: left;
+    height: 100%;
+    padding: 0px 4px;
+    border-right: 2px solid #000;
 }
 
-.documentBar .selected {
-    text-decoration: underline;
-    cursor: default;
-    color: #ffffff;
+.documentBar .zoomicon {
+    background-image: url('../../../../images/tools/Tool-Zoom.png');
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: 75%;
+    width: 18px;
+    height: 18px;
+    float: left;
 }
 
-.documentBar .selected {
-    color: #ffffff;
+.documentBar .zoomHotText {
+    font-size: 11px;
+    width: 40px;
+    margin: 0 0 0 2px;
+    text-align: center;
 }
 
-.documentBar span{
-    text-decoration: none;
+.documentBar .btn_view {
+    display: block;
+    background: none;
+    margin: 3px 0 0 0;
+    padding: 0;
+    border: none;
+    color: #FFF;
+    width: 44px;
+    text-transform: uppercase;
+    text-align: left;
+    float: left;
     cursor: pointer;
-    color: #3a3a3a;
 }
 
-.documentBar .zoomHotText span {
-    color: white;
+.documentBar .viewicon {
+    background-repeat: no-repeat;
+    background-position: center center;
+    width: 16px;
+    height: 16px;
+    margin: 2px 4px 0 0;
+    float: left;
 }
 
-.documentBar .enable{
-    color: #d7d7d7;
+.documentBar .viewcode {
+    background-image: url('../../../../images/optionsbar/text/AlignLeft.png');
+    background-size: 80%;
 }
 
-.documentBar .disable{
-    color: #3a3a3a;
+.documentBar .viewdesign {
+    background-image: url('../../../../js/panels/Color/colorpanelpopup.reel/img/icon_bitmap.png');
+    background-size: 90%;
 }
+
+.documentBar section.inactive .viewicon{
+    opacity: .5;
+}
+
+.documentBar section.inactive button {
+    opacity: .5;
+}
+
+.documentBar section.inactive button:hover {
+    opacity: 1;
+}
\ No newline at end of file