[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