Changeset 259 for Dev


Ignore:
Timestamp:
02/14/12 17:50:22 (13 years ago)
Author:
tjcschipper
Message:

Metro interface, selector werkt bijna! (Alleen move to dashboard nog niet, rest is prima (en de icons zijn lelijk).

Location:
Dev/branches/Cartis/Tiles preview
Files:
17 added
3 edited

Legend:

Unmodified
Added
Removed

  • Dev/branches/Cartis/Tiles preview/css/tile1.css

    r258 r259  
    161161
    162162
    163 #basePanel {
     163.basePanel {
    164164    width: 940px;
    165165    height: 465px;
    … …  
    191191}
    192192
    193 .tile {
     193.tileAnimating {
    194194    width: 230px;
    195195    height: 230px;
    … …  
    202202}
    203203
     204.tile {
     205    width: 230px;
     206    height: 230px;
     207    border: none;
     208    float: left;
     209    clear: none;
     210    margin-right: 5px;
     211    margin-bottom: 5px;
     212    background: #367ac3;
     213    background-image: linear-gradient(left bottom, rgb(54,122,195) 44%, rgb(74,139,208) 72%);
     214    background-image: -o-linear-gradient(left bottom, rgb(54,122,195) 44%, rgb(74,139,208) 72%);
     215    background-image: -moz-linear-gradient(left bottom, rgb(54,122,195) 44%, rgb(74,139,208) 72%);
     216    background-image: -webkit-linear-gradient(left bottom, rgb(54,122,195) 44%, rgb(74,139,208) 72%);
     217    background-image: -ms-linear-gradient(left bottom, rgb(54,122,195) 44%, rgb(74,139,208) 72%);
     218
     219    background-image: -webkit-gradient(
     220        linear,
     221        left bottom,
     222        right top,
     223        color-stop(0.44, rgb(54,122,195)),
     224        color-stop(0.72, rgb(74,139,208))
     225        );
     226}
     227
     228.doubleHeight {
     229    height: 465px;
     230}
     231
     232.staticTile {
     233    width: 230px;
     234    /*height: 230px;*/
     235    border: none;
     236    float: left;
     237    clear: none;
     238    margin-right: 5px;
     239    margin-bottom: 5px;
     240    background: #367ac3;
     241   
     242}
     243
    204244.tile:hover {
    205     background: #EDD68B;
     245    background-color: #78abe2;
     246    background-image: linear-gradient(bottom, rgb(54,122,195) 44%, rgb(120,171,226) 72%);
     247    background-image: -o-linear-gradient(bottom, rgb(54,122,195) 44%, rgb(120,171,226) 72%);
     248    background-image: -moz-linear-gradient(bottom, rgb(54,122,195) 44%, rgb(120,171,226) 72%);
     249    background-image: -webkit-linear-gradient(bottom, rgb(54,122,195) 44%, rgb(120,171,226) 72%);
     250    background-image: -ms-linear-gradient(bottom, rgb(54,122,195) 44%, rgb(120,171,226) 72%);
     251
     252    background-image: -webkit-gradient(
     253        linear,
     254        left bottom,
     255        left top,
     256        color-stop(0.44, rgb(54,122,195)),
     257        color-stop(0.72, rgb(120,171,226))
     258        );
    206259}
    207260
    … …  
    212265    color: #fff;
    213266    margin: 195px 5px 5px 5px;
    214     font-size: 30px;
     267    font-size: 25px;
    215268    line-height: 30px;
    216269    text-align: left;
    … …  
    219272}
    220273
     274.tileHeader {
     275    font-family: Segoe, sans-serif;
     276    width: 220px;
     277    height: 30px;
     278    color: #fff;
     279    margin: 5px 5px 5px 5px;
     280    font-size: 20px;
     281    line-height: 20px;
     282    text-align: left;
     283    white-space: nowrap;
     284    user-select: none;
     285}
     286
    221287
    222288#pageInfo {
    … …  
    248314}
    249315
    250 
    251 
     316.tileField {
     317    width: 224px;
     318    height: auto;
     319    margin: 0 3px;
     320    border: none;
     321    background: #367ac3;
     322    color: #fff;
     323    font-family: segoe, sans-serif;
     324    outline: none;
     325}
     326
     327.multipleSelect {
     328    padding: 2px;
     329    height: 420px;
     330}
     331
     332.controls {
     333    text-align: right;
     334    width: 220px;
     335    padding: 5px;
     336}
     337
     338.smallButton {
     339    background: #00569b;
     340    border: none;
     341    color: #fff;
     342    font-family: segoe, sans-serif;
     343    font-size: 16px;
     344    padding: 5px;
     345}
     346
     347.smallButton:hover {
     348    background: #0762a8;
     349}
     350
     351.doubleHeight .content {
     352    height: 375px;
     353    width: 224px;
     354    padding: 3px;
     355    overflow-x: hidden;
     356    overflow-y: auto;
     357    color: #fff;
     358}
     359
     360.shoppingCartItem {
     361    width: 224px;
     362    height: 16px;
     363}

  • Dev/branches/Cartis/Tiles preview/js/generalScripts.js

    r258 r259  
    155155    return document.getElementById(s);
    156156}
    157 
    158 // Function for getting the absolute position of the top left corner of an element, relative to the window
    159 function getPos(element) {
    160     var posX = posY = 0;
    161     if (element.offsetParent) {
    162         do {
    163             posX += element.offsetLeft;
    164             posY += element.offsetTop;
    165         } while (element = element.offsetParent);
    166     }
    167    
    168     var result = {
    169         X: posX,
    170         Y: posY
    171     }
    172     return result;
    173 }
    174 
    175 // TODO: this is a broken version of the above function, to be used during the demo ONLY! (Else the dropdown menu does not work correctly...
    176 // Fix/remove as soon as possible
    177 function getWrongPos(element) {
    178     var posX = posY = 0;
    179     if (element.offsetParent) {
    180         do {
    181             posX += element.offsetLeft;
    182             posY += element.offsetTop;
    183         } while (element = element.offSetParent);
    184     }
    185    
    186     var result = {
    187         X: posX,
    188         Y: posY
    189     }
    190     return result;
    191 }
    192 
    193 // Returns the computed width of an element
    194 function getWidth(element) {
    195     var width = 0;
    196     if (element.offsetWidth) {
    197         width = element.offsetWidth;
    198     }
    199    
    200     return width;
    201 }
    202 
    203 // Returns the computer size of an element
    204 function getSize(element) {
    205     var size = {
    206         X: null,
    207         Y: null
    208     }
    209     if (element.offsetWidth) {
    210         size.X = element.offsetWidth;
    211         size.Y = element.offsetHeight;
    212     }
    213    
    214     return size;
    215 }
    216 
    217 // Drop down menu implementation. Supports three levels: Base button, 1st level categories, and 2nd level links
    218 // TODO: getPos functie werkte eerst niet goed, menu offset is nog beetje whack. Betere manier van dropdown menu vinden en voor nu even de getPos functie stuk laten?
    219 function DDMenu() {
    220     // Initialize function, setting all needed variables.
    221     var instance = this;
    222     this.closeTimer = 0;
    223     this.ddMenuItem = null;
    224     this.timeout = 350;
    225     this.visible = false;
    226     this.menuElement = null;
    227     this.parentButton = null
    228    
    229     this.Init = function(id1, id2) {   
    230         instance.menuElement = ge(id1);
    231         instance.parentButton = ge(id2);
    232     }
    233    
    234     this.SetCloseTimer = function() {
    235         //debugger;
    236         instance.closeTimer = window.setTimeout(instance.Close, instance.timeout);
    237     }
    238    
    239     this.Close = function() {
    240         if (instance.ddMenuItem) {
    241             instance.ddMenuItem.style.visibility = "hidden";
    242         }
    243         instance.Toggle();
    244        
    245     }
    246    
    247     this.CancelCloseTimer = function() {
    248         if (instance.closeTimer) {
    249             window.clearTimeout(instance.closeTimer);
    250             instance.closeTimer = null;
    251         }
    252     }
    253    
    254     this.Open = function(id) {
    255         instance.CancelCloseTimer();
    256         if (instance.ddMenuItem) {
    257             instance.ddMenuItem.style.visibility = "hidden";
    258         }
    259        
    260         instance.ddMenuItem = ge(id);
    261         instance.ddMenuItem.style.visibility = "visible";
    262         var parentPos = getWrongPos(instance.ddMenuItem.parentNode);
    263         var parentWidth = getWidth(instance.ddMenuItem.parentNode);
    264         instance.ddMenuItem.style.left = (parentPos.X + parentWidth)+"px";
    265         instance.ddMenuItem.style.top = parentPos.Y+"px";
    266        
    267     }
    268    
    269     this.Toggle = function() {
    270         //debugger;
    271         if (instance.visible) {
    272             // Hide the menu
    273             instance.menuElement.style.visibility = "hidden";
    274             instance.parentButton.className = "";
    275             instance.visible = false;
    276         }
    277         else{
    278             //Show the menu
    279             if (instance.menuElement) {
    280                 instance.menuElement.style.visibility = "visible";
    281                 instance.parentButton.className = "down";
    282             }
    283             instance.visible = true;
    284         }
    285     }
    286 }
    287 
    288 function manualEventFire(element, rawEvent) {
    289     // Attempts to fire a raw DOM event on an element
    290    
    291     try {
    292         element = document.getElementById(element);
    293         if (element.fireEvent) {
    294             element.fireEvent("on"+rawEvent.type, rawEvent);
    295             return true;
    296         }
    297         else if (element.dispatchEvent) {
    298             element.dispatchEvent(rawEvent);
    299             return true;
    300         }
    301     } catch (e) {
    302     }
    303     return false;
    304 }

  • Dev/branches/Cartis/Tiles preview/tiles1.html

    r258 r259  
    1212        <script type="text/javascript" src="js/jquery.js"></script>
    1313        <script type="text/javascript" src="js/jquery-ui.min.js"></script>
    14         <!--<script type="text/javascript" src="tileAnims.js"></script>-->
     14        <script src="js./nav.js"></script>
    1515    </head>
    1616    <body>
    … …  
    2424                </div>
    2525                <div class="breadcrumbs">     
    26               <!--      <img src="fakeBreadcrumbs.png"></div> -->
     26                </div>
     27            </div>
     28
     29            <div id="wrapper">
     30                <div id="content">
     31                    <div class="basePanel">
     32                        <div id="tiles" class="left3">
     33                            <div class="leftContainer">
     34                                <div id="tile1" class="tile" onclick="mockup.api.clickTile(this, 'dataSelection')"><div class="tileText">Create Dashboard</div></div>
     35                                <div id="tile2" class="tile"><div class="tileText">Templates</div></div>
     36                                <div id="tile3" class="tile"><div class="tileText">Edit content</div></div>
     37                                <div id="tile4" class="tile"><div class="tileText">Results</div></div>
     38                                <div id="tile5" class="tile"><div class="tileText">Log out</div></div>
     39                                <div id="tile6" class="tile"><div class="tileText">Help</div></div>
     40                                <div style="clear:both;"></div>
     41                            </div>
     42                        </div>
     43                        <div id="pageInfo" class="right1">
     44                            <div class="rightContainer">
     45                                <div id="descriptionTitle" class="descriptionText" >
     46                                    <div id="description" class="descriptionTitle">Description</div>   
     47                                    A description, welcome text or simple guide to operation goes here. This 1/4 screen block is consistently present in all interface screens, to show relevant information to the user or guide them through the process.
     48
     49
     50                                </div>
     51                            </div>
     52
     53                        </div>
     54                    </div>
     55                </div>
    2756
    2857            </div>
    29         </div>
    3058
    31         <div id="wrapper">
    32             <div id="content">
    33                 <div id="basePanel">
    34                     <div id="tiles" class="left3">
    35                         <div class="leftContainer">
    36                             <div id="tile1" class="tile"><div class="tileText">Browse sessions</div></div>
    37                             <div id="tile2" class="tile"><div class="tileText">Templates</div></div>
    38                             <div id="tile3" class="tile"><div class="tileText">Edit content</div></div>
    39                             <div id="tile4" class="tile"><div class="tileText">Results</div></div>
    40                             <div id="tile5" class="tile"><div class="tileText">Log out</div></div>
    41                             <div id="tile6" class="tile"><div class="tileText">Help</div></div>
    42                             <div style="clear:both;"></div>
     59            <!--          <div id="footerInfo">
     60                            asdasd
    4361                        </div>
    44                     </div>
    45                     <div id="pageInfo" class="right1">
    46                         <div class="rightContainer">
    47                             <div id="descriptionTitle" class="descriptionText" >
    48                                 <div id="description" class="descriptionTitle">Description</div>   
    49                                 A description, welcome text or simple guide to operation goes here. This 1/4 screen block is consistently present in all interface screens, to show relevant information to the user or guide them through the process.
    50 
    51 
    52                             </div>
    53                         </div>
    54 
    55                     </div>
    56                 </div>
    57             </div>
    58  
    59         </div>
    60 
    61 <!--          <div id="footerInfo">
    62                 asdasd
    63             </div>
    64 -->
    65 </body>
     62            -->
     63    </body>
    6664
    6765</html>
Note: See TracChangeset for help on using the changeset viewer.