Commit f3c3dace authored by bbaer's avatar bbaer
Browse files

Starting on integrating Editor, mockup changes, css updates

parent 7fa35baf
......@@ -145,7 +145,9 @@ var QfqNS = QfqNS || {};
class: 'pull-left qfqLineCount',
text: lineCount
});
var cLine = line.replace(/\s/g, ' ');
var cLine = line.replace(/\s/g, ' ')
.replace('<', '&lt;')
.replace('>', '&gt;');
var htmlCodeLine = $('<div/>', {
class: 'pull-right qfqCode'
});
......@@ -188,7 +190,6 @@ var QfqNS = QfqNS || {};
* @private
*/
n.CodeCorrection.prototype._handleClick = function($hook, lineCount) {
var that = this;
var comments = {};
if (this._hasComments(lineCount)) {
comments = this._getComments(lineCount);
......@@ -198,9 +199,9 @@ var QfqNS = QfqNS || {};
comments.lineNumber = lineCount;
comments.commentController = new n.CommentController();
comments.commentController.buildContainer($hook);
comments.commentController.displayEditor();
this._setListeners(comments.commentController);
this.annotations.push(comments);
}
};
......
......@@ -27,6 +27,7 @@ var QfqNS = QfqNS || {};
this.comment = comment;
this.user = user;
this.$parent = $container;
this.$comment = {};
if (arguments.length == 3) {
this.options = { readonly: false };
} else {
......@@ -40,19 +41,24 @@ var QfqNS = QfqNS || {};
var displayElement;
displayElement = this._buildComment();
displayElement.appendTo(this.$parent);
this.$comment = displayElement;
};
n.Comment.prototype.getParent = function() {
return this.$parent;
};
n.Comment.prototype.height = function() {
return this.$comment.height();
};
n.Comment.prototype._buildComment = function(allowEdit) {
console.log(this.comment);
var $commentWrap = $('<div/>', {
class: "qfqComment"
});
var $avatar = $('<img>', {
src: "https://www.gravatar.com/avatar/6e9f325143bc5fd4ee2d3afe2df96669?s=100&d=mm",
src: this.user.avatar,
class: "qfqCommentAvatar"
});
$avatar.appendTo($commentWrap);
......@@ -61,7 +67,7 @@ var QfqNS = QfqNS || {};
});
$('<span />', {
class: "qfqCommentAuthor",
text: this.user.name
text: this.user.name + ":"
}).appendTo($topLine);
$('<span />', {
class: "qfqCommentDateTime",
......
......@@ -26,6 +26,7 @@ var QfqNS = QfqNS || {};
this.comments = [];
this.$container = {};
this.$parent = {};
this.height = "auto";
// Event Emitter is a Library qfq uses to emit custom Events.
this.eventEmitter = new EventEmitter();
};
......@@ -69,11 +70,6 @@ var QfqNS = QfqNS || {};
});
$hook.after($container);
this.$container = $container;
if (this.hasComments()) {
this.displayComments();
} else {
this.displayEditor();
}
};
n.CommentController.prototype.hasComments = function() {
......@@ -85,11 +81,7 @@ var QfqNS = QfqNS || {};
};
n.CommentController.prototype.toggle = function() {
if (this.$container.hasClass('hidden')) {
this.$container.removeClass('hidden');
} else {
this.$container.addClass('hidden');
}
this.$container.slideToggle("swing");
};
n.CommentController.prototype.getComment = function(reference) {
......@@ -105,6 +97,7 @@ var QfqNS = QfqNS || {};
var commentObject = new n.Comment(comment, user, this.$container);
commentObject.display();
this.comments.push(commentObject);
this.updateHeight();
return this.comments.length - 1;
};
......@@ -112,11 +105,13 @@ var QfqNS = QfqNS || {};
for (var i = 0; this.comments; i++) {
this.comments[i].display();
}
this.updateHeight();
};
n.CommentController.prototype.displayEditor = function() {
var $editor = $("<textarea />");
//$editor.after(this.$container);
$editor.appendTo(this.$container);
this.updateHeight();
};
n.CommentController.prototype.getContainer = function() {
......@@ -131,11 +126,17 @@ var QfqNS = QfqNS || {};
};
n.CommentController.prototype.updateHeight = function() {
//this.height = this.$container.height();
//this.$container.css("max-height", this.height);
};
n.CommentController.prototype.importComments = function(comments, users) {
for (var i=0; i < comments.length; i++) {
var user = this._searchUsersByUid(users, comments[i].uid);
this.addComment(comments[i], user);
}
this.displayEditor();
};
n.CommentController.prototype._searchUsersByUid = function (users, uid) {
......
/**
* @author Benjamin Baer <benjamin.baer@math.uzh.ch>
*/
/* global $ */
/* global EventEmitter */
/* @depend QfqEvents.js */
/* @depend Alert.js */
/* @depend Comment.js */
/**
* Qfq Namespace
*
* @namespace QfqNS
*/
var QfqNS = QfqNS || {};
(function (n) {
'use strict';
/**
* Manages a Text Editor for Comments
*
*/
n.Editor = function () {
this.$container = {};
this.text = "";
// Event Emitter is a Library qfq uses to emit custom Events.
this.eventEmitter = new EventEmitter();
};
n.Editor.prototype.on = n.EventEmitter.onMixin;
n.Editor.prototype.buildEditor = function($hook) {
};
}(QfqNS));
\ No newline at end of file
......@@ -417,53 +417,74 @@ i.@{spinner_class} {
// Code Correction
.codeCorrectionWrap {
background-color: #444;
color: #fff;
font-size: 1.2em;
font-family: monospace;
padding: 5px;
}
.qfqCommentContainer {
background-color: #f5f5f5;
color: #333;
margin-left: -5px;
margin-right: -5px;
font-size: 0.8em;
padding: 10px;
border: 1px solid #ccc;
}
.qfqLineCount {
width: 50px;
height: 100%;
text-align: right;
border-right: 1px solid #fff;
border-right: 1px solid #ccc;
padding-right: 10px;
line-height: 23px;
background-color: #efefef;
}
.qfqCode {
width: ~"calc(100% - 50px)";
min-height: 23px;
padding-left: 15px;
padding-right: 15px;
text-align: left;
font-size: 1.2em;
font-family: monospace;
}
.qfqCodeLine {
background-color: #fff;
}
.qfqCodeLine:hover {
background-color: #efefef;
}
.qfqCodeLine:hover .qfqLineCount {
background-color: #b9def0;
border-color: #9acfea;
color: #31708f;
}
.qfqCommentContainer {
color: #333;
height: 100%;
}
.qfqComment {
display: grid;
position: relative;
grid-template-columns: 110px auto;
grid-template-rows: 25px 75px auto;
grid-template-rows: 30px 90px auto;
margin: 10px;
margin-top: 20px;
}
.qfqCommentAvatar {
border-radius: 5px;
background-color: #fff;
grid-column: 1;
grid-row-start: 1;
grid-row-end: 2;
width: 100px;
height: 100px;
height: 120px;
border: 1px solid #ccc;
padding: 0px;
padding: 5px;
padding-bottom: 20px;
}
.qfqCommentAuthor {
position: absolute;
top: 5px;
left: 8px;
font-size: 0.8em;
font-weight: bold;
}
.qfqCommentText {
......@@ -483,7 +504,7 @@ i.@{spinner_class} {
grid-row: 1;
grid-column: 2;
border: 1px solid #ccc;
border-bottom: 1px solid #efefef;
border-bottom: none;
border-radius: 5px 5px 0 0;
background-color: #fff;
}
......@@ -496,13 +517,23 @@ i.@{spinner_class} {
font-size: 0.8em;
}
.qfqCode {
width: ~"calc(100% - 50px)";
padding-left: 15px;
padding-right: 15px;
text-align: left;
.qfqEditorContainer {
display: grid;
position: relative;
width: 100%;
grid-template-columns: auto 110px;
grid-template-rows: auto;
margin: 20px 10px 10px;
}
.qfqCodeLine:hover {
background-color: #666;
.qfqEditor {
grid-column: 1;
width: 100%;
min-height: 100px;
}
.qfqEditorControls {
grid-column: 2;
width: 100%;
padding-left: 10px;
}
\ No newline at end of file
......@@ -13,7 +13,7 @@
<title>Input Mode Switcher</title>
</head>
<body>
<body style="background-color: #f5f5f5;">
<div class="container-fluid">
<div class="row">
<div class="col-md-10 ">
......@@ -36,8 +36,16 @@
</div>
</div>
<div class="qfqEditorContainer">
<textarea class="qfqEditor"></textarea>
<div class="qfqEditorControls">
<button class="btn btn-primary">Send</button>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="col-md-2"></div>
<div class="col-md-8">
<div class="codeCorrection" data-uid='{"uid": 1, "name": "Reginald Commenter", "avatar": "http://www"}' data-file="../javascript/src/CodeCorrection.js" data-target="codeCorrection-output1">
</div>
......@@ -46,21 +54,25 @@
{ "lineNumber": 5,
"comments": [
{ "uid": 1,
"comment": "This is a test comment",
"comment": "If we knew what it was we were doing, it would not be called research, would it?",
"dateTime": "2018-05-12 09:45:00"
}]
}, { "lineNumber": 8,
"comments": [
{ "uid": 1,
"comment": "This is a test comment",
"comment": "The most beautiful thing we can experience is the mysterious. It is the source of all true art and all science.",
"dateTime": "2018-05-12 09:45:00"
},
{ "uid": 1,
"comment": "The only reason for time is so that everything does not happen at once.",
"dateTime": "0000-00-00 00:00:00"
}]
}
],
"users": [
{ "uid": 1,
"name": "Reginald Commenter",
"avatar": "http://www."
"name": "Albert Einstein",
"avatar": "http://institutoiltonesteves.com.br/img/avatar-4.jpg"
}
]}'>
</div>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment