Mostly feed list html cleanup, also restructured news.css

This commit is contained in:
Gregor Tätzner 2012-08-09 09:40:25 +02:00
Родитель 81e38e05b6
Коммит 4856c8e360
4 изменённых файлов: 62 добавлений и 52 удалений

Просмотреть файл

@ -1,38 +1,76 @@
.news_input { float:left; font-size:12px; padding:4px 2px; border:solid 1px #aacfe4; width:200px; } .news_input { float:left; font-size:12px; padding:4px 2px; border:solid 1px #aacfe4; width:200px; }
.svg { border: inherit; background: inherit; } .svg { border: inherit; background: inherit; }
div.add_parentfolder { position: relative; }
#file_upload_start { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter:alpha(opacity=0); opacity:0; z-index:1001; width:0; height:0;}
/* feed/folder list */
#leftcontent { top: 3.5em !important; padding: 0; margin: 0; box-shadow: -3px 0px 7px rgb(0, 0, 0); }
#leftcontent { top: 3.5em !important; padding: 0; margin: 0; }
#rightcontent { top: 3.5em !important; padding-top: 5px; margin-left: 5px; border-left: 1px solid #ccc; }
#feeds { background: #fff; width: 19.7em; left: 12.5em; top: 3.7em; bottom:3em; position: fixed; overflow: auto; padding: 0; margin: 0 0 0 0.3em;} #feeds { background: #fff; width: 19.7em; left: 12.5em; top: 3.7em; bottom:3em; position: fixed; overflow: auto; padding: 0; margin: 0 0 0 0.3em;}
/* #feeds a { height: 23px; display: block; margin: 0 0 0 0; padding: 0 0 0 25px; } */
#bottomcontrols { padding: 0; bottom:0px; overflow:visible; height:2.8em; width: 20em; margin:0; background:#eee; border-top:1px solid #ccc; position:fixed; -moz-box-shadow: 0 -3px 3px -3px #000; -webkit-box-shadow: 0 -3px 3px -3px #000; box-shadow: 0 -3px 3px -3px #000;} li { padding: 0px !important; }
li.feed { margin-left: 16px !important; text-align: right; border-radius: 5px; padding-left: 5px !important; background-color: rgb(255,255,255) !important; }
li.feed a { padding: 0 0 0 20px !important; overflow: hidden; text-overflow: ellipsis; text-align: left; width: 65%; }
li#selected_feed { background-color: #FF9933 !important; }
li.feed:hover { background-color: rgb(221, 221, 221) !important; }
li.collapsable_container { background-color: rgb(255,255,255) !important; margin-left: 16px; }
li.collapsable_container:hover { color: rgb(0, 0, 0) !important; background-color: rgb(255,255,255) !important; }
li.collapsable_container > ul { margin-bottom: 0.1em; }
div.collapsable { position: relative; border-radius: 5px; }
.collapsable_trigger { border: none ; margin: 0 0 0 5px; padding: 0; border-radius: 0; box-shadow: none; vertical-align: middle !important; background: url('%webroot%/core/img/places/folder.svg') no-repeat; height:16px; width:16px; }
.collapsable_title { padding-left: 0.2em; text-transform: uppercase; }
div.collapsable:hover { background-color: rgb(221, 221, 221); }
#feeds_delete { position: absolute; right: 0px; background: url('%webroot%/core/img/actions/delete.svg') no-repeat center; display: none; } #feeds_delete { position: absolute; right: 0px; background: url('%webroot%/core/img/actions/delete.svg') no-repeat center; display: none; }
#feeds_edit { position: absolute; right: 1.6em; background: url('%webroot%/core/img/actions/rename.svg') no-repeat center; display: none; } #feeds_edit { position: absolute; right: 1.6em; background: url('%webroot%/core/img/actions/rename.svg') no-repeat center; display: none; }
#dropdownBtn { width: 9em; padding-left: 0; padding-right:20px; background: url('%webroot%/core/img/actions/triangle-s.svg') no-repeat right center; }
#addfolder { background: url('%webroot%/core/img/places/folder.svg') no-repeat left center; padding-left: 20px !important; }
#addfeed { background: url('%appswebroot%/news/img/rss.svg') no-repeat left center; padding-left: 20px !important; }
#unreaditemcounter.nonzero { position: relative; background: #5E5E5E; border-radius: 5px; padding: 0 5px; color: white; text-align: center; margin: 0 0.3em 0 0.3em;} #unreaditemcounter.nonzero { position: relative; background: #5E5E5E; border-radius: 5px; padding: 0 5px; color: white; text-align: center; margin: 0 0.3em 0 0.3em;}
#unreaditemcounter.zero { position: relative; margin: 0 0.3em 0 0; } #unreaditemcounter.zero { position: relative; margin: 0 0.3em 0 0; }
/* feed controls */
#addfolder { background: url('%webroot%/core/img/places/folder.svg') no-repeat left center; padding-left: 20px !important; }
#addfeed { background: url('%appswebroot%/news/img/rss.svg') no-repeat left center; padding-left: 20px !important; }
/* #feeds a { height: 23px; display: block; margin: 0 0 0 0; padding: 0 0 0 25px; } */
#bottomcontrols { padding: 0; bottom:0px; overflow:visible; height:2.8em; width: 20em; margin:0; background:#eee; border-top:1px solid #ccc; position:fixed; -moz-box-shadow: 0 -3px 3px -3px #000; -webkit-box-shadow: 0 -3px 3px -3px #000; box-shadow: 0 -3px 3px -3px #000;}
ul.controls li { float: left; } ul.controls li { float: left; }
/* item view */
#rightcontent { top: 3.5em !important; padding: 0 0 0 5px; }
.title_read + div.body { border-bottom:2px solid #5E5E5E !important; } .title_read + div.body { border-bottom:2px solid #5E5E5E !important; }
.accordion .title_unread, .accordion .title_read { .accordion .title_unread, .accordion .title_read {
padding-left: 10px; padding-left: 10px;
font-size: 12px; font-size: 12px;
border-bottom:1px solid #5E5E5E; border-bottom:1px solid #5E5E5E;
border-top:1px solid #5E5E5E; border-top:1px solid #5E5E5E;
background: linear-gradient(to bottom, #DCDCDC 0%,#EEEEEE 80%); border-left:1px solid #5E5E5E;
background: -moz-linear-gradient(top, #DCDCDC 0%, #EEEEEE 80%); background: linear-gradient(to bottom, #DCDCDC 0%,#EEEEEE 80%);
background: -moz-linear-gradient(top, #DCDCDC 0%, #EEEEEE 80%);
box-shadow: -0px 0px 5px rgb(0, 0, 0);
} }
.accordion .title_unread { font-weight:bold;} .accordion .title_unread { font-weight:bold;}
div.rightcontentmsg { padding-left: 10px; background-color: yellow; }
/* dialog/menues */
div.dialog { overflow: visible; }
#dropdownBtn { width: 9em; padding-left: 0; padding-right:20px; background: url('%webroot%/core/img/actions/triangle-s.svg') no-repeat right center; }
ul#dropdownmenu { left: 0em; box-shadow: 0px 0px 10px rgb(0, 0, 0); }
ul#feedfoldermenu { position:fixed; margin-left: 0; bottom: 2.8em; border-left:1px solid #ccc; border-top:1px solid #ccc; border-right:1px solid #ccc; -moz-box-shadow: 0 -3px 3px -3px #000; -webkit-box-shadow: 0 -3px 3px -3px #000; box-shadow: 0 -3px 3px -3px #000;}
li.menuItem { margin-left:0.7em; margin-right:0.7em; float: none !important; text-align: left; }
ul.menu { position: absolute; z-index:100; margin-left: 0.3em; ul.menu { position: absolute; z-index:100; margin-left: 0.3em;
display: none; display: none;
background:#EEEEEE; /* default background for browsers without gradient support */ background:#EEEEEE; /* default background for browsers without gradient support */
@ -48,33 +86,7 @@ ul.menu { position: absolute; z-index:100; margin-left: 0.3em;
*/ */
} }
ul#dropdownmenu { left: 0em; box-shadow: 0px 0px 10px rgb(0, 0, 0); }
ul#feedfoldermenu { position:fixed; margin-left: 0; bottom: 2.8em; border-left:1px solid #ccc; border-top:1px solid #ccc; border-right:1px solid #ccc; -moz-box-shadow: 0 -3px 3px -3px #000; -webkit-box-shadow: 0 -3px 3px -3px #000; box-shadow: 0 -3px 3px -3px #000;}
li { padding: 0px !important; }
li.menuItem { margin-left:0.7em; margin-right:0.7em; float: none !important; text-align: left; }
li.feed { margin-left: 16px !important; text-align: right; border-radius: 5px; padding-left: 5px !important; background-color: rgb(255,255,255) !important; }
li.feed a { padding: 0 0 0 20px !important; overflow: hidden; text-overflow: ellipsis; text-align: left; width: 65%; }
li#selected_feed { background-color: #FF9933 !important; }
li.folder_list { background-color: rgb(255,255,255) !important; }
div.collapsable { position: relative; border-radius: 5px; }
.collapsable_trigger { border: none ; margin: 0 0 0 5px; padding: 0; border-radius: 0; box-shadow: none; vertical-align: middle !important; background: url('%webroot%/core/img/places/folder.svg') no-repeat; height:16px; width:16px; }
.collapsable_title { padding-left: 0.2em; text-transform: uppercase; }
ul.folders { margin-left: 16px !important; }
li.folder_list:hover { color: rgb(0, 0, 0) !important; background-color: rgb(255,255,255) !important; }
li.feed:hover { background-color: rgb(221, 221, 221) !important; }
div.collapsable:hover { background-color: rgb(221, 221, 221); }
div.add_parentfolder { position: relative; }
div.dialog { overflow: visible; }
div.rightcontentmsg { padding-left: 10px; background-color: yellow; }
#file_upload_start { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter:alpha(opacity=0); opacity:0; z-index:1001; width:0; height:0;}

Просмотреть файл

@ -62,7 +62,7 @@ News={
$.post(url, { name: displayname, parentid: folderid }, $.post(url, { name: displayname, parentid: folderid },
function(jsondata){ function(jsondata){
if(jsondata.status == 'success'){ if(jsondata.status == 'success'){
$('div[data-id="' + folderid + '"] > ul').append(jsondata.data.listfolder); $('.collapsable_container[data-id="' + folderid + '"] > ul').append(jsondata.data.listfolder);
setupFeedList(); setupFeedList();
transformCollapsableTrigger(); transformCollapsableTrigger();
//OC.dialogs.confirm(t('news', 'Do you want to add another folder?'), t('news', 'Folder added!'), function(answer) { //OC.dialogs.confirm(t('news', 'Do you want to add another folder?'), t('news', 'Folder added!'), function(answer) {
@ -86,8 +86,7 @@ News={
var shownfeedid = rightcontent.attr('data-id'); var shownfeedid = rightcontent.attr('data-id');
$.post(OC.filePath('news', 'ajax', 'deletefolder.php'),{'folderid':folderid, 'shownfeedid':shownfeedid},function(jsondata){ $.post(OC.filePath('news', 'ajax', 'deletefolder.php'),{'folderid':folderid, 'shownfeedid':shownfeedid},function(jsondata){
if(jsondata.status == 'success'){ if(jsondata.status == 'success'){
var deletedfolder = $('div.collapsable_container[data-id="' + jsondata.data.folderid + '"]'); $('.collapsable_container[data-id="' + jsondata.data.folderid + '"]').remove();
deletedfolder.parent().parent('.folders').remove();
if(jsondata.data.part_items) { if(jsondata.data.part_items) {
rightcontent.empty(); rightcontent.empty();
rightcontent.html(jsondata.data.part_items); rightcontent.html(jsondata.data.part_items);
@ -126,7 +125,7 @@ News={
dataType: "json", dataType: "json",
success: function(jsondata){ success: function(jsondata){
if(jsondata.status == 'success'){ if(jsondata.status == 'success'){
$('div[data-id="' + folderid + '"] > ul').append(jsondata.data.listfeed); $('.collapsable_container[data-id="' + folderid + '"] > ul').append(jsondata.data.listfeed);
setupFeedList(); setupFeedList();
News.Feed.load(jsondata.data.feedid); News.Feed.load(jsondata.data.feedid);
@ -312,7 +311,7 @@ function setupFeedList() {
News.Feed.load($(this).attr('data-id')); News.Feed.load($(this).attr('data-id'));
}); });
// select initial loaded feed // select initially loaded feed
var loadedfeed = $('div.rightcontent').attr('data-id'); var loadedfeed = $('div.rightcontent').attr('data-id');
$('li.feed[data-id="' + loadedfeed + '"]').attr('id', 'selected_feed'); $('li.feed[data-id="' + loadedfeed + '"]').attr('id', 'selected_feed');

Просмотреть файл

@ -28,7 +28,7 @@
//TODO:handle error in this case //TODO:handle error in this case
} }
} }
echo '</ul></div></li></ul>'; echo '</ul></li>';
} }
$allfeeds = isset($_['allfeeds']) ? $_['allfeeds'] : ''; $allfeeds = isset($_['allfeeds']) ? $_['allfeeds'] : '';

Просмотреть файл

@ -5,8 +5,7 @@ $is_root = ($folder->getId() == 0);
$l = new OC_l10n('news'); $l = new OC_l10n('news');
echo '<ul class="folders"' . (($is_root) ? 'style="margin-left: 0px !important;"' : '') .'> <li class="folder_list" >' . echo '<li class="collapsable_container" data-id="' . $folder->getId() . '"' . (($is_root) ? 'style="margin-left: 0px !important;"' : '') . '>' .
'<div class="collapsable_container" data-id="' . $folder->getId() . '">' .
'<div class="collapsable" >' . '<div class="collapsable" >' .
'<button class="collapsable_trigger" title="' . $folder->getName() . '"></button>' . '<button class="collapsable_trigger" title="' . $folder->getName() . '"></button>' .
'<span class="collapsable_title">' . '<span class="collapsable_title">' .