From 2dd8fabacf115cf32e38115a472f3f2c59926135 Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Thu, 12 Jul 2012 16:06:11 -0700 Subject: 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. --- .../layout/document-bar.reel/document-bar.css | 88 ++++++++++----- .../layout/document-bar.reel/document-bar.html | 124 +++++++++++++-------- js/ninja.reel/ninja.html | 8 +- 3 files changed, 145 insertions(+), 75 deletions(-) (limited to 'js') 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. */ -.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 diff --git a/js/components/layout/document-bar.reel/document-bar.html b/js/components/layout/document-bar.reel/document-bar.html index 101f716d..69f8107f 100755 --- a/js/components/layout/document-bar.reel/document-bar.html +++ b/js/components/layout/document-bar.reel/document-bar.html @@ -29,62 +29,90 @@ 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. --> + -
- - + + + + + - - + - + - -