Branch 'dev/new-foldernav' - 2 commits - plugins/calendar
Thomas Brüderli
bruederli at kolabsys.com
Tue May 20 12:04:38 CEST 2014
plugins/calendar/skins/classic/calendar.css | 141 ++++++++++++++---
plugins/calendar/skins/classic/images/calendars.gif |binary
plugins/calendar/skins/classic/images/calendars.png |binary
plugins/calendar/skins/classic/templates/calendar.html | 9 -
plugins/calendar/skins/larry/calendar.css | 25 +++
plugins/calendar/skins/larry/templates/calendar.html | 25 ++-
6 files changed, 176 insertions(+), 24 deletions(-)
New commits:
commit af416196d989560b7aa5086276e7fa034225a627
Author: Thomas Bruederli <bruederli at kolabsys.com>
Date: Tue May 20 12:04:22 2014 +0200
Hide calendars search box and toggle on click of the search icon
diff --git a/plugins/calendar/skins/larry/calendar.css b/plugins/calendar/skins/larry/calendar.css
index 5ef63f7..021f4fb 100644
--- a/plugins/calendar/skins/larry/calendar.css
+++ b/plugins/calendar/skins/larry/calendar.css
@@ -164,7 +164,32 @@ pre {
right: 0;
}
+#calendars .boxtitle {
+ position: relative;
+}
+
+#calendars .boxtitle a.iconbutton.search {
+ position: absolute;
+ top: 8px;
+ right: 8px;
+ width: 16px;
+ cursor: pointer;
+ background-position: -2px -317px;
+}
+
+#calendars .listsearchbox {
+ display: none;
+}
+
+#calendars .listsearchbox.expanded {
+ display: block;
+}
+
#calendars .scroller {
+ top: 34px;
+}
+
+#calendars .listsearchbox.expanded + .scroller {
top: 68px;
}
diff --git a/plugins/calendar/skins/larry/templates/calendar.html b/plugins/calendar/skins/larry/templates/calendar.html
index 7f9f0af..2a76798 100644
--- a/plugins/calendar/skins/larry/templates/calendar.html
+++ b/plugins/calendar/skins/larry/templates/calendar.html
@@ -22,7 +22,9 @@
<div id="datepicker" class="uibox"></div>
<div id="calendars" class="uibox listbox" style="visibility:hidden">
- <h2 class="boxtitle"><roundcube:label name="calendar.calendars" /></h2>
+ <h2 class="boxtitle"><roundcube:label name="calendar.calendars" />
+ <a class="iconbutton search" title="<roundcube:label name='calendar.findcalendars' />"></a>
+ </h2>
<div class="listsearchbox">
<div class="searchbox">
<input type="text" name="q" id="calendarlistsearch" placeholder="<roundcube:label name='calendar.findcalendars' />" />
@@ -253,6 +255,27 @@ $(document).ready(function(e){
.data('offset', $('#calendarsidebartoggle').position().left)
.data('sidebarwidth', $('#calendarsidebar').width() + $('#calendarsidebar').position().left);
+ // animation to unfold list search box
+ $('#calendars .boxtitle a.search').click(function(e){
+ var box = $('#calendars .listsearchbox'),
+ dir = box.is(':visible') ? -1 : 1;
+
+ box.slideToggle({
+ duration: 160,
+ progress: function(animation, progress) {
+ if (dir < 0) progress = 1 - progress;
+ $('#calendars .scroller').css('top', (34 + 34 * progress) + 'px');
+ },
+ complete: function() {
+ box.toggleClass('expanded');
+ if (box.is(':visible')) {
+ box.find('input[type=text]').focus();
+ }
+ // TODO: save state in localStorage
+ }
+ });
+ });
+
new rcube_splitter({ id:'calresourceviewsplitter', p1:'#resource-dialog-left', p2:'#resource-dialog-right',
orientation:'v', relative:true, start:380, min:220, size:10, offset:-3 }).init();
});
commit d569bb86440092d817799a09bdcd0de1dd657bbb
Author: Thomas Bruederli <bruederli at kolabsys.com>
Date: Tue May 20 12:03:24 2014 +0200
Adapt classic skin to new calendars listing
diff --git a/plugins/calendar/skins/classic/calendar.css b/plugins/calendar/skins/classic/calendar.css
index 40350fa..0f3ba5f 100644
--- a/plugins/calendar/skins/classic/calendar.css
+++ b/plugins/calendar/skins/classic/calendar.css
@@ -105,6 +105,14 @@ pre {
overflow: hidden;
}
+#calendars .boxlistcontent {
+ top: 43px;
+}
+
+#calendars .listsearchbox {
+ padding: 2px 4px;
+}
+
#calendarslist {
list-style: none;
margin: 0;
@@ -122,54 +130,143 @@ pre {
cursor: default;
}
-#calendarslist li label {
- display: block;
+#calendars .treelist li {
+ margin: 0;
+ padding: 0;
+ position: relative;
}
-#calendarslist li span.handle {
+#calendars .treelist ul li:last-child {
+ border-bottom: 0;
+}
+
+#calendars .treelist li div.folder,
+#calendars .treelist li div.calendar {
+ position: relative;
+ height: 22px;
+}
+
+#calendars .treelist li span.calname {
+ display: block;
+ padding: 0px 30px 2px 2px;
+ position: absolute;
+ top: 4px;
+ left: 38px;
+ right: 40px;
cursor: default;
- background: url(images/calendars.png) 0 -2px no-repeat;
+ background: url(images/calendars.png) right 20px no-repeat;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+#calendars .treelist li div.virtual > span.calname {
+ color: #aaa;
+ left: 20px;
+}
+
+#calendars .treelist.flat li span.calname {
+ left: 24px;
+ right: 22px;
+}
+
+#calendars .treelist li span.handle {
display: inline-block;
- width: 20px;
+ position: absolute;
+ top: 5px;
+ right: 6px;
+ padding: 0;
+ width: 12px;
+ height: 12px;
+ border-radius: 3px;
+ font-size: 0.8em;
}
-#calendarslist li input {
- margin-right: 5px;
+#calendars .treelist li a.subscribed {
+ display: inline-block;
+ position: absolute;
+ top: 2px;
+ right: 22px;
+ height: 16px;
+ width: 16px;
+ padding: 0;
+ background: url(images/calendars.png) -100px 0 no-repeat;
+ overflow: hidden;
+ text-indent: -5000px;
+ cursor: pointer;
}
-#calendarslist li.selected {
- background-color: #ccc;
- border-bottom: 1px solid #bbb;
+#calendars .treelist div:hover > a.subscribed {
+ background-position: 0 -126px;
}
-#calendarslist li.selected span {
- font-weight: bold;
+#calendars .treelist div.subscribed a.subscribed {
+ background-position: 0 -144px;
+}
+
+#calendars .treelist li input {
+ position: absolute;
+ top: 1px;
+ left: 18px;
+}
+
+#calendars .treelist li div.treetoggle {
+ top: -1px;
+ left: 1px !important;
}
-#calendarslist li.readonly span.handle {
- background-position: 0 -20px;
+#calendars .treelist ul li div.treetoggle {
+ left: 17px !important;
}
-#calendarslist li.other span.handle {
- background-position: 0 -38px;
+#calendars .treelist ul ul li div.treetoggle {
+ left: 33px !important;
}
-#calendarslist li.other.readonly span.handle {
- background-position: 0 -56px;
+#calendars .treelist.flat li input {
+ left: 4px;
}
-#calendarslist li.shared span.handle {
- background-position: 0 -74px;
+#calendars .treelist ul li div.folder,
+#calendars .treelist ul li div.calendar {
+ margin-left: 16px;
}
-#calendarslist li.shared.readonly span.handle {
- background-position: 0 -92px;
+#calendars .treelist ul ul li div.folder,
+#calendars .treelist ul ul li div.calendar {
+ margin-left: 32px;
+}
+
+#calendars .treelist ul ul ul li div.folder,
+#calendars .treelist ul ul ul li div.calendar {
+ margin-left: 48px;
+}
+
+#calendars .treelist li.selected {
+ background-color: #ccc;
+}
+
+#calendars .treelist li.selected > span.calname {
+ font-weight: bold;
+}
+
+#calendars .treelist div.readonly span.calname {
+ background-position: right -20px;
+}
+
+#calendars .treelist li.user > div > span.calname {
+ background-position: right -38px;
}
#calendarslist li.virtual span.calname {
color: #666;
}
+#calendars .searchresults .boxtitle {
+ border-top: 1px solid #aaa;
+ margin-bottom: 0;
+}
+
#calfeedurl,
#caldavurl {
width: 98%;
diff --git a/plugins/calendar/skins/classic/images/calendars.gif b/plugins/calendar/skins/classic/images/calendars.gif
index cf12ebd..c560e74 100644
Binary files a/plugins/calendar/skins/classic/images/calendars.gif and b/plugins/calendar/skins/classic/images/calendars.gif differ
diff --git a/plugins/calendar/skins/classic/images/calendars.png b/plugins/calendar/skins/classic/images/calendars.png
index feb3945..e411c41 100644
Binary files a/plugins/calendar/skins/classic/images/calendars.png and b/plugins/calendar/skins/classic/images/calendars.png differ
diff --git a/plugins/calendar/skins/classic/templates/calendar.html b/plugins/calendar/skins/classic/templates/calendar.html
index fa93afc..219fd83 100644
--- a/plugins/calendar/skins/classic/templates/calendar.html
+++ b/plugins/calendar/skins/classic/templates/calendar.html
@@ -24,8 +24,15 @@
<div id="datepicker"></div>
<div id="calendars" style="visibility:hidden">
<div class="boxtitle"><roundcube:label name="calendar.calendars" /></div>
+ <div class="listsearchbox">
+ <div class="searchbox">
+ <input type="text" name="q" id="calendarlistsearch" placeholder="<roundcube:label name='calendar.findcalendars' />" />
+ <a class="iconbutton searchicon"></a>
+ <roundcube:button command="reset-listsearch" id="calendarlistsearch-reset" class="reset searchreset" title="resetsearch" content="x" />
+ </div>
+ </div>
<div class="boxlistcontent">
- <roundcube:object name="plugin.calendar_list" id="calendarslist" />
+ <roundcube:object name="plugin.calendar_list" id="calendarslist" class="treelist" />
</div>
<div class="boxfooter">
<roundcube:button command="calendar-create" type="link" title="calendar.createcalendar" class="buttonPas addgroup" classAct="button addgroup" content=" " />
More information about the commits
mailing list