Skip to content

Adds wordwrap and text selectability for messages and replies #1050

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
kushaldas wants to merge 17 commits into from
Closed

Adds wordwrap and text selectability for messages and replies #1050

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
1f918e1
Fixes #815 adds wordwrap for SecureQLabel
kushaldas Apr 7, 2020
6aff05f
Half done work on the UI to use QPlainTextEdit
kushaldas Apr 9, 2020
8b6d1bb
create textedit speech bubbles
Apr 9, 2020
5392c46
adjust textedit height
Apr 13, 2020
e28cca5
simplify resize logic for textedit
Apr 13, 2020
c1bb6f7
center message text
Apr 13, 2020
974189d
update tests for updating speech bubble text
Apr 13, 2020
d9702a3
update functional tests to get text using toPlainText
Apr 13, 2020
e2a4e26
app: QPlainTextEdit single selection to prevent user confusion
redshiftzero Apr 16, 2020
f837b3a
disable SecureQPlainTextEdit context menu
redshiftzero Apr 16, 2020
c91433c
use pixels instead of chars to resize
Apr 20, 2020
52248e7
app: use document margin pixel width in computing max line width
redshiftzero Apr 21, 2020
f4202b3
app: reduce padding now that scroll bar does not appear
redshiftzero Apr 21, 2020
1b56034
test: add coverage for SecureQPlainTextEdit
redshiftzero Apr 21, 2020
3f8db24
type annotations: event handlers on SecureQPlainTextEdit
redshiftzero Apr 21, 2020
f93944a
Revert "app: reduce padding now that scroll bar does not appear"
redshiftzero Apr 21, 2020
5bf3f0a
Working word wrapping, needs more work
kushaldas Apr 27, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 42 additions & 1 deletion securedrop_client/gui/__init__.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,9 @@
along with this program. If not, see <http://www.gnu.org/licenses/>.
"""
from typing import Union
import math

from PyQt5.QtWidgets import QLabel, QHBoxLayout, QPushButton, QWidget
from PyQt5.QtWidgets import QLabel, QHBoxLayout, QPlainTextEdit, QPushButton, QWidget
from PyQt5.QtCore import QSize, Qt

from securedrop_client.resources import load_svg, load_icon
Expand Down Expand Up @@ -195,3 +196,43 @@ def get_elided_text(self, full_text: str) -> str:

def is_elided(self) -> bool:
return self.elided


class SecureQPlainTextEdit(QPlainTextEdit):
MAX_TEXT_WIDTH = 75
MAX_NATURAL_TEXT_WIDTH = 650
HEIGHT_BASE = 60
LINE_HEIGHT = 20
Copy link
Contributor

@redshiftzero redshiftzero Apr 17, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

so I'm currently investigating this height setting - how was this LINE_HEIGHT constant determined? (asking because I was wondering if we can get this on the fly, looks like it's not exposed on QFont)

Copy link
Contributor

@redshiftzero redshiftzero Apr 17, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Though we do have QFontMetrics::lineSpacing and QFontMetrics::height which both report 16:

$ fm = QFontMetrics(self.document().defaultFont())
$ print('text height', fm.height())
text height 16
$ print('text line spacing', fm.lineSpacing())
text line spacing 16

Copy link
Contributor Author

@kushaldas kushaldas Apr 17, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

so I'm currently investigating this height setting - how was this LINE_HEIGHT constant determined? (asking because I was wondering if we can get this on the fly, looks like it's not exposed on QFont)

@creviera ^^


def __init__(self, text: str = '') -> None:
super().__init__()
self.setReadOnly(True)
self.setVerticalScrollBarPolicy(Qt.ScrollBarAlwaysOff)
self.document().setTextWidth(self.MAX_TEXT_WIDTH)
self.height = self.HEIGHT_BASE
self.setPlainText(text)

# Disable copy/paste context menu
self.setContextMenuPolicy(Qt.NoContextMenu)

def setPlainText(self, text: str) -> None:
super().setPlainText(text)

total_line_count = 0
for block_num in range(0, self.blockCount()):
block = self.document().findBlockByNumber(block_num)
line_count = math.ceil(block.length() / self.document().idealWidth())
Copy link
Contributor

@redshiftzero redshiftzero Apr 17, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this approach is a smart way to handle setting the height. In double checking this, I just noticed that it underestimates the number of lines (at least for me locally), e.g. I have a line_count of 4 for the following block which is actually taking up 5 lines in the UI:

Screen Shot 2020-04-17 at 11 54 51 AM

(just noting this in case anyone else has seen this and has an idea why it might be happening)

total_line_count = total_line_count + line_count

self.height = self.HEIGHT_BASE + (total_line_count * self.LINE_HEIGHT)
self.setFixedHeight(self.height)

def mouseReleaseEvent(self, event):
self.setFocus()
super().mouseReleaseEvent(event)

def focusOutEvent(self, event):
clear_text_cursor = self.textCursor()
clear_text_cursor.clearSelection()
self.setTextCursor(clear_text_cursor)
super().focusOutEvent(event)
32 changes: 19 additions & 13 deletions securedrop_client/gui/widgets.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,8 @@
from securedrop_client.db import DraftReply, Source, Message, File, Reply, User
from securedrop_client.storage import source_exists
from securedrop_client.export import ExportStatus, ExportError
from securedrop_client.gui import SecureQLabel, SvgLabel, SvgPushButton, SvgToggleButton
from securedrop_client.gui import SecureQLabel, SecureQPlainTextEdit, SvgLabel, SvgPushButton, \
SvgToggleButton
from securedrop_client.logic import Controller
from securedrop_client.resources import load_icon, load_image, load_movie
from securedrop_client.utils import humanize_filesize
Expand Down Expand Up @@ -1898,7 +1899,8 @@ class SpeechBubble(QWidget):
font-weight: 400;
font-size: 15px;
background-color: #fff;
padding: 16px;
padding: 24px;
border: none;
}
#color_bar {
min-height: 5px;
Expand All @@ -1918,7 +1920,7 @@ def __init__(self, message_uuid: str, text: str, update_signal, index: int) -> N

# Set styles
self.setStyleSheet(self.CSS)
self.setSizePolicy(QSizePolicy.Fixed, QSizePolicy.Fixed)
self.setSizePolicy(QSizePolicy.Fixed, QSizePolicy.Expanding)

# Set layout
layout = QVBoxLayout()
Expand All @@ -1929,30 +1931,32 @@ def __init__(self, message_uuid: str, text: str, update_signal, index: int) -> N
layout.setSpacing(0)

# Message box
self.message = SecureQLabel(text)
self.message = SecureQPlainTextEdit(text)
self.message.setObjectName('message')

# Color bar
self.color_bar = QWidget()
self.color_bar.setObjectName('color_bar')

# Speech bubble
speech_bubble = QWidget()
speech_bubble.setObjectName('speech_bubble')
self.speech_bubble = QWidget()
self.speech_bubble.setObjectName('speech_bubble')
speech_bubble_layout = QVBoxLayout()
speech_bubble.setLayout(speech_bubble_layout)
self.speech_bubble.setLayout(speech_bubble_layout)
speech_bubble_layout.addWidget(self.message)
speech_bubble_layout.addWidget(self.color_bar)
speech_bubble_layout.setContentsMargins(0, 0, 0, 0)
speech_bubble_layout.setSpacing(0)
# self.speech_bubble.setFixedHeight(self.message.height)
self.speech_bubble.adjustSize()

# Bubble area includes speech bubble plus error message if there is an error
bubble_area = QWidget()
bubble_area.setLayoutDirection(Qt.RightToLeft)
self.bubble_area_layout = QHBoxLayout()
self.bubble_area_layout.setContentsMargins(0, self.TOP_MARGIN, 0, self.BOTTOM_MARGIN)
bubble_area.setLayout(self.bubble_area_layout)
self.bubble_area_layout.addWidget(speech_bubble)
self.bubble_area_layout.addWidget(self.speech_bubble)

# Add widget to layout
layout.addWidget(bubble_area)
Expand All @@ -1967,7 +1971,9 @@ def _update_text(self, source_id: str, message_uuid: str, text: str) -> None:
signal matches the uuid of this speech bubble.
"""
if message_uuid == self.uuid:
self.message.setText(text)
self.message.setPlainText(text)
# self.speech_bubble.setFixedHeight(self.message.height)
self.speech_bubble.adjustSize()


class MessageWidget(SpeechBubble):
Expand All @@ -1990,7 +1996,7 @@ class ReplyWidget(SpeechBubble):
font-size: 15px;
background-color: #fff;
color: #3b3b3b;
padding: 16px;
padding: 24px;
'''

CSS_COLOR_BAR_REPLY_FAILED = '''
Expand All @@ -2013,7 +2019,7 @@ class ReplyWidget(SpeechBubble):
font-size: 15px;
background-color: #fff;
color: #3b3b3b;
padding: 16px;
padding: 24px;
'''

CSS_COLOR_BAR_REPLY_SUCCEEDED = '''
Expand All @@ -2029,7 +2035,7 @@ class ReplyWidget(SpeechBubble):
font-size: 15px;
color: #A9AAAD;
background-color: #F7F8FC;
padding: 16px;
padding: 24px;
'''

CSS_COLOR_BAR_REPLY_PENDING = '''
Expand Down Expand Up @@ -3135,7 +3141,7 @@ def update_conversation(self, collection: list) -> None:
# Check if text in item has changed, then update the
# widget to reflect this change.
if not isinstance(item_widget, FileWidget):
if (item_widget.message.text() != conversation_item.content) and \
if (item_widget.message.toPlainText() != conversation_item.content) and \
conversation_item.content:
item_widget.message.setText(conversation_item.content)
else:
Expand Down
2 changes: 1 addition & 1 deletion tests/functional/test_download_file.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ def check_for_sources():
# We see the source's message.
last_msg_id = list(conversation.conversation_view.current_messages.keys())[-2]
last_msg = conversation.conversation_view.current_messages[last_msg_id]
assert last_msg.message.text() == message
assert last_msg.message.toPlainText() == message

# Let us download the file
qtbot.mouseClick(file_msg.download_button, Qt.LeftButton)
Expand Down
2 changes: 1 addition & 1 deletion tests/functional/test_export_dialog.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ def check_for_sources():
# We see the source's message.
last_msg_id = list(conversation.conversation_view.current_messages.keys())[-2]
last_msg = conversation.conversation_view.current_messages[last_msg_id]
assert last_msg.message.text() == message
assert last_msg.message.toPlainText() == message

# Let us download the file
qtbot.mouseClick(file_msg.download_button, Qt.LeftButton)
Expand Down
2 changes: 1 addition & 1 deletion tests/functional/test_receive_message.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,4 +44,4 @@ def check_for_sources():
# We see the source's message.
last_msg_id = list(conversation.conversation_view.current_messages.keys())[-2]
last_msg = conversation.conversation_view.current_messages[last_msg_id]
assert last_msg.message.text() == message
assert last_msg.message.toPlainText() == message
2 changes: 1 addition & 1 deletion tests/functional/test_send_reply.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,4 +47,4 @@ def check_for_sources():
# just typed.
last_msg_id = list(conversation.conversation_view.current_messages.keys())[-1]
last_msg = conversation.conversation_view.current_messages[last_msg_id]
assert last_msg.message.text() == message
assert last_msg.message.toPlainText() == message
10 changes: 5 additions & 5 deletions tests/gui/test_widgets.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2031,7 +2031,7 @@ def test_SpeechBubble_init(mocker):
sb = SpeechBubble('mock id', 'hello', mock_signal, 0)
ss = sb.styleSheet()

sb.message.text() == 'hello'
sb.message.toPlainText() == 'hello'
assert mock_connect.called
assert 'background-color' in ss

Expand All @@ -2047,11 +2047,11 @@ def test_SpeechBubble_update_text(mocker):

new_msg = 'new message'
sb._update_text('mock_source_uuid', msg_id, new_msg)
assert sb.message.text() == new_msg
assert sb.message.toPlainText() == new_msg

newer_msg = 'an even newer message'
sb._update_text('mock_source_uuid', msg_id + 'xxxxx', newer_msg)
assert sb.message.text() == new_msg
assert sb.message.toPlainText() == new_msg


def test_SpeechBubble_html_init(mocker):
Expand All @@ -2062,7 +2062,7 @@ def test_SpeechBubble_html_init(mocker):
mock_signal = mocker.MagicMock()

bubble = SpeechBubble('mock id', '<b>hello</b>', mock_signal, 0)
assert bubble.message.text() == '<b>hello</b>'
assert bubble.message.toPlainText() == '<b>hello</b>'


def test_SpeechBubble_with_apostrophe_in_text(mocker):
Expand All @@ -2071,7 +2071,7 @@ def test_SpeechBubble_with_apostrophe_in_text(mocker):

message = "I'm sure, you are reading my message."
bubble = SpeechBubble('mock id', message, mock_signal, 0)
assert bubble.message.text() == message
assert bubble.message.toPlainText() == message


def test_MessageWidget_init(mocker):
Expand Down