<html>
<body>
<div style="font-family: Verdana, Arial, Helvetica, Sans-Serif;">
<table bgcolor="#f9f3c9" width="100%" cellpadding="12" style="border: 1px #c9c399 solid; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px;">
<tr>
<td>
This is an automatically generated e-mail. To reply, visit:
<a href="https://git.reviewboard.kde.org/r/127891/">https://git.reviewboard.kde.org/r/127891/</a>
</td>
</tr>
</table>
<br />
<blockquote style="margin-left: 1em; border-left: 2px solid #d0d0d0; padding-left: 10px;">
<p style="margin-top: 0;">On May 11th, 2016, 7:09 a.m. UTC, <b>Thomas Pfeiffer</b> wrote:</p>
<blockquote style="margin-left: 1em; border-left: 2px solid #d0d0d0; padding-left: 10px;">
<pre style="white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word;"><p style="padding: 0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: inherit;">Sounds like a feature, but features should never be accessible only using the context menu.
How about using inline editing?
This is how it would work here: When hovering over the card's text, the cursor changes to the text cursor, and when clicking it, it transforms to an edit box?
The funciton would not be immediately obvious, but if users notice that there is something wrong with a card's text, moving their cursor to it is likely an inutitive reaction, and then the feature would become obvious.</p></pre>
</blockquote>
<p>On May 20th, 2016, noon UTC, <b>Julian Helfferich</b> wrote:</p>
<blockquote style="margin-left: 1em; border-left: 2px solid #d0d0d0; padding-left: 10px;">
<pre style="white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word;"><p style="padding: 0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: inherit;">Yes, this is a new feature and your idea to change the mouse cursor is very nice. However, I would like to avoid entering edit mode when a user selects text from the label, e.g. to copy and paste it into google image search. A solution would be to enter edit mode not on the mouse-click, but only when a key is pressed (trying to edit the text).</p>
<p style="padding: 0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: inherit;">The alternative would be an edit button (see third attached image). This is similar to the suggested solution in bug 170534 where an additional button was suggested, marking the vocabulary as invalid. Here, it enters the line edit mode instead. However, I am not sure if the feature is important enough or will be used enough to justify a new button on the interface.</p>
<p style="padding: 0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: inherit;">I have realized that this new feature comes with quite a large diff making it hard to review. Would it help the review process to a) submit several, shorter patches or b) add a feature branch to the git repository?</p></pre>
</blockquote>
<p>On May 20th, 2016, 7:20 p.m. UTC, <b>Hartmut Riesenbeck</b> wrote:</p>
<blockquote style="margin-left: 1em; border-left: 2px solid #d0d0d0; padding-left: 10px;">
<pre style="white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word;"><p style="padding: 0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: inherit;">Here is another idea to inform the user about this nice feature:</p>
<p style="padding: 0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: inherit;">When moving the mouse curser over the card text a tool tip shows up with a message like "Press F2 to edit!". When the user hits F2 the card changes into edit mode like you showed in your second screen shot.</p>
<p style="padding: 0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: inherit;">An additiontional context menu entry would also be helpfull. And I think the user would find it if he recognises that the text label is somehow interactive.</p></pre>
</blockquote>
<p>On June 2nd, 2016, 1:39 a.m. UTC, <b>Julian Helfferich</b> wrote:</p>
<blockquote style="margin-left: 1em; border-left: 2px solid #d0d0d0; padding-left: 10px;">
<pre style="white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word;"><p style="padding: 0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: inherit;">Thank you very much for this great idea!</p>
<p style="padding: 0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: inherit;">Unfortunately, it will take me a while to update this patch, as I am currently busy with other things. However, combining the two ideas above, I suggest the following design:</p>
<h1 style="font-size: 100%;text-rendering: inherit;padding: 0;white-space: normal;margin: 0;line-height: inherit;">Case 1: Regular text</h1>
<p style="padding: 0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: inherit;">The EditableLabel displays a QLineEdit that is designed to look like a QLabel (using Qt Style Sheets). Similar to a QLabel, the user can select and copy text. Once the user starts editing, the design of the QLineEdit is changed back to the regular QLineEdit style and the accept and cancel buttons are shown. On accept/cancel, the QLineEdit is changed back to resemble a QLabel and the buttons are hidden. The tool tip for the QLineEdit reads "Edit vocabulary entry".</p>
<p style="padding: 0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: inherit;">Pros: I think the usage is very intuitive. The mouse cursor turns to an I-beam indicating that the entry can be edited. On the other hand, the interface does not change for anybody not using this feature.</p>
<p style="padding: 0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: inherit;">Cons: Using Qt Stylesheets to replicate the default QLineEdit look and feel needs to be kept up to date manually if the global design is changed.</p>
<h1 style="font-size: 100%;text-rendering: inherit;padding: 0;white-space: normal;margin: 0;line-height: inherit;">Case 2: Latex text</h1>
<p style="padding: 0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: inherit;">The EditableLabel displays a QLabel containing the Latex Pixmap. The mouse cursor turns to an I-beam and the tool tip reads "Click to edit". On clicking the Label, the QLineEdit is displayed. On accept/cancel the QLabel containing the (updated) Latex Pixmap is displayed again.</p></pre>
</blockquote>
</blockquote>
<pre style="white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word;"><p style="padding: 0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: inherit;">I have suggested a different approach trying to address the same issue :)</p>
<p style="padding: 0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: inherit;">https://git.reviewboard.kde.org/r/128752/</p>
<p style="padding: 0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: inherit;">Nevertheless, I am not sure that they are mutually exclusive.</p>
<p style="padding: 0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: inherit;">What I like in your approach is that entries are modified ‘on the fly’ and user does not have to return to the editor, find the entry, edit it, toggle it, etc.</p>
<p style="padding: 0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: inherit;">At the same time, this is the thing I don’t like. A user may want to just mark it as ‘problematic’, go on, finish studying and, in terms of a distinct workflow, go to the editor and fix the issues.</p></pre>
<br />
<p>- Dimitris</p>
<br />
<p>On May 11th, 2016, 4:14 a.m. UTC, Julian Helfferich wrote:</p>
<table bgcolor="#fefadf" width="100%" cellspacing="0" cellpadding="12" style="border: 1px #888a85 solid; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px;">
<tr>
<td>
<div>Review request for KDE Edu and KDE Usability.</div>
<div>By Julian Helfferich.</div>
<p style="color: grey;"><i>Updated May 11, 2016, 4:14 a.m.</i></p>
<div style="margin-top: 1.5em;">
<b style="color: #575012; font-size: 10pt; margin-top: 1.5em;">Bugs: </b>
<a href="http://bugs.kde.org/show_bug.cgi?id=170534">170534</a>
</div>
<div style="margin-top: 1.5em;">
<b style="color: #575012; font-size: 10pt;">Repository: </b>
parley
</div>
<h1 style="color: #575012; font-size: 10pt; margin-top: 1.5em;">Description </h1>
<table width="100%" bgcolor="#ffffff" cellspacing="0" cellpadding="10" style="border: 1px solid #b8b5a0">
<tr>
<td>
<pre style="margin: 0; padding: 0; white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word;"><p style="padding: 0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: inherit;">I have implemented a wish request (bug 170534) I would very much see in Parley: Add an option to edit the vocabulary during practice. To keep the review request small, I have implemented the quick edit option only for Flashcard practice. However, the approach is easy to extend.</p>
<p style="padding: 0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: inherit;">I took the following approach:</p>
<ul style="padding: 0;text-rendering: inherit;margin: 0 0 0 1em;line-height: inherit;white-space: normal;">
<li style="padding: 0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: normal;">The QLabel displaying the question/solution is replaced by a custom widget.</li>
<li style="padding: 0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: normal;">The widget is designed to behave similar to a QLabel, but it adds an additional action to the right-click context menu: "Edit vocabulary entry" (see screenshot 1).</li>
<li style="padding: 0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: normal;">When this option is selected, the QLabel is swapped with a QLineEdit and two ToolButtons for "Accept" and "Cancel" (see screenshot 2).</li>
<li style="padding: 0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: normal;">Clicking the "Cancel" button brings back the Label displaying the question/solution.</li>
<li style="padding: 0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: normal;">Clicking the "Accept" button or pressing enter brings back the question/solution label and emits the entryEdited() signal.</li>
<li style="padding: 0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: normal;">This signal is passed on to Practice State Machine as questionEdited() or solutionEdited() which modifies the vocabulary entry.</li>
</ul>
<p style="padding: 0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: inherit;">The approach does not make the quick edit option very obvious. Instead, I have opted for not changing the look and feel of the application. Another option would be to add an "edit" ToolButton (see screenshot 3).</p></pre>
</td>
</tr>
</table>
<h1 style="color: #575012; font-size: 10pt; margin-top: 1.5em;">Testing </h1>
<table width="100%" bgcolor="#ffffff" cellspacing="0" cellpadding="10" style="border: 1px solid #b8b5a0">
<tr>
<td>
<pre style="margin: 0; padding: 0; white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word;"><p style="padding: 0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: inherit;">Flashcard practice.</p>
<p style="padding: 0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: inherit;">Started editing -> Canceled edit
Started editing -> Accepted edit -> Confirmed that vocabulary was modified
Started editing -> Pressed continue/Answer later/Hint</p></pre>
</td>
</tr>
</table>
<h1 style="color: #575012; font-size: 10pt; margin-top: 1.5em;">Diffs</b> </h1>
<ul style="margin-left: 3em; padding-left: 0;">
<li>src/CMakeLists.txt <span style="color: grey">(fd352de)</span></li>
<li>src/practice/abstractfrontend.h <span style="color: grey">(f5f9552)</span></li>
<li>src/practice/editable_label.ui <span style="color: grey">(PRE-CREATION)</span></li>
<li>src/practice/editablelabel.h <span style="color: grey">(PRE-CREATION)</span></li>
<li>src/practice/editablelabel.cpp <span style="color: grey">(PRE-CREATION)</span></li>
<li>src/practice/flashcardmodewidget.cpp <span style="color: grey">(ced6ca6)</span></li>
<li>src/practice/practice_widget_flashcard.ui <span style="color: grey">(e1aa099)</span></li>
<li>src/practice/practicestatemachine.h <span style="color: grey">(b67ba32)</span></li>
<li>src/practice/practicestatemachine.cpp <span style="color: grey">(8756592)</span></li>
<li>src/practice/rightclickeditlabel.h <span style="color: grey">(PRE-CREATION)</span></li>
<li>src/practice/rightclickeditlabel.cpp <span style="color: grey">(PRE-CREATION)</span></li>
</ul>
<p><a href="https://git.reviewboard.kde.org/r/127891/diff/" style="margin-left: 3em;">View Diff</a></p>
<h1 style="color: #575012; font-size: 10pt; margin-top: 1.5em;">File Attachments </h1>
<li><a href="https://git.reviewboard.kde.org/media/uploaded/files/2016/05/11/f2db895e-c290-4548-9547-fd978c368893__context_menu.png">Additional context menu entry</a></li>
<li><a href="https://git.reviewboard.kde.org/media/uploaded/files/2016/05/11/6b602f41-fb17-43ec-a98e-7155f6721489__edit_entry.png">Edit vocabulary entry</a></li>
<li><a href="https://git.reviewboard.kde.org/media/uploaded/files/2016/05/11/8098a66e-eb34-430a-951a-1da21529b4ba__toolbutton.png">Edit tool button</a></li>
</ul>
</td>
</tr>
</table>
</div>
</body>
</html>