aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authormarijus <mario@mariovavti.com>2014-05-20 17:33:06 +0200
committermarijus <mario@mariovavti.com>2014-05-20 17:33:06 +0200
commitc530a7a9366b1c89a63fc1782ec620db992efc3b (patch)
tree3fc623a4c7d675e99f80c00a99d919ee8c117c0b
parent6d01707a724504a34b8e84e87c6601a046de9739 (diff)
downloadvolse-hubzilla-c530a7a9366b1c89a63fc1782ec620db992efc3b.tar.gz
volse-hubzilla-c530a7a9366b1c89a63fc1782ec620db992efc3b.tar.bz2
volse-hubzilla-c530a7a9366b1c89a63fc1782ec620db992efc3b.zip
some work on comment_item.tpl
-rw-r--r--view/css/conversation.css59
-rw-r--r--view/js/main.js30
-rw-r--r--view/theme/redbasic/css/style.css52
-rw-r--r--view/theme/redbasic/js/redbasic.js20
-rwxr-xr-xview/tpl/comment_item.tpl88
-rwxr-xr-xview/tpl/conv_item.tpl4
6 files changed, 77 insertions, 176 deletions
diff --git a/view/css/conversation.css b/view/css/conversation.css
index 4e7b59f80..3fc82154b 100644
--- a/view/css/conversation.css
+++ b/view/css/conversation.css
@@ -199,60 +199,21 @@
/* comment_item */
-.comment-wwedit-wrapper.threaded > .comment-edit-form > .comment-edit-photo {
- width: 40px;
-}
-
-.comment-wwedit-wrapper.threaded > .comment-edit-form > .comment-edit-text-empty {
- height: 1.5em;
-}
-
-.comment-wwedit-wrapper.threaded > .comment-edit-form > .comment-edit-submit-wrapper > .comment-edit-submit {
- margin-left: 50px;
-}
-
-.comment-edit-photo {
- margin: 10px 10px 10px 7px;
- float: left;
-}
-
-[class^="comment-edit-bb"] {
- display: none;
- margin: 0px 0 -5px 0px;
- padding: 0px;
- width: 75%;
- min-width: 170px
-}
-
-[class^="comment-edit-bb"] > li {
- display: inline-block;
- margin: 10px 10px 0 0;
- visibility: none;
-}
-
-[class^="comment-edit-bb-end"] {
- clear: both;
-}
-
.comment-edit-text-empty, .comment-edit-text-full {
float: left;
- margin-top: 10px;
- padding: 3px 1px 1px 3px;
+ width: 100%;
padding: 8px;
}
.comment-edit-text-empty {
height: 2.8em;
- width: 30%;
- min-width: 170px;
overflow: auto;
- margin-bottom: 10px;
+ resize: none;
+
}
.comment-edit-text-full {
height: 150px;
- width: 50%;
- min-width: 170px;
overflow: auto;
}
@@ -280,14 +241,12 @@
filter:alpha(opacity=100);
}
-.comment-edit-text-end {
- clear: both;
-}
-
-.comment-edit-submit {
- margin: 10px 0px 10px 52px;
+.comment-tools {
+ display: none;
+ margin-top: 7px;
}
-.comment-preview-icon {
- margin-left: 15px;
+.comment-edit-preview {
+ display: none;
+ margin-top: 7px;
}
diff --git a/view/js/main.js b/view/js/main.js
index fa32df424..a4cbed064 100644
--- a/view/js/main.js
+++ b/view/js/main.js
@@ -6,21 +6,25 @@
$("#comment-edit-text-" + id).addClass("comment-edit-text-full");
$("#comment-edit-text-" + id).removeClass("comment-edit-text-empty");
$("#mod-cmnt-wrap-" + id).show();
- openMenu("comment-edit-submit-wrapper-" + id);
+ openMenu("comment-tools-" + id);
return true;
}
return false;
}
+
function commentClose(obj,id) {
- if(obj.value == '') {
- obj.value = aStr['comment'];
- $("#comment-edit-text-" + id).removeClass("comment-edit-text-full");
- $("#comment-edit-text-" + id).addClass("comment-edit-text-empty");
- $("#mod-cmnt-wrap-" + id).hide();
- closeMenu("comment-edit-submit-wrapper-" + id);
- return true;
- }
- return false;
+ $(document).on('click', function() {
+ if(obj.value == '') {
+ obj.value = aStr['comment'];
+ $("#comment-edit-text-" + id).removeClass("comment-edit-text-full");
+ $("#comment-edit-text-" + id).addClass("comment-edit-text-empty");
+ $("#mod-cmnt-wrap-" + id).hide();
+ closeMenu("comment-tools-" + id);
+ return true;
+ }
+ return false;
+ });
+
}
function showHideCommentBox(id) {
@@ -32,14 +36,13 @@
}
}
-
function commentInsert(obj,id) {
var tmpStr = $("#comment-edit-text-" + id).val();
if(tmpStr == '$comment') {
tmpStr = '';
$("#comment-edit-text-" + id).addClass("comment-edit-text-full");
$("#comment-edit-text-" + id).removeClass("comment-edit-text-empty");
- openMenu("comment-edit-submit-wrapper-" + id);
+ openMenu("comment-tools-" + id);
}
var ins = $(obj).html();
ins = ins.replace('&lt;','<');
@@ -62,7 +65,7 @@
tmpStr = "";
$("#comment-edit-text-" + id).addClass("comment-edit-text-full");
$("#comment-edit-text-" + id).removeClass("comment-edit-text-empty");
- openMenu("comment-edit-submit-wrapper-" + id);
+ openMenu("comment-tools-" + id);
$("#comment-edit-text-" + id).val(tmpStr);
}
@@ -748,6 +751,7 @@ function updateConvItems(mode,data) {
$("#comment-edit-form-" + id).serialize(),
function(data) {
if(data.success) {
+ $("#comment-edit-preview-" + id).hide();
$("#comment-edit-wrapper-" + id).hide();
$("#comment-edit-text-" + id).val('');
var tarea = document.getElementById("comment-edit-text-" + id);
diff --git a/view/theme/redbasic/css/style.css b/view/theme/redbasic/css/style.css
index f7df3bf52..f773264cc 100644
--- a/view/theme/redbasic/css/style.css
+++ b/view/theme/redbasic/css/style.css
@@ -1884,7 +1884,6 @@ img.mail-list-sender-photo {
.wall-item-content-wrapper {
background-color: $item_colour;
- opacity: $item_opacity;
padding: 10px;
}
@@ -1893,9 +1892,6 @@ img.mail-list-sender-photo {
border-top-left-radius: $radiuspx;
}
-.wall-item-content-wrapper:hover {
- z-index:99;
-}
.comment .wall-item-body {
padding-left: $comment_padding;
}
@@ -1905,35 +1901,23 @@ img.mail-list-sender-photo {
background-color: $comment_item_colour;
border-left: $comment_border_left $comment_border_colour;
border-right: $comment_border_right $comment_border_colour;
-
border-bottom: $comment_border_bottom $comment_border_colour;
border-radius: 0px;
padding: 7px 10px 7px 7px;
}
-/*
-.thread-wrapper.toplevel_item{
- border-bottom: $comment_border_bottom $comment_border_colour;
- border-right: $comment_border_right $item_colour;
- border-left: $comment_border_left $item_colour;
-
- border-top-right-radius: $radiuspx;
- border-top-left-radius: $radiuspx;
- border-bottom-right-radius: $radiuspx;
- border-bottom-left-radius: $radiuspx;
-}
- */
.wall-item-comment-wrapper {
- background-color: $comment_item_colour;
- /* border-top: $comment_border_top $item_colour; */
- border-right: $comment_border_right $item_colour;
- border-left: $comment_border_left $item_colour;
- border-bottom: $comment_border_bottom $item_colour;
+ padding: 7px 10px;
+ background-color: $item_colour;
border-radius: 0px;
border-bottom-right-radius: $radiuspx;
border-bottom-left-radius: $radiuspx;
+ margin-top: 3px;
}
+.wall-item-comment-wrapper-wc {
+ margin-top: 0px;
+}
.wall-item-like,
.wall-item-dislike {
@@ -1981,37 +1965,15 @@ img.mail-list-sender-photo {
color: $toolicon_colour;
}
-.item-tool:hover {
- /*color: $toolicon_activecolour;*/
-}
-
.like-rotator {
color: $toolicon_colour;
}
-.my-comment-photo {
- border-radius: $radiuspx;
- -moz-border-radius: $radiuspx;
- box-shadow: $shadowpx $shadowpx $shadowpx 0 #444444;
-}
-
-.comment-edit-photo img {
- width: $reply_photo;
-}
-
-[class^="comment-edit-bb"] {
- list-style: none;
-}
-
.comment-icon {
- font-size: 1.2em;
+ font-size: 0.8em;
color: $toolicon_colour;
}
-.comment-icon:hover {
- color: $toolicon_activecolour;
-}
-
.comment-edit-text-empty,
.comment-edit-text-full {
border: 1px solid #ccc;
diff --git a/view/theme/redbasic/js/redbasic.js b/view/theme/redbasic/js/redbasic.js
index 20902fe1a..d981b0c11 100644
--- a/view/theme/redbasic/js/redbasic.js
+++ b/view/theme/redbasic/js/redbasic.js
@@ -1,23 +1,3 @@
-function cmtBbOpen(comment, id) {
- if($(comment).hasClass('comment-edit-text-full')) {
- $(".comment-edit-bb-" + id).show();
- return true;
- }
- return false;
-}
-
-function cmtBbClose(comment, id) {
-// if($(comment).hasClass('comment-edit-text-empty')) {
-// $(".comment-edit-bb-" + id).hide();
-// return true;
-// }
- return false;
-}
-
-//document.jotpermslock = 'icon-lock';
-//document.jotpermsunlock = 'icon-unlock';
-
-
$(document).ready(function() {
$('#expand-aside').click(function() {
diff --git a/view/tpl/comment_item.tpl b/view/tpl/comment_item.tpl
index 1ea619774..598c0d58e 100755
--- a/view/tpl/comment_item.tpl
+++ b/view/tpl/comment_item.tpl
@@ -10,44 +10,7 @@
<input type="hidden" name="return" value="{{$return_path}}" />
<input type="hidden" name="jsreload" value="{{$jsreload}}" />
<input type="hidden" name="preview" id="comment-preview-inp-{{$id}}" value="0" />
-
- <div class="comment-edit-photo" id="comment-edit-photo-{{$id}}" >
- <a class="comment-edit-photo-link" href="{{$mylink}}" title="{{$mytitle}}"><img class="my-comment-photo" src="{{$myphoto}}" alt="{{$mytitle}}" title="{{$mytitle}}" /></a>
- </div>
- <div class="comment-edit-photo-end"></div>
- <ul class="comment-edit-bb-{{$id}}">
- <li><i class="icon-bold shadow comment-icon"
- style="cursor: pointer;" title="{{$edbold}}"
- onclick="insertbbcomment('{{$comment}}','b', {{$id}});"></i></li>
- <li><i class="icon-italic shadow comment-icon"
- style="cursor: pointer;" title="{{$editalic}}"
- onclick="insertbbcomment('{{$comment}}','i', {{$id}});"></i></li>
- <li><i class="icon-underline shadow comment-icon"
- style="cursor: pointer;" title="{{$eduline}}"
- onclick="insertbbcomment('{{$comment}}','u', {{$id}});"></i></li>
- <li><i class="icon-quote-left shadow comment-icon"
- style="cursor: pointer;" title="{{$edquote}}"
- onclick="insertbbcomment('{{$comment}}','quote', {{$id}});"></i></li>
- <li><i class="icon-terminal shadow comment-icon"
- style="cursor: pointer;" title="{{$edcode}}"
- onclick="insertbbcomment('{{$comment}}','code', {{$id}});"></i></li>
- <li><i class="icon-camera shadow comment-icon"
- style="cursor: pointer;" title="{{$edimg}}"
- onclick="insertbbcomment('{{$comment}}','img', {{$id}});"></i></li>
- <li><i class="icon-link shadow comment-icon"
- style="cursor: pointer;" title="{{$edurl}}"
- onclick="insertbbcomment('{{$comment}}','url', {{$id}});"></i></li>
- <li><i class="icon-facetime-video shadow comment-icon"
- style="cursor: pointer;" title="{{$edvideo}}"
- onclick="insertbbcomment('{{$comment}}','video', {{$id}});"></i></li>
- {{if $feature_encrypt}}
- <li><i class="icon-key shadow comment-icon"
- style="cursor: pointer;" title="{{$encrypt}}"
- onclick="red_encrypt('{{$cipher}}','#comment-edit-text-' + '{{$id}}',''); return false;"></i></li>
- {{/if}}
- </ul>
- <div class="comment-edit-bb-end"></div>
- <textarea id="comment-edit-text-{{$id}}" class="comment-edit-text-empty" name="body" onFocus="commentOpen(this,{{$id}});cmtBbOpen(this, {{$id}});" onBlur="commentClose(this,{{$id}});cmtBbClose(this,{{$id}});" >{{$comment}}</textarea>
+ <textarea id="comment-edit-text-{{$id}}" class="comment-edit-text-empty" name="body" onFocus="commentOpen(this,{{$id}});" onBlur="commentClose(this,{{$id}});" >{{$comment}}</textarea>
{{if $qcomment}}
<select id="qcomment-select-{{$id}}" name="qcomment-{{$id}}" class="qcomment" onchange="qCommentInsert(this,{{$id}});" >
<option value=""></option>
@@ -56,17 +19,48 @@
{{/foreach}}
</select>
{{/if}}
-
- <div class="comment-edit-text-end"></div>
- <div class="comment-edit-submit-wrapper" id="comment-edit-submit-wrapper-{{$id}}" style="display: none;" >
- <input type="submit" onclick="post_comment({{$id}}); return false;" id="comment-edit-submit-{{$id}}" class="comment-edit-submit" name="submit" value="{{$submit}}" />
+ <div class="clear"></div>
+ <div id="comment-tools-{{$id}}" class="comment-tools">
+ <div id="comment-edit-bb-{{$id}}" class="btn-group pull-left">
+ <button class="btn btn-default btn-xs" title="{{$edbold}}" onclick="insertbbcomment('{{$comment}}','b', {{$id}}); return false;">
+ <i class="icon-bold comment-icon"></i>
+ </button>
+ <button class="btn btn-default btn-xs" title="{{$editalic}}" onclick="insertbbcomment('{{$comment}}','i', {{$id}}); return false;">
+ <i class="icon-italic comment-icon"></i>
+ </button>
+ <button class="btn btn-default btn-xs" title="{{$eduline}}" onclick="insertbbcomment('{{$comment}}','u', {{$id}}); return false;">
+ <i class="icon-underline comment-icon"></i>
+ </button>
+ <button class="btn btn-default btn-xs" title="{{$edquote}}" onclick="insertbbcomment('{{$comment}}','quote', {{$id}}); return false;">
+ <i class="icon-quote-left comment-icon"></i>
+ </button>
+ <button class="btn btn-default btn-xs" title="{{$edcode}}" onclick="insertbbcomment('{{$comment}}','code', {{$id}}); return false;">
+ <i class="icon-terminal comment-icon"></i>
+ </button>
+ <button class="btn btn-default btn-xs" title="{{$comment}}" onclick="insertbbcomment('{{$comment}}','img', {{$id}}); return false;">
+ <i class="icon-camera comment-icon"></i>
+ </button>
+ <button class="btn btn-default btn-xs" title="{{$edurl}}" onclick="insertbbcomment('{{$comment}}','url', {{$id}}); return false;">
+ <i class="icon-link comment-icon"></i>
+ </button>
+ <button class="btn btn-default btn-xs" title="{{$edvideo}}" onclick="insertbbcomment('{{$comment}}','video', {{$id}}); return false;">
+ <i class="icon-facetime-video comment-icon"></i>
+ </button>
+ {{if $feature_encrypt}}
+ <button class="btn btn-default btn-xs" title="{{$encrypt}}" onclick="red_encrypt('{{$cipher}}','#comment-edit-text-' + '{{$id}}',''); return false;">
+ <i class="icon-key comment-icon"></i>
+ </button>
+ {{/if}}
+ </div>
+ <div class="btn-group pull-right" id="comment-edit-submit-wrapper-{{$id}}">
{{if $preview}}
- <span onclick="preview_comment({{$id}});" id="comment-edit-preview-link-{{$id}}" class="fakelink"><i class="icon-eye-open comment-icon comment-preview-icon" title="{{$preview}}"></i></span>
- <div id="comment-edit-preview-{{$id}}" class="comment-edit-preview" style="display:none;"></div>
+ <button id="comment-edit-submit-{{$id}}" class="btn btn-default btn-xs btn-preview" onclick="preview_comment({{$id}}); return false;" title="{{$preview}}">
+ <i class="icon-eye-open comment-icon" ></i>
+ </button>
{{/if}}
+ <button id="comment-edit-submit-{{$id}}" class="btn btn-primary btn-xs" type="submit" name="submit" onclick="post_comment({{$id}}); return false;">{{$submit}}</button>
+ </div>
</div>
-
- <div class="comment-edit-end"></div>
+ <div class="clear"></div>
</form>
-
</div>
diff --git a/view/tpl/conv_item.tpl b/view/tpl/conv_item.tpl
index ee10b6633..fe54ac377 100755
--- a/view/tpl/conv_item.tpl
+++ b/view/tpl/conv_item.tpl
@@ -174,9 +174,11 @@
{{/foreach}}
{{/if}}
{{if $item.comment}}
- <div class="wall-item-comment-wrapper" >
+ <div class="wall-item-comment-wrapper{{if $item.children}} wall-item-comment-wrapper-wc{{/if}}" >
{{$item.comment}}
</div>
+ <div id="comment-edit-preview-{{$item.id}}" class="comment-edit-preview"></div>
+ <div class="clear"></div>
{{/if}}
</div>
{{if $item.comment_lastcollapsed}}