diff options
author | Saptak S <saptak013@gmail.com> | 2020-08-30 19:23:23 +0530 |
---|---|---|
committer | Saptak S <saptak013@gmail.com> | 2020-09-07 13:54:06 +0530 |
commit | 12c7548c08e84c607f3d591a875d21809cf501d2 (patch) | |
tree | 31575e46911dfd81d52ff3b585dd3edef575ca19 | |
parent | ddf1532eed9b9c9e0ab1219168a8dc88589a8abf (diff) | |
download | onionshare-12c7548c08e84c607f3d591a875d21809cf501d2.tar.gz onionshare-12c7548c08e84c607f3d591a875d21809cf501d2.zip |
Adds UI/UX enhancements in different sections of tab layouts
-rw-r--r-- | onionshare_gui/gui_common.py | 19 | ||||
-rw-r--r-- | onionshare_gui/tab/mode/__init__.py | 1 | ||||
-rw-r--r-- | onionshare_gui/tab/mode/chat_mode/__init__.py | 1 | ||||
-rw-r--r-- | onionshare_gui/tab/mode/receive_mode/__init__.py | 24 | ||||
-rw-r--r-- | onionshare_gui/tab/mode/share_mode/__init__.py | 1 | ||||
-rw-r--r-- | onionshare_gui/tab/mode/website_mode/__init__.py | 1 | ||||
-rw-r--r-- | onionshare_gui/tab/tab.py | 43 | ||||
-rw-r--r-- | share/images/logo_text.png | bin | 0 -> 3798 bytes | |||
-rw-r--r-- | share/images/mode_new_tab_chat.png | bin | 29514 -> 5213 bytes | |||
-rw-r--r-- | share/images/mode_new_tab_receive.png | bin | 30723 -> 6470 bytes | |||
-rw-r--r-- | share/images/mode_new_tab_share.png | bin | 25198 -> 4485 bytes | |||
-rw-r--r-- | share/images/mode_new_tab_website.png | bin | 20123 -> 3860 bytes | |||
-rw-r--r-- | share/images/mode_share.png | bin | 33773 -> 9472 bytes | |||
-rw-r--r-- | share/images/mode_website.png | bin | 19790 -> 8126 bytes | |||
-rw-r--r-- | share/locale/en.json | 4 |
15 files changed, 75 insertions, 19 deletions
diff --git a/onionshare_gui/gui_common.py b/onionshare_gui/gui_common.py index f6d3eedf..286dbd31 100644 --- a/onionshare_gui/gui_common.py +++ b/onionshare_gui/gui_common.py @@ -77,8 +77,9 @@ class GuiCommon: }""", "mode_header_label": """ QLabel { - color: #333333; - font-size: 30px; + color: #4E064F; + font-size: 48px; + margin-bottom: 16px; }""", "settings_button": """ QPushButton { @@ -216,6 +217,7 @@ class GuiCommon: "new_tab_button_image": """ QLabel { padding: 30px; + text-align: center; } """, "new_tab_button_text": """ @@ -227,6 +229,13 @@ class GuiCommon: color: #4e0d4e; } """, + "new_tab_title_text": """ + QLabel { + text-align: center; + color: #333333; + font-size: 28px; + } + """, # Share mode and child widget styles "share_delete_all_files_button": """ QPushButton { @@ -254,12 +263,14 @@ class GuiCommon: """, "share_file_selection_drop_here_header_label": """ QLabel { - color: #333333; - font-size: 30px; + color: #4E064F; + font-size: 48px; + margin-bottom: 72px; }""", "share_file_selection_drop_here_label": """ QLabel { color: #666666; + margin-bottom: 48px; }""", "share_file_selection_drop_count_label": """ QLabel { diff --git a/onionshare_gui/tab/mode/__init__.py b/onionshare_gui/tab/mode/__init__.py index a527ef0c..601d3310 100644 --- a/onionshare_gui/tab/mode/__init__.py +++ b/onionshare_gui/tab/mode/__init__.py @@ -97,7 +97,6 @@ class Mode(QtWidgets.QWidget): # Note: It's up to the downstream Mode to add this to its layout self.primary_action_layout = QtWidgets.QVBoxLayout() self.primary_action_layout.addWidget(self.mode_settings_widget) - self.primary_action_layout.addWidget(self.server_status) self.primary_action = QtWidgets.QWidget() self.primary_action.setLayout(self.primary_action_layout) diff --git a/onionshare_gui/tab/mode/chat_mode/__init__.py b/onionshare_gui/tab/mode/chat_mode/__init__.py index d255fcbd..605d5561 100644 --- a/onionshare_gui/tab/mode/chat_mode/__init__.py +++ b/onionshare_gui/tab/mode/chat_mode/__init__.py @@ -85,6 +85,7 @@ class ChatMode(Mode): self.main_layout.addStretch() self.main_layout.addWidget(header_label) self.main_layout.addWidget(self.primary_action) + self.main_layout.addWidget(self.server_status) self.main_layout.addStretch() self.main_layout.addWidget(MinimumWidthWidget(700)) diff --git a/onionshare_gui/tab/mode/receive_mode/__init__.py b/onionshare_gui/tab/mode/receive_mode/__init__.py index 6f1bc7f5..75dbd65f 100644 --- a/onionshare_gui/tab/mode/receive_mode/__init__.py +++ b/onionshare_gui/tab/mode/receive_mode/__init__.py @@ -47,11 +47,9 @@ class ReceiveMode(Mode): QtGui.QImage(self.common.get_resource_path("images/mode_receive.png")) ) ) - self.image_label.setFixedSize(300, 300) + self.image_label.setFixedSize(250, 250) image_layout = QtWidgets.QVBoxLayout() - image_layout.addStretch() image_layout.addWidget(self.image_label) - image_layout.addStretch() self.image = QtWidgets.QWidget() self.image.setLayout(image_layout) @@ -125,18 +123,26 @@ class ReceiveMode(Mode): # Main layout self.main_layout = QtWidgets.QVBoxLayout() - self.main_layout.addLayout(top_bar_layout) - self.main_layout.addStretch() self.main_layout.addWidget(header_label) self.main_layout.addWidget(receive_warning) self.main_layout.addWidget(self.primary_action) - self.main_layout.addStretch() - self.main_layout.addWidget(MinimumWidthWidget(700)) + self.main_layout.addWidget(MinimumWidthWidget(525)) + + # Row layout + content_row = QtWidgets.QHBoxLayout() + content_row.addLayout(self.main_layout) + content_row.addWidget(self.image) + row_layout = QtWidgets.QVBoxLayout() + row_layout.addLayout(top_bar_layout) + row_layout.addStretch() + row_layout.addLayout(content_row) + row_layout.addWidget(self.server_status) + row_layout.addStretch() + # Column layout self.column_layout = QtWidgets.QHBoxLayout() - self.column_layout.addWidget(self.image) - self.column_layout.addLayout(self.main_layout) + self.column_layout.addLayout(row_layout) self.column_layout.addWidget(self.history, stretch=1) # Wrapper layout diff --git a/onionshare_gui/tab/mode/share_mode/__init__.py b/onionshare_gui/tab/mode/share_mode/__init__.py index aa386e3d..ca6c4f40 100644 --- a/onionshare_gui/tab/mode/share_mode/__init__.py +++ b/onionshare_gui/tab/mode/share_mode/__init__.py @@ -165,6 +165,7 @@ class ShareMode(Mode): # Wrapper layout self.wrapper_layout = QtWidgets.QVBoxLayout() self.wrapper_layout.addLayout(self.column_layout) + self.wrapper_layout.addWidget(self.server_status) self.setLayout(self.wrapper_layout) # Always start with focus on file selection diff --git a/onionshare_gui/tab/mode/website_mode/__init__.py b/onionshare_gui/tab/mode/website_mode/__init__.py index c520d8f7..45316c7e 100644 --- a/onionshare_gui/tab/mode/website_mode/__init__.py +++ b/onionshare_gui/tab/mode/website_mode/__init__.py @@ -165,6 +165,7 @@ class WebsiteMode(Mode): # Wrapper layout self.wrapper_layout = QtWidgets.QVBoxLayout() self.wrapper_layout.addLayout(self.column_layout) + self.wrapper_layout.addWidget(self.server_status) self.setLayout(self.wrapper_layout) # Always start with focus on file selection diff --git a/onionshare_gui/tab/tab.py b/onionshare_gui/tab/tab.py index fbc828ff..72ed77bc 100644 --- a/onionshare_gui/tab/tab.py +++ b/onionshare_gui/tab/tab.py @@ -36,7 +36,7 @@ from ..widgets import Alert class NewTabButton(QtWidgets.QPushButton): - def __init__(self, common, image_filename, text): + def __init__(self, common, image_filename, title, text): super(NewTabButton, self).__init__() self.common = common @@ -49,17 +49,26 @@ class NewTabButton(QtWidgets.QPushButton): QtGui.QImage(self.common.get_resource_path(image_filename)) ) ) - self.image_label.setFixedSize(280, 280) + self.image_label.setAlignment(QtCore.Qt.AlignCenter) self.image_label.setStyleSheet(self.common.gui.css["new_tab_button_image"]) - self.image_label.setGeometry(0, 0, self.width(), self.height()) + self.image_label.setGeometry(0, 0, self.width(), 200) self.image_label.show() + # Title + self.title_label = QtWidgets.QLabel(title, parent=self) + self.title_label.setAlignment(QtCore.Qt.AlignCenter) + self.title_label.setStyleSheet(self.common.gui.css["new_tab_title_text"]) + self.title_label.setGeometry( + (self.width() - 250) / 2, self.height() - 100, 250, 30 + ) + self.title_label.show() + # Text self.text_label = QtWidgets.QLabel(text, parent=self) self.text_label.setAlignment(QtCore.Qt.AlignCenter) self.text_label.setStyleSheet(self.common.gui.css["new_tab_button_text"]) self.text_label.setGeometry( - (self.width() - 200) / 2, self.height() - 40, 200, 30 + (self.width() - 200) / 2, self.height() - 50, 200, 30 ) self.text_label.show() @@ -96,11 +105,26 @@ class Tab(QtWidgets.QWidget): # Start the OnionShare app self.app = OnionShare(common, self.common.gui.onion, self.common.gui.local_only) + # Onionshare logo + self.image_label = QtWidgets.QLabel() + self.image_label.setPixmap( + QtGui.QPixmap.fromImage( + QtGui.QImage(self.common.get_resource_path("images/logo_text.png")) + ) + ) + self.image_label.setFixedSize(160, 40) + image_layout = QtWidgets.QVBoxLayout() + image_layout.addWidget(self.image_label) + image_layout.addStretch() + self.image = QtWidgets.QWidget() + self.image.setLayout(image_layout) + # New tab buttons self.share_button = NewTabButton( self.common, "images/mode_new_tab_share.png", strings._("gui_new_tab_share_button"), + strings._("gui_main_page_share_button"), ) self.share_button.clicked.connect(self.share_mode_clicked) @@ -108,6 +132,7 @@ class Tab(QtWidgets.QWidget): self.common, "images/mode_new_tab_receive.png", strings._("gui_new_tab_receive_button"), + strings._("gui_main_page_receive_button"), ) self.receive_button.clicked.connect(self.receive_mode_clicked) @@ -115,6 +140,7 @@ class Tab(QtWidgets.QWidget): self.common, "images/mode_new_tab_website.png", strings._("gui_new_tab_website_button"), + strings._("gui_main_page_website_button"), ) self.website_button.clicked.connect(self.website_mode_clicked) @@ -122,6 +148,7 @@ class Tab(QtWidgets.QWidget): self.common, "images/mode_new_tab_chat.png", strings._("gui_new_tab_chat_button"), + strings._("gui_main_page_chat_button"), ) self.chat_button.clicked.connect(self.chat_mode_clicked) @@ -143,8 +170,14 @@ class Tab(QtWidgets.QWidget): new_tab_layout.addLayout(new_tab_bottom_layout) new_tab_layout.addStretch() + new_tab_img_layout = QtWidgets.QHBoxLayout() + new_tab_img_layout.addWidget(self.image) + new_tab_img_layout.addStretch(1) + new_tab_img_layout.addLayout(new_tab_layout) + new_tab_img_layout.addStretch(2) + self.new_tab = QtWidgets.QWidget() - self.new_tab.setLayout(new_tab_layout) + self.new_tab.setLayout(new_tab_img_layout) self.new_tab.show() # Layout diff --git a/share/images/logo_text.png b/share/images/logo_text.png Binary files differnew file mode 100644 index 00000000..3b584acd --- /dev/null +++ b/share/images/logo_text.png diff --git a/share/images/mode_new_tab_chat.png b/share/images/mode_new_tab_chat.png Binary files differindex 4d54f127..50759d64 100644 --- a/share/images/mode_new_tab_chat.png +++ b/share/images/mode_new_tab_chat.png diff --git a/share/images/mode_new_tab_receive.png b/share/images/mode_new_tab_receive.png Binary files differindex fe46f5ff..9db809be 100644 --- a/share/images/mode_new_tab_receive.png +++ b/share/images/mode_new_tab_receive.png diff --git a/share/images/mode_new_tab_share.png b/share/images/mode_new_tab_share.png Binary files differindex bb33318c..92973175 100644 --- a/share/images/mode_new_tab_share.png +++ b/share/images/mode_new_tab_share.png diff --git a/share/images/mode_new_tab_website.png b/share/images/mode_new_tab_website.png Binary files differindex 08cc24a5..86b45f66 100644 --- a/share/images/mode_new_tab_website.png +++ b/share/images/mode_new_tab_website.png diff --git a/share/images/mode_share.png b/share/images/mode_share.png Binary files differindex f2565bd5..ec287db4 100644 --- a/share/images/mode_share.png +++ b/share/images/mode_share.png diff --git a/share/images/mode_website.png b/share/images/mode_website.png Binary files differindex b146f451..37a556d9 100644 --- a/share/images/mode_website.png +++ b/share/images/mode_website.png diff --git a/share/locale/en.json b/share/locale/en.json index c7df27aa..bf5f7626 100644 --- a/share/locale/en.json +++ b/share/locale/en.json @@ -188,6 +188,10 @@ "gui_new_tab_receive_button": "Receive Files", "gui_new_tab_website_button": "Host a Website", "gui_new_tab_chat_button": "Chat Anonymously", + "gui_main_page_share_button": "Start Sharing", + "gui_main_page_receive_button": "Start Receiving", + "gui_main_page_website_button": "Start Hosting", + "gui_main_page_chat_button": "Start Chatting", "gui_tab_name_share": "Share", "gui_tab_name_receive": "Receive", "gui_tab_name_website": "Website", |