Revision 9b0b486b

b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/common.js
56 56 
*  - both/single ( for multiple entities/single entities)
57 57 
*  - running/off ( for running/off entities)
58 58 
*  - permanent ( for entities always active )
59 
* Can be used for pithos as well
60 
* Available categories are :
61 
* - files ( for files only actions)
62 
* - folders ( for folders only actions)
63 
* - all ( for files/folders actions)
59 64 
*/
60 65 
ui.entitiesActionsEnabled = function(){
61 66 
    var all = $('.snf-checkbox-checked').length;
62 67 
    var running = $('.snf-checkbox-checked').parents('li.running').length;
63 68 
    var off = $('.snf-checkbox-checked').parents('li.off').length;
64 
    console.log(off, 'actions here');
69 
    var files = $('.snf-checkbox-checked').parents('li.file').length;
70 
    var folders = $('.snf-checkbox-checked').parents('li.folder').length;
71 

  		





  
  72
  
    
    console.log(files,'files');


  		





  
  73
  
    
    console.log(folders,'folders');


  		





  
  74
  
    

  		





  65
  75
  
    
    $('.lt-bar .lt-actions li:not(.permanent) a').removeClass('active');


  		





  
  76
  
    

  		





  
  77
  
    
    if ( ( files * folders )>0 ) {


  		





  
  78
  
    
        $('.lt-actions li.all a').addClass('active');


  		





  
  79
  
    
    } else {


  		





  
  80
  
    
        if ( files>0 ) {


  		





  
  81
  
    
            $('.lt-actions li.files a').addClass('active');


  		





  
  82
  
    
        }


  		





  
  83
  
    
        if ( folders>0 ){


  		





  
  84
  
    
            $('.lt-actions li.folders a').addClass('active');


  		





  
  85
  
    
        }


  		





  
  86
  
    
    }


  		





  
  87
  
    

  		





  66
  88
  
    
    if ( (running*off) > 0 ){


  		





  67
  89
  
    
         $('.lt-actions li.both a').addClass('active');


  		





  68
  90
  
    
         $('.lt-actions li.single a').removeClass('active');


  		





  ......




  468
  490
  
    
    })


  		





  469
  491
  
    

  		





  470
  492
  
    
    if ($('.entities .items-list >li').length == 1) {


  		





  471
  
  
    
        $('.overlay-wrapper').addClass('no-vm');


  		





  
  493
  
    
        $('.body-wrapper').addClass('no-vm');


  		





  472
  494
  
    
    };


  		





  473
  495
  
    
    $('.entities li .more').each(function(){


  		





  474
  496
  
    
        var width = $(this).parent('li').outerWidth()  + 20;


  		





  ......




  599
  621
  
    

  		





  600
  622
  
    
    /* grid/list view for items-list */


  		





  601
  623
  
    

  		





  602
  
  
    
    $('.view-type .list').click(function(e){


  		





  603
  
  
    
        e.preventDefault();


  		





  604
  
  
    
        $('.view-type .grid span').removeClass('current');


  		





  605
  
  
    
        $(this).find('span').addClass('current');


  		





  606
  
  
    
        $('.entities').removeClass('grid-view');


  		





  607
  
  
    
        $('.entities').addClass('list-view');


  		





  608
  
  
    
    });


  		





  609
  
  
    

  		





  610
  
  
    
     $('.view-type .grid').click(function(e){


  		





  
  624
  
    
    $('.actions-bar .list, .actions-bar .grid').click(function(e){


  		





  611
  625
  
    
        e.preventDefault();


  		





  612
  
  
    
        $('.view-type .list span').removeClass('current');


  		





  613
  
  
    
        $(this).find('span').addClass('current');


  		





  614
  
  
    
        $('.entities').addClass('grid-view');


  		





  615
  
  
    
        $('.entities').removeClass('list-view');


  		





  
  626
  
    
        if (!($(this).find('span').hasClass('current'))) {


  		





  
  627
  
    
            $('.actions-bar .grid span, .actions-bar .list span').removeClass('current');


  		





  
  628
  
    
            $(this).find('span').addClass('current');


  		





  
  629
  
    
            $('.entities').toggleClass('grid-view list-view');


  		





  
  630
  
    
        }


  		





  616
  631
  
    
    });


  		





  617
  632
  
    

  		





  618
  633
  
    
     $('.lt-bar .select').click(function(e){


  		












  

    
      b/snf-cyclades-app/synnefo/ui/new_ui/ui/pithos.html
    
  






  
  1
  
    

  		





  
  2
  
    
<!DOCTYPE html>


  		





  
  3
  
    
    <!--[if lte IE 7]><script src="javascripts/lte-ie7.js"></script><![endif]-->


  		





  
  4
  
    
<!--[if IE 8]> 				 <html class="no-js lt-ie9" lang="en"> <![endif]-->


  		





  
  5
  
    
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->


  		





  
  6
  
    

  		





  
  7
  
    
<head>


  		





  
  8
  
    
	<meta charset="utf-8" />


  		





  
  9
  
    
    <meta name="viewport" content="width=device-width" />


  		





  
  10
  
    
    <title>Pithos</title>


  		





  
  11
  
    
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&amp;subset=latin,greek-ext,greek' rel='stylesheet' type='text/css'>


  		





  
  12
  
    
    <link rel="stylesheet" href="stylesheets/normalize.css" />


  		





  
  13
  
    
    <link rel="stylesheet" href="stylesheets/app.css" />


  		





  
  14
  
    
    <link rel="stylesheet" href="stylesheets/farbtastic.css" />


  		





  
  15
  
    
    <link rel="stylesheet" href="stylesheets/font_custom.css" />


  		





  
  16
  
    
    <link rel="stylesheet" href="stylesheets/jquery.jscrollpane.css" media="all" />


  		





  
  17
  
    
    <link rel="stylesheet" href="stylesheets/magnific-popup.css" />


  		





  
  18
  
    
    <script src="javascripts/vendor/custom.modernizr.js"></script>


  		





  
  19
  
    
</head>


  		





  
  20
  
    
<body>  


  		





  
  21
  
    
    <header class="header">


  		





  
  22
  
    
        <nav>


  		





  
  23
  
    
            <ul class="icons-nav">


  		





  
  24
  
    
                <li><a href="vm_list.html" data-tooltip class="has-tip" title="Machines"><span class="snf-pc-outline"></span></a></li>


  		





  
  25
  
    
                <li><a href="network_list.html" data-tooltip class="has-tip" title="Networks"><span class="snf-network-outline"></span></a></li>


  		





  
  26
  
    
                <li><a href="volumes_list.html" data-tooltip class="has-tip" title="Disks"><span class="snf-volume-outline"></span></a></li>


  		





  
  27
  
    
                <li><a href="pithos_list.html" data-tooltip class="has-tip current" title="Storage"><span class="snf-pithos-outline"></span></a></li>


  		





  
  28
  
    
                <li><a href="images_list.html" data-tooltip class="has-tip" title="Images"><span class="snf-image-outline"></span></a></li>


  		





  
  29
  
    
                <li><a href="snapshots_list.html" data-tooltip class="has-tip" title="Snapshots"><span class="snf-snapshot-outline"></span></a></li>


  		





  
  30
  
    
                <li><a href="" data-tooltip class="has-tip" title="More"><span class="snf-plus-outline"></span></a></li>


  		





  
  31
  
    
            </ul>


  		





  
  32
  
    
        </nav>


  		





  
  33
  
    
        <div class="login">


  		





  
  34
  
    
            <div class="wrap">


  		





  
  35
  
    
                <a href="">user1@synnefo.org</a>


  		





  
  36
  
    
                <ul>


  		





  
  37
  
    
                    <li><a href="">dashboard</a></li>


  		





  
  38
  
    
                    <li><a href="">sign out</a></li>


  		





  
  39
  
    
                </ul>


  		





  
  40
  
    
            </div>


  		





  
  41
  
    
        </div>


  		





  
  42
  
    
        <div class="logo">


  		





  
  43
  
    
            <a href="index.html"><img src="images/synnefo-logo.png" alt="software logo"></a>


  		





  
  44
  
    
        </div>


  		





  
  45
  
    
    </header>


  		





  
  46
  
    
    <div class="body-wrapper">


  		





  
  47
  
    
        <section class="actions-bar clearfix">


  		





  
  48
  
    
                <h2><a href="">root</a> <a href="">pithos</a> my folder</h2>


  		





  
  49
  
    
                <div class="rt-actions">


  		





  
  50
  
    
                    <a href=""><span class="snf-trash"></span></a>


  		





  
  51
  
    
                </div>


  		





  
  52
  
    
                <div class="filter-menu">


  		





  
  53
  
    
                    <div><a class="filter" href="">Filter</a></div>


  		





  
  54
  
    
                    <ul class="options">


  		





  
  55
  
    
                        <li><a href="">option 1</a></li>


  		





  
  56
  
    
                        <li><a href="">option 2</a></li>


  		





  
  57
  
    
                        <li><a href="">option 3</a></li>


  		





  
  58
  
    
                        <li><a href="">option 4</a></li>


  		





  
  59
  
    
                    </ul>


  		





  
  60
  
    
                </div>


  		





  
  61
  
    
                <div id="hd-search" class="hd-search">


  		





  
  62
  
    
                    <form>


  		





  
  63
  
    
                        <span class="hd-icon-search snf-search"></span>


  		





  
  64
  
    
                        <input class="hd-search-input" placeholder="Enter your search term..." type="search" value="" name="search" id="search">


  		





  
  65
  
    
                    </form>


  		





  
  66
  
    
                </div>


  		





  
  67
  
    
            </section>


  		





  
  68
  
    
            <section class="main row">


  		





  
  69
  
    
            <div class="storage entities list-view">


  		





  
  70
  
    
                <ul class="items-list">


  		





  
  71
  
    
                    <li class="add-new">


  		





  
  72
  
    
                        <div class="container">


  		





  
  73
  
    
                            <div class="check">


  		





  
  74
  
    
                                <span class="snf-checkbox-unchecked"></span>


  		





  
  75
  
    
                            </div>


  		





  
  76
  
    
                            <div class="img-wrap">


  		





  
  77
  
    
                                <span class="rect-plus">+</span>


  		





  
  78
  
    
                            </div>


  		





  
  79
  
    
                            <h4>Upload file</h4>


  		





  
  80
  
    
                        </div>


  		





  
  81
  
    
                    </li>


  		





  
  82
  
    
                    <li data-status="folder" class="folder">


  		





  
  83
  
    
                        <div class="container">


  		





  
  84
  
    
                            <div class="check">


  		





  
  85
  
    
                                <span class="snf-checkbox-unchecked"></span>


  		





  
  86
  
    
                            </div>


  		





  
  87
  
    
                            <div class="img-wrap">


  		





  
  88
  
    
                                <img src="images/icon-txt.png" alt="" />


  		





  
  89
  
    
                            </div>


  		





  
  90
  
    
                            <h4>file name.txt</h4>


  		





  
  91
  
    
                            <div class="size">


  		





  
  92
  
    
                                100KB


  		





  
  93
  
    
                            </div>


  		





  
  94
  
    
                            <div class="info">Last updated: 23/12/2013 11:56pm</div>


  		





  
  95
  
    
                        </div>


  		





  
  96
  
    
                    </li>


  		





  
  97
  
    
                    <li data-status="file" class="file">


  		





  
  98
  
    
                        <div class="container">


  		





  
  99
  
    
                            <div class="check">


  		





  
  100
  
    
                                <span class="snf-checkbox-unchecked"></span>


  		





  
  101
  
    
                            </div>


  		





  
  102
  
    
                            <div class="img-wrap">


  		





  
  103
  
    
                                <img src="images/icon-txt.png" alt="" />


  		





  
  104
  
    
                            </div>


  		





  
  105
  
    
                            <h4>file name.txt</h4>


  		





  
  106
  
    
                            <div class="size">


  		





  
  107
  
    
                                100KB


  		





  
  108
  
    
                            </div>


  		





  
  109
  
    
                            <div class="info">Last updated: 23/12/2013 11:56pm</div>


  		





  
  110
  
    
                        </div>


  		





  
  111
  
    
                    </li>


  		





  
  112
  
    
                    


  		





  
  113
  
    
                </ul>


  		





  
  114
  
    
                <div class="communication-error">


  		





  
  115
  
    
                    <p>Sorry! Something went wrong!<br>Try again, but if you keep seeing this message please contact us through the feedback form.</p>


  		





  
  116
  
    
                    <p class="buttons">


  		





  
  117
  
    
                        <a class="btn5" href="">feedback</a>


  		





  
  118
  
    
                        <a href="" class="btn5">close</a>


  		





  
  119
  
    
                    </p>


  		





  
  120
  
    
                </div>


  		





  
  121
  
    
                <div class="lt-bar">


  		





  
  122
  
    
                    <ul class="lt-actions">


  		





  
  123
  
    
                        <li class="select"><span class="snf-checkbox-unchecked checkbox"></span><em>un</em>select all</li>


  		





  
  124
  
    
                        <li class="files"><a href="#" title=""><span class="snf-eye"></span> Share</a></li>


  		





  
  125
  
    
                        <li class="files"><a href="#" title=""><span class="snf-eye"></span> Download</a></li>


  		





  
  126
  
    
                        <li class="files"><a href="#"><span class="snf-trash"></span> Delete</a></li>


  		





  
  127
  
    
                        <li class="all"><a href="#"><span class="snf-eye"></span> Rename</a></li>


  		





  
  128
  
    
                        <li class="all"><a href="#"><span class="snf-eye"></span> Move</a></li>


  		





  
  129
  
    
                        <li class="all"><a href="#"><span class="snf-eye"></span> Copy</a></li>


  		





  
  130
  
    
                        <li class="folders"><a href="#"><span class="snf-eye"></span> Version</a></li>


  		





  
  131
  
    
                    </ul>


  		





  
  132
  
    
                    <ul class="more">


  		





  
  133
  
    
                        <li><a href="#"><span class="snf-eye"></span> Shared by me</a></li>


  		





  
  134
  
    
                        <li><a href="#"><span class="snf-eye"></span> Shared to me</a></li>


  		





  
  135
  
    
                    </ul>


  		





  
  136
  
    
                </div>


  		





  
  137
  
    
            </div>


  		





  
  138
  
    
        </section>


  		





  
  139
  
    
    </div>


  		





  
  140
  
    

  		





  
  141
  
    
    <script src="javascripts/vendor/jquery.js"></script>


  		





  
  142
  
    
    <script src="javascripts/jquery-ui-1.10.3.custom.min.js"></script>


  		





  
  143
  
    
    <script src="javascripts/underscore-min.js"></script>


  		





  
  144
  
    
    <script src="javascripts/foundation/foundation.js"></script>


  		





  
  145
  
    
    <script src="javascripts/foundation/foundation.alerts.js"></script>


  		





  
  146
  
    
    


  		





  
  147
  
    
    <script src="javascripts/foundation/foundation.clearing.js"></script>


  		





  
  148
  
    
    


  		





  
  149
  
    
    <script src="javascripts/foundation/foundation.cookie.js"></script>


  		





  
  150
  
    
    


  		





  
  151
  
    
    <script src="javascripts/foundation/foundation.dropdown.js"></script>


  		





  
  152
  
    
    


  		





  
  153
  
    
    <script src="javascripts/foundation/foundation.forms.js"></script>


  		





  
  154
  
    
    


  		





  
  155
  
    
    <script src="javascripts/foundation/foundation.joyride.js"></script>


  		





  
  156
  
    
    


  		





  
  157
  
    
    <script src="javascripts/foundation/foundation.magellan.js"></script>


  		





  
  158
  
    
    


  		





  
  159
  
    
    <script src="javascripts/foundation/foundation.orbit.js"></script>


  		





  
  160
  
    
    


  		





  
  161
  
    
    <script src="javascripts/foundation/foundation.placeholder.js"></script>


  		





  
  162
  
    
    


  		





  
  163
  
    
    <script src="javascripts/foundation/foundation.reveal.js"></script>


  		





  
  164
  
    
    


  		





  
  165
  
    
    <script src="javascripts/foundation/foundation.section.js"></script>


  		





  
  166
  
    
    


  		





  
  167
  
    
    <script src="javascripts/foundation/foundation.tooltips.js"></script>


  		





  
  168
  
    
    <script src="javascripts/foundation/foundation.topbar.js"></script>


  		





  
  169
  
    
    <script type="text/javascript" src="javascripts/jquery.scrollTo.js"></script>


  		





  
  170
  
    
    <script type="text/javascript" src="javascripts/jquery.easing.1.3.js"></script>


  		





  
  171
  
    
    <script type="text/javascript" src="javascripts/jquery.mousewheel.js"></script>


  		





  
  172
  
    
    <script type="text/javascript" src="javascripts/jquery.jscrollpane.js"></script>


  		





  
  173
  
    
    <!-- dropzone.js used for drag and drop files to upload them --> 


  		





  
  174
  
    
    <script type="text/javascript" src="javascripts/dropzone.js"></script>


  		





  
  175
  
    
    <script type="text/javascript" src="javascripts/jquery.magnific-popup.js"></script>


  		





  
  176
  
    
    <!-- fabrastic.js used for the color picker --> 


  		





  
  177
  
    
    <script type="text/javascript" src="javascripts/farbtastic.js"></script>


  		





  
  178
  
    
    <script type="text/javascript" src="javascripts/jquery.scrollintoview.js"></script>


  		





  
  179
  
    
    <script src="javascripts/common.js"></script>


  		





  
  180
  
    
    


  		





  
  181
  
    
    <script type="text/javascript" src="javascripts/wizard.js"></script>


  		





  
  182
  
    
    <script type="text/javascript" src="javascripts/sshkeys-wizard.js"></script>


  		





  
  183
  
    
  <script>


  		





  
  184
  
    
    $(document).foundation();


  		





  
  185
  
    
    $(document).ready(function() {


  		





  
  186
  
    

  		





  
  187
  
    
    })


  		





  
  188
  
    
  </script>


  		





  
  189
  
    
</body>


  		





  
  190
  
    
</html>


  		





  
  191
  
    
 


  		












  

    
      b/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_storage.scss
    
  






  1
  1
  
    
/* Storage (pithos) related styles  */


  		





  2
  2
  
    

  		





  3
  3
  
    
.storage {


  		





  4
  
  
    
	padding:45px 0;


  		





  5
  
  
    
	position:relative;


  		





  6
  
  
    
	.lt-sidebar {


  		





  7
  
  
    
		font-size: 1em;


  		





  8
  
  
    
		padding:0 20px 40px 40px;


  		





  9
  
  
    
		.sidenav {


  		





  10
  
  
    
			font-size: inherit;


  		





  
  4
  
    
	.rect-plus {


  		





  
  5
  
    
		display: inline-block;


  		





  
  6
  
    
		background-color: #fff;


  		





  
  7
  
    
		color: $link-color-hover;


  		





  
  8
  
    
		padding: 0 6px;


  		





  
  9
  
    
		font-size: emCalc(26px);


  		





  
  10
  
    
		&:hover {


  		





  
  11
  
    
			color: $link-color;


  		





  11
  12
  
    
		}


  		





  12
  
  
    
		ul {


  		





  13
  
  
    
			list-style: none outside none;


  		





  14
  
  
    
			li {


  		





  15
  
  
    
				padding:5px 0;


  		





  16
  
  
    
				&:hover {


  		





  17
  
  
    
					background: transparent;


  		





  18
  
  
    
					&>a {


  		





  19
  
  
    
						color:$secondary-color;


  		





  20
  
  
    
						&+span {


  		





  21
  
  
    
							display: inline;


  		





  22
  
  
    
						}


  		





  23
  
  
    
					}


  		





  24
  
  
    
				}


  		





  25
  
  
    
				span {


  		





  26
  
  
    
					float:right;


  		





  27
  
  
    
					color:$secondary-color;


  		





  28
  
  
    
					display: none;


  		





  29
  
  
    
				}


  		





  
  13
  
    
	}


  		





  30
  14
  
    

  		





  
  15
  
    
	&.list-view {


  		





  
  16
  
    
		.items-list {


  		





  
  17
  
    
			h4, .img-wrap {


  		





  
  18
  
    
				height: $list-icon-height;


  		





  
  19
  
    
				line-height: $list-icon-height;


  		





  31
  20
  
    
			}


  		





  32
  21
  
    
		}


  		





  33
  22
  
    
	}


  		












Also available in:
  Unified diff