Merge pull request #493 from freedomofpress/issue-438-fonts

Begin using Montserrat and Source Sans Pro in Client

securedrop_client/app.py

@@ -31,7 +31,7 @@
 from securedrop_client import __version__
 from securedrop_client.logic import Controller
 from securedrop_client.gui.main import Window
-from securedrop_client.resources import load_icon, load_css
+from securedrop_client.resources import load_icon, load_css, load_font
 from securedrop_client.db import make_session_maker
 from securedrop_client.utils import safe_mkdir
 
@@ -182,6 +182,9 @@ def start_app(args, qt_args) -> None:
     app.setApplicationVersion(__version__)
     app.setAttribute(Qt.AA_UseHighDpiPixmaps)
 
+    load_font('Montserrat')
+    load_font('Source_Sans_Pro')
+
     prevent_second_instance(app, args.sdc_home)
 
     session_maker = make_session_maker(args.sdc_home)

securedrop_client/gui/widgets.py

@@ -93,7 +93,7 @@ def __init__(self):
         # Add widgets to layout
         layout.addWidget(self.refresh, 1)
         layout.addWidget(self.activity_status_bar, 1)
-        layout.addWidget(self.error_status_bar, 5)
+        layout.addWidget(self.error_status_bar, 1)
         layout.addWidget(spacer, 1)
         layout.addWidget(spacer2, 1)
 
@@ -189,14 +189,14 @@ def __init__(self):
             disabled='refresh_offline.svg',
             active='refresh_active.svg',
             selected='refresh.svg',
-            svg_size=QSize(18, 18))
+            svg_size=QSize(16, 16))
 
         # Set css id
         self.setObjectName('refresh_button')
 
         # Set styles
         self.setStyleSheet(self.CSS)
-        self.setFixedSize(QSize(22, 22))
+        self.setFixedSize(QSize(20, 20))
 
         # Click event handler
         self.clicked.connect(self._on_clicked)
@@ -241,7 +241,9 @@ class ActivityStatusBar(QStatusBar):
 
     CSS = '''
     #activity_status_bar {
-        color: #fff;
+        font-family: Source Sans Pro SemiBold;
+        font-size: 12px;
+        color: #d3d8ea;
     }
     '''
 
@@ -295,8 +297,9 @@ class ErrorStatusBar(QWidget):
             stop: 0.2 #fff,
             stop: 1 #fff
         );
-        font-weight: bold;
-        color: #f22b5d;
+        font-family: Source Sans Pro Regular;
+        font-size: 13px;
+        color: #0c3e75;
     }
     '''
 
@@ -320,7 +323,7 @@ def __init__(self):
         self.vertical_bar.setFixedWidth(10)
 
         # Error icon
-        self.label = SvgLabel('error_icon.svg', svg_size=QSize(32, 32))
+        self.label = SvgLabel('error_icon.svg', svg_size=QSize(20, 20))
         self.label.setObjectName('error_icon')  # Set css id
         self.label.setFixedWidth(42)
 
@@ -385,9 +388,8 @@ class UserProfile(QWidget):
         border: none;
         padding: 10px;
         background-color: #b4fffa;
-        font-family: Open Sans;
+        font-family: Source Sans Pro;
         font-size: 16px;
-        font-weight: bold;
         color: #2a319d;
     }
     '''
@@ -457,9 +459,8 @@ class UserButton(SvgPushButton):
         border: none;
         padding-left: 6px;
         background-color: #0093da;
-        font-family: Open Sans;
+        font-family: Source Sans Pro;
         font-size: 14px;
-        font-weight: bold;
         color: #b4fffa;
         text-align: left;
     }
@@ -524,15 +525,8 @@ class LoginButton(QPushButton):
     CSS = '''
     #login {
         border: none;
-        background-color: qlineargradient(
-            x1: 0,
-            y1: 0,
-            x2: 0,
-            y2: 1,
-            stop: 0 #b4fffa,
-            stop: 1 #05edfe
-        );
-        font-family: Open Sans;
+        background-color: #05edfe;
+        font-family: Montserrat SemiBold;
         font-size: 14px;
         color: #2a319d;
     }
@@ -739,14 +733,13 @@ class SourceWidget(QWidget):
         background-color: #9211ff;
     }
     QLabel#source_name {
-        font-family: Open Sans;
-        font-size: 16px;
-        font-weight: bold;
+        font-family: Montserrat Medium;
+        font-size: 13px;
         color: #000;
     }
     QLabel#timestamp {
-        font-family: Open Sans;
-        font-size: 12px;
+        font-family: Montserrat Medium;
+        font-size: 13px;
         color: #000;
     }
     '''
@@ -1001,17 +994,9 @@ class SignInButton(QPushButton):
     CSS = '''
     #login {
         border: none;
-        background-color: qlineargradient(
-            x1: 0,
-            y1: 0,
-            x2: 0,
-            y2: 1,
-            stop: 0 #b4fffa,
-            stop: 1 #05edfe
-        );
-        font-family: Open Sans;
+        background-color: #05edfe;
+        font-family: Montserrat SemiBold;
         font-size: 14px;
-        font-weight: bold;
         color: #2a319d;
     }
     #login:pressed {
@@ -1052,7 +1037,8 @@ class LoginErrorBar(QWidget):
         color: #fff;
     }
     #error_status_bar {
-        font-weight: bold;
+        font-family: Source Sans Pro Regular;
+        font-size: 14px;
         color: #fff;
     }
     '''
@@ -1115,7 +1101,7 @@ class LoginDialog(QDialog):
     CSS = '''
     #login_form QLabel {
         color: #fff;
-        font-weight: bold;
+        font-family: Montserrat Medium;
     }
     #login_form QLineEdit {
         border-radius: 0px;
@@ -1171,7 +1157,7 @@ def __init__(self, parent):
         self.username_label = QLabel(_('Username'))
         self.username_field = QLineEdit()
 
-        self.password_label = QLabel(_('Passphase'))
+        self.password_label = QLabel(_('Passphrase'))
         self.password_field = QLineEdit()
         self.password_field.setEchoMode(QLineEdit.Password)
 
@@ -1294,6 +1280,8 @@ class SpeechBubble(QWidget):
 
     CSS = '''
     #speech_bubble {
+        font-family: Source Sans Pro Regular;
+        font-size: 15px;
         padding: 8px;
         min-height: 32px;
         min-width: 556px;
@@ -1705,11 +1693,25 @@ class ReplyBoxWidget(QWidget):
     A textbox where a journalist can enter a reply.
     """
 
+    CSS = '''
+    #replybox {
+        font-family: Montserrat Regular;
+        font-size: 18px;
+        color: #9c9dbb;
+    }
+    '''
+
     reply_sent = pyqtSignal(str, str, str)
 
     def __init__(self, source: Source, controller: Controller) -> None:
         super().__init__()
 
+        # Set css id
+        self.setObjectName('replybox')
+
+        # Set styles
+        self.setStyleSheet(self.CSS)
+
         layout = QVBoxLayout()
         self.setLayout(layout)
         layout.setContentsMargins(0, 0, 0, 0)
@@ -1830,17 +1832,43 @@ def __init__(self, source, controller):
 class TitleLabel(QLabel):
     """The title for a conversation."""
 
+    CSS = '''
+    #conversation-title-source-name {
+        font-family: Montserrat Regular;
+        font-size: 24px;
+        color: #2a319d;
+    }
+    '''
+
     def __init__(self, text):
-        html_text = _('<h1>{}</h1>').format(text)
-        super().__init__(html_text)
+        super().__init__(_(text))
+
+        # Set css id
+        self.setObjectName('conversation-title-source-name')
+
+        # Set styles
+        self.setStyleSheet(self.CSS)
 
 
 class LastUpdatedLabel(QLabel):
     """Time the conversation was last updated."""
 
+    CSS = '''
+    #conversation-title-date {
+        font-family: Montserrat ExtraLight;
+        font-size: 24px;
+        color: #2a319d;
+    }
+    '''
+
     def __init__(self, last_updated):
-        html_text = _('<h3>{}</h3>').format(arrow.get(last_updated).humanize())
-        super().__init__(html_text)
+        super().__init__(_(_('{}').format(arrow.get(last_updated).humanize())))
+
+        # Set css id
+        self.setObjectName('conversation-title-date')
+
+        # Set styles
+        self.setStyleSheet(self.CSS)
 
 
 class SourceProfileShortWidget(QWidget):

securedrop_client/resources/__init__.py

@@ -17,12 +17,14 @@
 You should have received a copy of the GNU Affero General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 """
+import os
+
 from pkg_resources import resource_filename, resource_string
-from PyQt5.QtGui import QPixmap, QIcon
+from PyQt5.QtGui import QPixmap, QIcon, QFontDatabase
 from PyQt5.QtSvg import QSvgWidget
 from PyQt5.QtCore import QDir
 
-# Add the images and CSS directories to the search path.
+# Add resource directories to the search path.
 QDir.addSearchPath('images', resource_filename(__name__, 'images'))
 QDir.addSearchPath('css', resource_filename(__name__, 'css'))
 
@@ -36,6 +38,13 @@ def path(name: str, resource_dir: str = "images/") -> str:
     return resource_filename(__name__, resource_dir + name)
 
 
+def load_font(font_folder_name: str) -> None:
+    directory = resource_filename(__name__, 'fonts/') + font_folder_name
+    for filename in os.listdir(directory):
+        if filename.endswith(".ttf"):
+            QFontDatabase.addApplicationFont(directory + '/' + filename)
+
+
 def load_toggle_icon(on: str, off: str) -> QIcon:
     """
     Add the contents of Scalable Vector Graphics (SVG) files provided for associated icon states,

securedrop_client/resources/fonts/Montserrat/OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2011 The Montserrat Project Authors (https://github.com/JulietaUla/Montserrat)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.