Changeset 589

Timestamp:

10/10/12 15:17:24 (12 years ago)

Author:

vmipsl

Message:

interface _ cloud

Location:

ether_statistics/web

Files:

• project/statistics-script.jsp (modified) (5 diffs)
• project/statistics.jsp (modified) (3 diffs)
• resources/css/statistics.css (modified) (6 diffs)
• resources/images/cloud.png (modified) (previous)
• resources/images/cloud_small.png (modified) (previous)

ether_statistics/web/project/statistics-script.jsp

@@ -8 +8 @@
         {
             /** *********** CONTAINERS *********** **/
-            this.containerTitle = $( "#title" );
-            this.containerLanguage = $( "#language" );
-            this.containerTabs = $( "#tab" );
-            this.containerLogin = $( "#login" );
+            this.parent = $( "#containerMiddle" );
+            this.containerMenu = $( "#menuCircle" );
 
             /** *********** VARIABLES *********** **/
             this.language = '<spring:message code="language"/>';
             this.webmaster = "<%=WebHelper.getProperty(request, "mail.webmaster")%>";
+            this.numberProjects = {"logo_acomida.jpg", "logo_ECCAD.gif", "logo_gosat.jpg", "logo_Megapoli.png", "logo_Ether.jpg", "logo_mimosa.png"};
 
+            this.bindButtons();
+            this.createDivs();
+            this.createCircleMenu();
             $( ".containerToDrag" ).draggable();
-            this.bindButtons();
         },
 
@@ -29 +30 @@
             $( "#mail_button" ).bind( "dblclick", this.onClickMail );
             $( "#login_button" ).bind( "dblclick", jQuery.proxy( this.onClickLogin, this ) );
+        },
+
+        createDivs: function()
+        {
+            var div1 = this.createDiv( "div1", "150", "200", "200", "100", "Main statistics", "content" );
+            this.parent.append( div1 );
+            var div2 = this.createDiv( "div2", "250", "200", "150", "300", "MEGAPOLI Statistics", "content" );
+            this.parent.append( div2 );
+            var div3 = this.createDiv( "div3", "150", "200", "300", "600", "TAPAS Statistics", "content" );
+            this.parent.append( div3 );
+        },
+
+        createDiv: function( id, width, height, top, left, title, content )
+        {
+            var divContainer = $( document.createElement( "div" ) );
+            divContainer.addClass( "containerStatistics containerToDrag" );
+            divContainer.attr( {id:id, style:"width:" + width + "px; height:" + height + "px; top:" + top + "px; left:" + left + "px"} );
+            var divTitle = $( document.createElement( "div" ) );
+            divTitle.addClass( "containerStatisticsTitle" );
+            divTitle.html( title );
+            divTitle.attr( {style:"width:" + (width - 7) + "px"} );
+            divContainer.append( divTitle );
+            var divContent = $( document.createElement( "div" ) );
+            divContent.addClass( "containerStatisticsContent" );
+            divContent.html( content );
+            divContainer.append( divContent );
+            return divContainer;
+        },
+
+        createCircleMenu: function()
+        {
+            var menuWidth = 300;
+            var nbLogosForWidth = (this.numberProjects / 2) + 1;
+            var logoWidth = menuWidth / nbLogosForWidth;
+
         },
 
@@ -72 +108 @@
         onClickLogin: function()
         {
+            if( 88 == $( "#login_bg" ).width() )
+                this.enlargeLogin();
+            else
+                this.reduceLogin();
+        },
+
+        onClickButtonLogin: function()
+        {
+            // TODO reduce cloud
+
+        },
+
+        // OTHERS ********************************************************
+        reduceLogin: function()
+        {
+            $( "#login_text" ).css( "visibility", "hidden" );
+            $( "#login_bg" ).animate( {
+                opacity: 1,
+                height:'60px',
+                width:'78px'
+            }, 5000, function()
+            {
+            } );
+
+            $( "#login_button" ).animate( {
+                top:'16px',
+                left: '20px'
+            }, 5000, function()
+            {
+            } );
+        },
+
+        enlargeLogin: function()
+        {
             $( "#login_bg" ).animate( {
                 opacity: 0.45,
@@ -82 +152 @@
 
             $( "#login_button" ).animate( {
-                top:'71px',
-                left: '160px'
+                top:'82px',
+                left: '155px'
             }, 5000, function()
             {
@@ -89 +159 @@
         }
 
-        // OTHERS ********************************************************
-
     } );
 

ether_statistics/web/project/statistics.jsp

@@ -36 +36 @@
 
 <BODY>
-<a name="top"></a>
 
-<%-- ************************************************************************************************************** --%>
-<%-- *************************************************** LOGO ETHER *********************************************** --%>
-<%-- ************************************************************************************************************** --%>
-<div id="linkLogoEther" class="containerLinkLogoEther"></div>
-
-<div id="logoEther" class="containerLogoEther">
-    <a href="http://ether.ipsl.jussieu.fr" target="help"><img src="resources/images/logo_Ether.jpg" width="80px" height="80px"/></a>
-</div>
-
-<%-- ************************************************************************************************************** --%>
-<%-- **************************************************** WRAPPER ************************************************* --%>
-<%-- ************************************************************************************************************** --%>
 <div class="pageWrapper">
 
     <%-- ****************** TITLE & TOOLS ****************** --%>
     <div class="containerTop">
-        <div id="title" class="containerTitle containerToDrag"><spring:message code="title"/></div>
+        <div id="title" class="containerTitle containerToDrag">
+            <div><spring:message code="title"/></div>
+            <div>&nbsp;&nbsp;&nbsp;&nbsp;<img src="resources/images/cloud_half.png" width="88px" height="35px"/></div>
+        </div>
 
-        <div id="login" class="containerToDrag">
-            <%--<img id="login_bg" src='resources/images/cloud.png' width="78px" height="60px"/>--%>
-            <img id="login_bg" src='resources/images/cloud.png' width="500px" height="500px"/>
-            <img id="login_button" src='resources/images/Milky/Chat.png' width="30px" height="30px"/>
+        <div id="login" class="loginToClick containerToDrag">
+            <img id="login_bg" class="loginToClick" src='resources/images/cloud.png' width="88px" height="71px"/>
+            <img id="login_button" class="loginToClick" src='resources/images/Milky/Chat.png' width="30px" height="30px"/>
 
             <div id="login_text">
@@ -66 +55 @@
                     <spring:message code="label.firstname"/> : <input type="text" size="30"><BR/><BR/>
                     <spring:message code="label.lastname"/> : <input type="text" size="30"><BR/><BR/><BR/>
-                    <div style="float:right"><button><spring:message code="label.connection"/></button></div>
+
+                    <div style="float:right">
+                        <button><spring:message code="label.connection"/></button>
+                    </div>
                 </div>
             </div>
@@ -76 +68 @@
         </div>
         <div id="mail" class="cloud containerCloud containerToDrag"><img id="mail_button" src='resources/images/Milky/mail_add.png' width="40px" height="40px"/></div>
-        <div class="cloud containerCloud containerToDrag">
+        <div id="copy" class="cloud containerCloud containerToDrag">
             <div id="copy1">&copy; 2012-2013</div>
             <div id="copy2">ETHER / CNRS</div>
         </div>
 
-        <%--<div class="dock" id="dock">--%>
-        <%--<div class="dock-container">--%>
-        <%--<a class="dock-item" href="#"><img src="resources/js/css-dock-menu/images/home.png" alt="home"/><span>Home</span></a>--%>
-        <%--<a class="dock-item" href="#"><img src="resources/js/css-dock-menu/images/email.png" alt="contact"/><span>Contact</span></a>--%>
-        <%--<a class="dock-item" href="#"><img src="resources/js/css-dock-menu/images/portfolio.png" alt="portfolio"/><span>Portfolio</span></a>--%>
-        <%--<a class="dock-item" href="#"><img src="resources/js/css-dock-menu/images/music.png" alt="music"/><span>Music</span></a>--%>
-        <%--<a class="dock-item" href="#"><img src="resources/js/css-dock-menu/images/video.png" alt="video"/><span>Video</span></a>--%>
-        <%--<a class="dock-item" href="#"><img src="resources/js/css-dock-menu/images/history.png" alt="history"/><span>History</span></a>--%>
-        <%--<a class="dock-item" href="#"><img src="resources/js/css-dock-menu/images/calendar.png" alt="calendar"/><span>Calendar</span></a>--%>
-        <%--<a class="dock-item" href="#"><img src="resources/js/css-dock-menu/images/rss.png" alt="rss"/><span>RSS</span></a>--%>
-        <%--</div>--%>
-        <%--</div>--%>
-
+        <div class="menuCircle" id="menuCircle"></div>
 
     </div>
+
+    <div id="containerMiddle"></div>
 
     <script type="text/javascript">

ether_statistics/web/resources/css/statistics.css

@@ -16 +16 @@
 /** ********************** CONTAINER ******************** **/
 /** ***************************************************** **/
+#containerMiddle {
+    position: relative;
+}
+
 .containerStatistics {
     -moz-border-radius: 4px 4px 4px 4px;
-    -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
+    -moz-box-shadow: 0 0 4px rgba(101, 152, 30, 1);
     -webkit-border-radius: 4px 4px 4px 4px;
-    -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
-    box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
-    width: 980px;
-    float: left;
-    margin-bottom: 10px;
+    -webkit-box-shadow: 0 0 4px rgba(101, 152, 30, 1);
+    box-shadow: 0 0 4px rgba(101, 152, 30, 1);
+    position: absolute;
+    background-color: rgba(101, 152, 30, 0.1);
+    margin-right: 10px;
+}
+
+.containerStatisticsTitle {
+    background: -moz-linear-gradient(#65981E, #E6EFC2) repeat scroll 0 0 transparent;
+    background: -ms-linear-gradient(#65981E, #E6EFC2) repeat scroll 0 0 transparent; /*For IE10*/
+    background: -webkit-linear-gradient(#65981E, #E6EFC2) repeat scroll 0 0 transparent; /*For IE10*/
+    filter: progid:DXImageTransform.Microsoft.gradient(GradientType = 0, startColorstr = '#65981E', endColorstr = 'E6EFC2'); /*For IE7-8-9*/
+    background-color: #65981E;
+    -moz-border-radius: 4px 4px 4px 4px;
+    -moz-box-shadow: 0 0 4px rgba(101, 152, 30, 1);
+    -webkit-border-radius: 4px 4px 4px 4px;
+    -webkit-box-shadow: 0 0 4px rgba(101, 152, 30, 1);
+    box-shadow: 0 0 4px rgba(101, 152, 30, 1);
+    height: 25px;
+    font-weight: bold;
+    padding-left: 7px;
+}
+
+.containerStatisticsContent {
+    padding: 5px;
 }
 
 .containerTop {
     width: 840px;
-    float: left;
 }
 
@@ -42 +65 @@
 .containerCloud {
     float: left;
-    margin-right: 30px;
+    margin-right: 15px;
 }
 
@@ -86 +109 @@
 }
 
+#copy {
+    position: absolute;
+    top: 492px;
+    left: 1115px;
+}
+
 #copy1 {
     font-size: 7px;
@@ -101 +130 @@
     position: relative;
     float: left;
+    margin-right: 10px;
 }
 
@@ -111 +141 @@
 
 #login_button {
-    position: absolute; /*top: 16px;*/
-/*left: 20px;*/
-
-    top: 74px;
-    left: 153px;
+    position: absolute;
+    top: 21px;
+    left: 25px;
     z-index: 2;
 }
 
 #login_text {
-/*visibility: hidden;*/
+    visibility: hidden;
     position: absolute;
     z-index: 2;
@@ -127 +155 @@
 #login_text_title {
     position: absolute;
-    top: 67px;
+    top: 76px;
     left: 171px;
     font-weight: bold;