Adapt classic skin to new calendars listing

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 {
+#calendars .treelist li {
+	margin: 0;
+	padding: 0;
+	position: relative;
+}
+
+#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;
-#calendarslist li span.handle {
+	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 {
+#calendars .treelist li a.subscribed {
-	margin-right: 5px;
+	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 {
+#calendars .treelist div:hover > a.subscribed {
+	background-position: 0 -126px;
+}
+
+#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;
+}
+
+#calendars .treelist ul li div.treetoggle {
+	left: 17px !important;
+}
+
+#calendars .treelist ul ul li div.treetoggle {
+	left: 33px !important;
+}
+
+#calendars .treelist.flat li input {
+	left: 4px;
+}
+
+#calendars .treelist ul li div.folder,
+#calendars .treelist ul li div.calendar {
+	margin-left: 16px;
+}
+
+#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;
-	border-bottom: 1px solid #bbb;
 }
 
-#calendarslist li.selected span {
+#calendars .treelist li.selected > span.calname {
 	font-weight: bold;
 }
 
-#calendarslist li.readonly span.handle {
+#calendars .treelist div.readonly span.calname {
-    background-position: 0 -20px;
+	background-position: right -20px;
 }
 
-#calendarslist li.other span.handle {
+#calendars .treelist li.user > div > span.calname {
-    background-position: 0 -38px;
+	background-position: right -38px;
-}
-
-#calendarslist li.other.readonly span.handle {
-    background-position: 0 -56px;
-}
-
-#calendarslist li.shared span.handle {
-    background-position: 0 -74px;
-}
-
-#calendarslist li.shared.readonly span.handle {
-    background-position: 0 -92px;
 }
 
 #calendarslist li.virtual span.calname {
 	color: #666;
 }
 
+#calendars .searchresults .boxtitle {
+	border-top: 1px solid #aaa;
+	margin-bottom: 0;
+}
+
 #calfeedurl,
 #caldavurl {
 	width: 98%;

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=" " />