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.
-->
+
-
-
-
+
+
+
+
+
-
-
+
-
+
-
-
-
-
Design View
-
Code View
-
-