[prev in list] [next in list] [prev in thread] [next in thread]
List: kde-edu-devel
Subject: Re: Review Request 127891: Parley: Quickly edit vocabularies during practice
From: Hartmut Riesenbeck <hartmut.riesenbeck () gmx ! de>
Date: 2016-05-20 19:20:44
Message-ID: 20160520192044.15344.32240 () mimi ! kde ! org
[Download RAW message or body]
--===============0225278510738931052==
MIME-Version: 1.0
Content-Type: text/plain; charset="utf-8"
Content-Transfer-Encoding: 7bit
> On Mai 11, 2016, 7:09 vorm., Thomas Pfeiffer wrote:
> > 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.
>
> Julian Helfferich wrote:
> 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).
> 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.
> 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?
Here is another idea to inform the user about this nice feature:
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.
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.
- Hartmut
-----------------------------------------------------------
This is an automatically generated e-mail. To reply, visit:
https://git.reviewboard.kde.org/r/127891/#review95378
-----------------------------------------------------------
On Mai 11, 2016, 4:14 vorm., Julian Helfferich wrote:
>
> -----------------------------------------------------------
> This is an automatically generated e-mail. To reply, visit:
> https://git.reviewboard.kde.org/r/127891/
> -----------------------------------------------------------
>
> (Updated Mai 11, 2016, 4:14 vorm.)
>
>
> Review request for KDE Edu and KDE Usability.
>
>
> Bugs: 170534
> http://bugs.kde.org/show_bug.cgi?id=170534
>
>
> Repository: parley
>
>
> Description
> -------
>
> 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.
> I took the following approach:
>
> * The QLabel displaying the question/solution is replaced by a custom widget.
> * 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).
> * When this option is selected, the QLabel is swapped with a QLineEdit and two ToolButtons \
> for "Accept" and "Cancel" (see screenshot 2).
> * Clicking the "Cancel" button brings back the Label displaying the question/solution.
> * Clicking the "Accept" button or pressing enter brings back the question/solution label and \
> emits the entryEdited() signal.
> * This signal is passed on to Practice State Machine as questionEdited() or solutionEdited() \
> which modifies the vocabulary entry.
> 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).
>
> Diffs
> -----
>
> src/CMakeLists.txt fd352de
> src/practice/abstractfrontend.h f5f9552
> src/practice/editable_label.ui PRE-CREATION
> src/practice/editablelabel.h PRE-CREATION
> src/practice/editablelabel.cpp PRE-CREATION
> src/practice/flashcardmodewidget.cpp ced6ca6
> src/practice/practice_widget_flashcard.ui e1aa099
> src/practice/practicestatemachine.h b67ba32
> src/practice/practicestatemachine.cpp 8756592
> src/practice/rightclickeditlabel.h PRE-CREATION
> src/practice/rightclickeditlabel.cpp PRE-CREATION
>
> Diff: https://git.reviewboard.kde.org/r/127891/diff/
>
>
> Testing
> -------
>
> Flashcard practice.
>
> Started editing -> Canceled edit
> Started editing -> Accepted edit -> Confirmed that vocabulary was modified
> Started editing -> Pressed continue/Answer later/Hint
>
>
> File Attachments
> ----------------
>
> Additional context menu entry
> https://git.reviewboard.kde.org/media/uploaded/files/2016/05/11/f2db895e-c290-4548-9547-fd978c368893__context_menu.png
> Edit vocabulary entry
> https://git.reviewboard.kde.org/media/uploaded/files/2016/05/11/6b602f41-fb17-43ec-a98e-7155f6721489__edit_entry.png
> Edit tool button
> https://git.reviewboard.kde.org/media/uploaded/files/2016/05/11/8098a66e-eb34-430a-951a-1da21529b4ba__toolbutton.png
>
>
> Thanks,
>
> Julian Helfferich
>
>
--===============0225278510738931052==
MIME-Version: 1.0
Content-Type: text/html; charset="utf-8"
Content-Transfer-Encoding: 7bit
<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 Mai 11th, 2016, 7:09 vorm. 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 Mai 20th, 2016, Mittag 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>
</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;">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> <br />
<p>- Hartmut</p>
<br />
<p>On Mai 11th, 2016, 4:14 vorm. 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 Mai 11, 2016, 4:14 vorm.</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>
--===============0225278510738931052==--
[Attachment #3 (text/plain)]
_______________________________________________
kde-edu mailing list
kde-edu@mail.kde.org
https://mail.kde.org/mailman/listinfo/kde-edu
[prev in list] [next in list] [prev in thread] [next in thread]
Configure |
About |
News |
Add a list |
Sponsored by KoreLogic