Skip to content

erp5
erp5
Commit 738a6e8c authored by Romain Courteaud's avatar Romain Courteaud
Browse files
Options

romain_dev: forum improve post rendering

parent f8ab2a1b
Expand all Show whitespace changes
Inline Side-by-side
Showing with 571 additions and 58 deletions
bt5/romain_dev/PathTemplateItem/web_page_module/romain_forum_html.html
View file @ 738a6e8c
......@@ -12,7 +12,6 @@
<!-- renderjs -->
<script src="rsvp.js" type="text/javascript"></script>
<script src="renderjs.js" type="text/javascript"></script>
<!--link rel="stylesheet" href="gadget_erp5_page_nx_project_quality.css"-->
<!-- custom script -->
<script src="jiodev.js" type="text/javascript"></script>
......
bt5/romain_dev/PathTemplateItem/web_page_module/romain_forum_html.xml
View file @ 738a6e8c
......@@ -238,7 +238,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>989.1604.35674.62737</string> </value>
<value> <string>989.21729.29819.50124</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -256,7 +256,7 @@
</tuple>
<state>
<tuple>
<float>1609424915.53</float>
<float>1610632417.11</float>
<string>UTC</string>
</tuple>
</state>
......
bt5/romain_dev/PathTemplateItem/web_page_module/romain_forum_js.js
View file @ 738a6e8c
......@@ -8,6 +8,8 @@
// XXX create topic by followup (allDocs group by follow up)
var DISPLAY_READER = 'display_reader',
DISPLAY_THREAD = 'display_thread',
DISPLAY_POST = 'display_post',
MAIN_SCOPE = 'child_scope';
function loadChildGadget(gadget, gadget_url, must_declare, callback) {
......@@ -117,7 +119,7 @@
}
function renderDiscussionThread(gadget, must_declare, jio_key) {
return loadChildGadget(gadget, "gadget_erp5_pt_form_dialog.html",
return loadChildGadget(gadget, "gadget_erp5_pt_form_view_editable.html",
must_declare, function (form_gadget) {
var thread_info_dict;
......@@ -209,7 +211,7 @@
"hidden": 0
};
group_list.push([
"center",
"bottom",
[["nutnut"]]
], [
"hidden", ["listbox_modification_date"]
......@@ -496,6 +498,10 @@
.allowPublicAcquisition("jio_allDocs", function (param_list, scope) {
// XXX Convert iso date to a DateTime field
// XXX Paginate message to last message on modification date column
if (this.state.display_step !== DISPLAY_READER) {
throw new rJS.AcquisitionError();
}
var gadget = this,
options = param_list[0];
console.log(scope, param_list);
......@@ -560,16 +566,26 @@
});
})
.setState({
display_step: DISPLAY_READER
})
.declareMethod('render', function (options) {
console.log(options);
var display_step,
jio_key = options.jio_key;
if (jio_key === undefined) {
display_step = DISPLAY_READER;
} else if ((jio_key.match(/\//g) || []).length === 1) {
// XXX HACK
display_step = DISPLAY_THREAD;
}
return this.changeState({
first_render: true,
// first_render: true,
page: options.page,
jio_key: options.jio_key,
options: options
jio_key: jio_key,
display_step: display_step,
options: options,
// Force display in any case
render_timestamp: new Date().getTime()
/*
display_step: DISPLAY_TREE,
// Only build the bt5 during the first query
......@@ -596,51 +612,28 @@
console.log('changestate', modification_dict);
var gadget = this;
// Always refresh the reader
if (gadget.state.display_step === DISPLAY_READER) {
if (gadget.state.jio_key === undefined) {
return renderDiscussionThreadList(
gadget,
modification_dict.hasOwnProperty('display_step') || modification_dict.first_render
modification_dict.hasOwnProperty('display_step')
);
}
// XXX HACK
if ((gadget.state.jio_key.match(/\//g) || []).length === 1) {
if (gadget.state.display_step === DISPLAY_THREAD) {
return renderDiscussionThread(
gadget,
modification_dict.hasOwnProperty('display_step') || modification_dict.first_render,
modification_dict.hasOwnProperty('display_step'),
gadget.state.jio_key
);
}
/*
return renderDiscussionPost(
gadget,
modification_dict.hasOwnProperty('display_step') || modification_dict.first_render,
gadget.state.jio_key
);
}
/*
if (gadget.state.display_step === DISPLAY_TREE) {
console.log(modification_dict);
if (modification_dict.hasOwnProperty('display_step')) {
return renderTreeView(gadget,
modification_dict.hasOwnProperty('extract'));
}
if (modification_dict.hasOwnProperty('expand_tree')) {
return expandTreeView(gadget);
}
}
if (modification_dict.display_step === DISPLAY_DIFF) {
return renderDiffView(gadget);
}
if (modification_dict.display_step === DISPLAY_CHANGELOG) {
return renderChangelogView(gadget);
}
*/
if (modification_dict.hasOwnProperty('display_step')) {
throw new Error('Unhandled display step: ' + gadget.state.display_step);
}
});
}(window, rJS, RSVP, domsugar, SimpleQuery, ComplexQuery, Query));
\ No newline at end of file
bt5/romain_dev/PathTemplateItem/web_page_module/romain_forum_js.xml
View file @ 738a6e8c
......@@ -240,7 +240,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>989.18879.37912.30737</string> </value>
<value> <string>989.21570.59351.45277</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -258,7 +258,7 @@
</tuple>
<state>
<tuple>
<float>1610461438.43</float>
<float>1610622907.09</float>
<string>UTC</string>
</tuple>
</state>
......
bt5/romain_dev/PathTemplateItem/web_page_module/romain_thread_reader_css.css 0 → 100644
View file @ 738a6e8c
div[data-gadget-url$="gadget_thread_reader.html"] > ol {
max-width: 50em;
}
div[data-gadget-url$="gadget_thread_reader.html"] > ol > li {
padding-bottom: 2em;
}
div[data-gadget-url$="gadget_thread_reader.html"] > ol > li:nth-child(even) {
background-color: rgba(230, 230, 230, 0.65);
}
div[data-gadget-url$="gadget_thread_reader.html"] > ol > li > div.post_content {
display: inline-block;
}
div[data-gadget-url$="gadget_thread_reader.html"] > ol > li > div.post_content > div {
margin-top: 1em;
}
div[data-gadget-url$="gadget_thread_reader.html"] > ol > li > div.post_avatar {
display: inline-block;
margin-right: 1em;
width: 3em;
height: 3em;
line-height: 3em;
text-align: center;
border-radius: 50%;
background: #0E81C2;
color: #FFFFFF;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
vertical-align: top;
text-transform: uppercase;
}
div[data-gadget-url$="gadget_thread_reader.html"] > ol > li + li {
padding-top: 1em;
}
bt5/romain_dev/PathTemplateItem/web_page_module/romain_thread_reader_html.html
View file @ 738a6e8c
......@@ -13,6 +13,7 @@
<title>Thread Reader</title>
<!-- renderjs -->
<link rel="stylesheet" href="gadget_thread_reader.css">
<script src="rsvp.js" type="text/javascript"></script>
<script src="renderjs.js" type="text/javascript"></script>
<script src="domsugar.js" type="text/javascript"></script>
......
bt5/romain_dev/PathTemplateItem/web_page_module/romain_thread_reader_html.xml
View file @ 738a6e8c
......@@ -238,7 +238,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>989.18650.40702.358</string> </value>
<value> <string>989.21729.52523.14404</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -256,7 +256,7 @@
</tuple>
<state>
<tuple>
<float>1610447694.2</float>
<float>1610632439.05</float>
<string>UTC</string>
</tuple>
</state>
......
bt5/romain_dev/PathTemplateItem/web_page_module/romain_thread_reader_js.js
View file @ 738a6e8c
......@@ -7,6 +7,37 @@
loading_class_list = ['ui-icon-spinner', 'ui-btn-icon-left'],
disabled_class = 'ui-disabled';
function getRelativeTimeString(current_date, date) {
var diff,
abs,
second = 1000,
minute = second * 60,
hour = minute * 60,
day = hour * 24,
week = day * 7,
time_format = new Intl.RelativeTimeFormat();
diff = date.getFullYear() - current_date.getFullYear();
if (diff !== 0) {
return time_format.format(diff, 'year');
}
diff = date - current_date;
abs = Math.abs(diff);
// "year", "quarter", "month", "week", "day", "hour", "minute", "second"
console.log(current_date, date, abs, week, day);
if (abs > (week * 2)) {
return time_format.format(Math.floor(diff / week), 'week');
} else if (abs > (day * 2)) {
return time_format.format(Math.floor(diff / day), 'day');
} else if (abs > (hour * 2)) {
return time_format.format(Math.floor(diff / hour), 'hour');
} else {
return time_format.format(Math.floor(diff / minute), 'minute');
}
return date;
}
function buildFieldGadgetParam(value) {
var field_gadget_param;
......@@ -386,13 +417,38 @@
})
))
.push(function (viewer_list) {
var now = new Date();
domsugar(gadget.element, [
domsugar('p', {text: 'Comments:'}),
domsugar('ol', allDocs_result.data.rows.map(function (entry, i) {
console.log(entry);
var source_title = entry.value.source_title || '',
word_list = source_title.split(' '),
source_short_title;
if (word_list.length === 1) {
source_short_title = (word_list[0][0] || '?') + (word_list[0][1] || '');
} else {
source_short_title = word_list[0][0] + word_list[1][0];
}
return domsugar('li', [
domsugar('div', {
class: 'post_avatar',
text: source_short_title
}),
domsugar('div', {
class: 'post_content',
}, [
domsugar('strong', {text: source_title}),
" ",
domsugar('time', {
datetime: entry.value.modification_date,
title: entry.value.modification_date,
text: getRelativeTimeString(
now, new Date(entry.value.modification_date)
)
}),
domsugar('br'),
viewer_list[i].element,
domsugar('hr')
// domsugar('hr')
])
]);
}))
]);
......@@ -768,6 +824,19 @@
return result_queue;
})
.onLoop(function () {
// update relative time
var now = new Date();
this.element.querySelectorAll("div.post_content > time").forEach(
function (element) {
element.textContent = getRelativeTimeString(
now, new Date(element.getAttribute('datetime'))
);
}
);
// Loop every minute
}, 1000 * 60)
//////////////////////////////////////////////
// render the listbox in an asynchronous way
//////////////////////////////////////////////
......
bt5/romain_dev/PathTemplateItem/web_page_module/romain_thread_reader_js.xml
View file @ 738a6e8c
......@@ -240,7 +240,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>989.20325.997.53486</string> </value>
<value> <string>989.21883.22115.61832</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -258,7 +258,7 @@
</tuple>
<state>
<tuple>
<float>1610548223.31</float>
<float>1610641779.85</float>
<string>UTC</string>
</tuple>
</state>
......
bt5/romain_dev/SkinTemplateItem/portal_skins/romain_dev/gadget_thread_reader.less.txt 0 → 100644
View file @ 738a6e8c
@colorheaderbackground: #085078;
@colorsubheaderbackground: #0E81C2;
@foreground-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.20);
@white: #FFFFFF;
@avatar_size: 3em;
div[data-gadget-url$="gadget_thread_reader.html"] {
& > ol {
// Limit the width to make reading more pleasant on large screen
max-width: 50em;
& > li {
padding-bottom: 2em;
&:nth-child(even) {
background-color: rgba(230, 230, 230, 0.65);
}
& > div.post_content {
display: inline-block;
& > div {
// Separate post info (user and time) from content
margin-top: 1em;
}
}
& > div.post_avatar {
display: inline-block;
margin-right: 1em;
width: @avatar_size;
height: @avatar_size;
line-height: @avatar_size;
text-align: center;
border-radius: 50%;
background: @colorsubheaderbackground;
color: @white;
text-shadow: @foreground-text-shadow;
vertical-align: top;
text-transform: uppercase;
}
& + li {
// Separate posts
// border-top: solid 1px @colorsubheaderbackground;
padding-top: 1em;
}
}
}
}
\ No newline at end of file
bt5/romain_dev/SkinTemplateItem/portal_skins/romain_dev/gadget_thread_reader.less.xml 0 → 100644
View file @ 738a6e8c
<?xml version="1.0"?>
<ZopeData>
<record id="1" aka="AAAAAAAAAAE=">
<pickle>
<global name="File" module="OFS.Image"/>
</pickle>
<pickle>
<dictionary>
<item>
<key> <string>__name__</string> </key>
<value> <string>gadget_thread_reader.less</string> </value>
</item>
<item>
<key> <string>content_type</string> </key>
<value> <string>text/plain</string> </value>
</item>
<item>
<key> <string>precondition</string> </key>
<value> <string></string> </value>
</item>
<item>
<key> <string>title</string> </key>
<value> <string></string> </value>
</item>
</dictionary>
</pickle>
</record>
</ZopeData>
Markdown is supported
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7