rooty/OwncloudBookmarksOfficial
1
0
Fork 0
mirror of https://github.com/owncloud/bookmarks.git synced 2025-02-17 14:54:33 +01:00
Code Issues Releases Activity

Rework Slide panel style... much smoother now

Browse Source
This commit is contained in:
Brice Maron 2012-08-09 22:03:56 +00:00
parent 811a863ef7
commit efed5b1979
3 changed files with 29 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
css/bookmarks.css
View File

@ -15,22 +15,21 @@
top: 3.5em !important;
}
.centercontent {
position:absolute;
left:0;
height:100%;
width: 15px;
background-color: #D5D5D5;
margin-bottom: 1em;
text-align: right;
}
.centercontent .left_img , .centercontent .right_img {
margin-top: 20em;
.centercontent span {
border: 1px solid lightgray;
border-right:0;
border-radius: 0.5em 0em 0em 0.5em;
/* margin-right: 10px; */
padding: 3px;
}
.centercontent .right_img {
display:none;
}
#controls {
/* padding-left:20em; */
}
.bookmarks_headline {
font-size: large;
font-weight: bold;
@ -47,7 +46,7 @@
overflow: auto;
position: fixed;
top: 6.5em;
margin-left: 15px;
/* margin-left: 15px; */
}

29
js/bookmarks.js
View File

@ -46,27 +46,22 @@ function clickSideBar() {
}
function toggleSideBar(){
var left_visible = $('#leftcontent').is(':visible');;
if(!left_visible) {
//$('#rightcontent').css('left','32.5em');
$('#rightcontent').animate({'left':'32.5em'},{duration: 500});
var left_pan_visible = $('.right_img').is(':visible');
anim_duration = 1000;
if( left_pan_visible) { // then show the left panel
$('#rightcontent').animate({'left':'32.5em'},{duration: anim_duration, queue: false });
$('.bookmarks_list').animate({'width': '-=15em'},{duration: anim_duration, queue: false });
$('#leftcontent').animate({'margin-left':'0', 'opacity': 1},{duration: anim_duration, queue: false, complete: function() { $(window).trigger('resize'); }});
$('.right_img').hide();
$('.left_img').show();
} else { // hide the left panel
$('#rightcontent').animate({'left':'15.5em'},{duration: anim_duration, queue: false });
$('.bookmarks_list').animate({'width': '+=15em'},{duration: anim_duration, queue: false });
$('#leftcontent').animate({'margin-left':'-17em', 'opacity': 0.5 },{duration: anim_duration, queue: false, complete: function() { $(window).trigger('resize'); } });
$('.left_img').hide();
$('.right_img').show();
}
$('#leftcontent').animate({
width: ['toggle','swing'],
opacity: ['toggle', 'swing']
},'2000', function() {
if(! $('#leftcontent').is(':visible')) {
$('.left_img').hide();
$('.right_img').show();
}
$(window).trigger('resize');
});
if(left_visible) {
$('#rightcontent').animate({'left':'12.5em'},{duration: 1000, complete: function() { $(window).trigger('resize'); } });
}
}
function clickSwitchView(){

11
templates/list.php
View File

@ -17,6 +17,13 @@
</div>
</div>
<div id="leftcontent">
<div class="centercontent">
<!--<img class="left_img svg" src="<?php echo OCP\image_path('bookmarks','triangle-w.svg'); ?>">
<img class="right_img svg" src="<?php echo OCP\image_path('bookmarks','triangle-e.svg'); ?>">-->
<span class="left_img"> <?php echo $l->t('Hide')?> &lt;&lt;</span>
<span class="right_img"> <?php echo $l->t('Show')?> &gt;&gt;</span>
</div>
<p id="tag_filter">
<input type="text" placeholder="Filter By tag" value="<?php echo $_['req_tag']; ?>"/>
</p>
@ -45,10 +52,6 @@
</div>
<div id="rightcontent" class="rightcontent">
<div class="centercontent">
<img class="left_img svg" src="<?php echo OCP\image_path('bookmarks','triangle-w.svg'); ?>">
<img class="right_img svg" src="<?php echo OCP\image_path('bookmarks','triangle-e.svg'); ?>"></div>
<div class="bookmarks_list"></div>
<div id="firstrun" style="display: none;">
<?php