status-im
/
status-mobile
mirror of https://github.com/status-im/status-mobile.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Custom fonts loading added to desktop app (#5470) 

* Custom fonts loading added to desktop app

* Fixed fail in tests runnings

* font-weight property removed from couple styles in favor of font aliases
This commit is contained in:
Volodymyr Kozieiev 2018-08-21 16:18:16 +03:00 committed by GitHub
parent 1af763fece
commit 449e5257d5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
19 changed files with 86 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
ci/Jenkinsfile.desktopbuild
View File

@ -28,6 +28,12 @@ external_modules_dir = [
'modules/react-native-status/desktop', 'modules/react-native-status/desktop',
] ]
external_fonts = [
'../../../../../resources/fonts/SF-Pro-Text-Regular.otf',
'../../../../../resources/fonts/SF-Pro-Text-Medium.otf',
'../../../../../resources/fonts/SF-Pro-Text-Light.otf',
]
def gitHubNotify(commentMsg) { def gitHubNotify(commentMsg) {
withCredentials([string(credentialsId: 'GIT_HUB_TOKEN', variable: 'githubToken')]) { withCredentials([string(credentialsId: 'GIT_HUB_TOKEN', variable: 'githubToken')]) {
def ghOutput = sh(returnStdout: true, script: "curl -u status-im:" + githubToken + " -H 'Content-Type: application/json' --data '{\"body\": \"" + commentMsg + "\"}' https://api.github.com/repos/status-im/status-react/issues/" + CHANGE_ID + "/comments") def ghOutput = sh(returnStdout: true, script: "curl -u status-im:" + githubToken + " -H 'Content-Type: application/json' --data '{\"body\": \"" + commentMsg + "\"}' https://api.github.com/repos/status-im/status-react/issues/" + CHANGE_ID + "/comments")
@ -124,6 +130,7 @@ timeout(90) {
cmake -Wno-dev \\ cmake -Wno-dev \\
-DCMAKE_BUILD_TYPE=Release \\ -DCMAKE_BUILD_TYPE=Release \\
-DEXTERNAL_MODULES_DIR='${external_modules_dir.join(";")}' \\ -DEXTERNAL_MODULES_DIR='${external_modules_dir.join(";")}' \\
-DDESKTOP_FONTS='${external_fonts.join(";")}' \\
-DJS_BUNDLE_PATH='${workspace}/${packageFolder}/StatusIm.jsbundle' \\ -DJS_BUNDLE_PATH='${workspace}/${packageFolder}/StatusIm.jsbundle' \\
-DCMAKE_CXX_FLAGS:='-DBUILD_FOR_BUNDLE=1' -DCMAKE_CXX_FLAGS:='-DBUILD_FOR_BUNDLE=1'
""" """
@ -185,6 +192,7 @@ timeout(90) {
cmake -Wno-dev \\ cmake -Wno-dev \\
-DCMAKE_BUILD_TYPE=Release \\ -DCMAKE_BUILD_TYPE=Release \\
-DEXTERNAL_MODULES_DIR='${external_modules_dir.join(";")}' \\ -DEXTERNAL_MODULES_DIR='${external_modules_dir.join(";")}' \\
-DDESKTOP_FONTS='${external_fonts.join(";")}' \\
-DJS_BUNDLE_PATH='${workspace}/${packageFolder}/StatusIm.jsbundle' \\ -DJS_BUNDLE_PATH='${workspace}/${packageFolder}/StatusIm.jsbundle' \\
-DCMAKE_CXX_FLAGS:='-DBUILD_FOR_BUNDLE=1' -DCMAKE_CXX_FLAGS:='-DBUILD_FOR_BUNDLE=1'
""" """

3
desktop/build.bat
View File

@ -24,6 +24,7 @@ SET option
echo "build.bat external modules paths: "%option-e% echo "build.bat external modules paths: "%option-e%
echo "build.bat JS bundle path: "%option-j% echo "build.bat JS bundle path: "%option-j%
echo "build.bat desktop fonts: "%option-f%
echo "build.bat cmake generator: "%option-g% echo "build.bat cmake generator: "%option-g%
@rem Workaround @rem Workaround
@ -31,4 +32,4 @@ echo "build.bat cmake generator: "%option-g%
@rem Build project @rem Build project
echo %CD% echo %CD%
cmake -DCMAKE_BUILD_TYPE=Debug -G %option-g% -DEXTERNAL_MODULES_DIR=%option-e% -DJS_BUNDLE_PATH=%option-j% . && cmake --build . cmake -DCMAKE_BUILD_TYPE=Debug -G %option-g% -DEXTERNAL_MODULES_DIR=%option-e% -DJS_BUNDLE_PATH=%option-j% -DDESKTOP_FONTS=%option-f% . && cmake --build .

7
desktop/build.sh
View File

@ -19,14 +19,19 @@ if [[ $1 == "-j" ]]; then
shift shift
JsBundlePath="$1" JsBundlePath="$1"
fi fi
if [[ $1 == "-f" ]]; then
shift
desktopFonts="$1"
fi
shift shift
done done
echo "build.sh external modules paths: "$ExternalModulesPaths echo "build.sh external modules paths: "$ExternalModulesPaths
echo "build.sh JS bundle path: "$JsBundlePath echo "build.sh JS bundle path: "$JsBundlePath
echo "build.sh desktop fonts: "$desktopFonts
# Workaround # Workaround
rm -rf CMakeFiles CMakeCache.txt cmake_install.cmake Makefile rm -rf CMakeFiles CMakeCache.txt cmake_install.cmake Makefile
# Build project # Build project
cmake -DCMAKE_BUILD_TYPE=Debug -DEXTERNAL_MODULES_DIR="$ExternalModulesPaths" -DJS_BUNDLE_PATH="$JsBundlePath" . && make cmake -DCMAKE_BUILD_TYPE=Debug -DEXTERNAL_MODULES_DIR="$ExternalModulesPaths" -DJS_BUNDLE_PATH="$JsBundlePath" -DDESKTOP_FONTS="$desktopFonts" . && make

15
desktop/main.cpp
View File

@ -11,6 +11,8 @@
// #define BUILD_FOR_BUNDLE // #define BUILD_FOR_BUNDLE
#include <QCommandLineParser> #include <QCommandLineParser>
#include <QDirIterator>
#include <QFontDatabase>
#include <QFile> #include <QFile>
#include <QGuiApplication> #include <QGuiApplication>
#include <QProcess> #include <QProcess>
@ -139,6 +141,17 @@ void saveMessage(QtMsgType type, const QMessageLogContext &context,
void writeLogsToFile(); void writeLogsToFile();
#endif #endif
void loadFontsFromResources() {
QDirIterator it(":", QDirIterator::Subdirectories);
while (it.hasNext()) {
QString resourceFile = it.next();
if (resourceFile.endsWith(".otf", Qt::CaseInsensitive) || resourceFile.endsWith(".ttf", Qt::CaseInsensitive)) {
QFontDatabase::addApplicationFont(resourceFile);
}
}
}
int main(int argc, char **argv) { int main(int argc, char **argv) {
QGuiApplication::setAttribute(Qt::AA_EnableHighDpiScaling); QGuiApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
@ -146,6 +159,8 @@ int main(int argc, char **argv) {
Q_INIT_RESOURCE(react_resources); Q_INIT_RESOURCE(react_resources);
loadFontsFromResources();
#ifdef BUILD_FOR_BUNDLE #ifdef BUILD_FOR_BUNDLE
qInstallMessageHandler(saveMessage); qInstallMessageHandler(saveMessage);
runUbuntuServer(); runUbuntuServer();

2
desktop_files/package-lock.json generated
View File

@ -9357,7 +9357,7 @@
} }
}, },
"react-native": { "react-native": {
"version": "git+https://github.com/status-im/react-native-desktop.git#ce75ef7b3293009e163624e611e6782c8f545924", "version": "git+https://github.com/status-im/react-native-desktop.git#83abc9dcf6b500c9416296cffe6578cf6f9439a2",
"requires": { "requires": {
"absolute-path": "0.0.0", "absolute-path": "0.0.0",
"art": "0.10.2", "art": "0.10.2",

5
desktop_files/package.json
View File

@ -16,6 +16,11 @@
"node_modules/react-native-securerandom/desktop", "node_modules/react-native-securerandom/desktop",
"modules/react-native-status/desktop" "modules/react-native-status/desktop"
], ],
"desktopFonts": [
"../../../../../resources/fonts/SF-Pro-Text-Regular.otf",
"../../../../../resources/fonts/SF-Pro-Text-Medium.otf",
"../../../../../resources/fonts/SF-Pro-Text-Light.otf"
],
"dependencies": { "dependencies": {
"assert": "1.4.1", "assert": "1.4.1",
"asyncstorage-down": "4.0.1", "asyncstorage-down": "4.0.1",

BIN
resources/fonts/SF-Pro-Text-Light.otf Normal file
View File

Binary file not shown.

BIN
resources/fonts/SF-Pro-Text-Medium.otf Normal file
View File

Binary file not shown.

BIN
resources/fonts/SF-Pro-Text-Regular.otf Normal file
View File

Binary file not shown.

22
src/status_im/desktop/platform.cljs
View File

@ -1,17 +1,25 @@
(ns status-im.desktop.platform) (ns status-im.desktop.platform)
(def fonts (def fonts-macos
{:light {:font-family "Roboto-Light"} {:light {:font-family "SFProText-Light"}
:default {:font-family "Roboto-Regular"} :default {:font-family "SFProText-Regular"}
:medium {:font-family "Roboto-Medium"} :medium {:font-family "SFProText-Medium"}
:toolbar-title {:font-family "Roboto-Regular"} :toolbar-title {:font-family "SFProText-Regular"}
:roboto-mono {:font-family "RobotoMono-Medium"}})
(def fonts-linux
{:light {:font-family "Arial" :font-weight 100}
:default {:font-family "Arial" :font-weight 400}
:medium {:font-family "Arial" :font-weight 800}
:toolbar-title {:font-family "Arial" :font-weight 400}
:roboto-mono {:font-family "RobotoMono-Medium"}}) :roboto-mono {:font-family "RobotoMono-Medium"}})
;; Structure to be exported ;; Structure to be exported
(def platform-specific (defn platform-specific [macos]
{:fonts fonts {:fonts (if macos fonts-macos fonts-linux)
:tabs {:tab-shadows? true} :tabs {:tab-shadows? true}
:chats {:action-button? true :chats {:action-button? true
:new-chat-in-toolbar? false :new-chat-in-toolbar? false

3
src/status_im/ui/screens/desktop/main/add_new/styles.cljs
View File

@ -14,8 +14,7 @@
(def new-contact-title-text (def new-contact-title-text
{:font-size 20 {:font-size 20
:color :black :color :black})
:font-weight "600"})
(def new-contact-subtitle (def new-contact-subtitle
{:font-size 14}) {:font-size 14})

8
src/status_im/ui/screens/desktop/main/add_new/views.cljs
View File

@ -25,7 +25,8 @@
[react/view {:style styles/new-contact-view} [react/view {:style styles/new-contact-view}
^{:key "newcontact"} ^{:key "newcontact"}
[react/view {:style styles/new-contact-title} [react/view {:style styles/new-contact-title}
[react/text {:style styles/new-contact-title-text} [react/text {:style styles/new-contact-title-text
:font :medium}
(i18n/label :new-chat)]] (i18n/label :new-chat)]]
[react/text {:style styles/new-contact-subtitle} (i18n/label :contact-code)] [react/text {:style styles/new-contact-subtitle} (i18n/label :contact-code)]
[react/view {:style styles/new-contact-separator}] [react/view {:style styles/new-contact-separator}]
@ -34,6 +35,7 @@
:flex 1 :flex 1
:style styles/add-contact-input :style styles/add-contact-input
:selection-color colors/hawkes-blue :selection-color colors/hawkes-blue
:font :default
:on-change (fn [e] :on-change (fn [e]
(let [native-event (.-nativeEvent e) (let [native-event (.-nativeEvent e)
text (.-text native-event)] text (.-text native-event)]
@ -60,7 +62,8 @@
[react/text {:style styles/new-contact-subtitle} (:name c)]]]))]] [react/text {:style styles/new-contact-subtitle} (:name c)]]]))]]
^{:key "publicchat"} ^{:key "publicchat"}
[react/view {:style styles/new-contact-title} [react/view {:style styles/new-contact-title}
[react/text {:style styles/new-contact-title-text} [react/text {:style styles/new-contact-title-text
:font :medium}
(i18n/label :new-public-group-chat)]] (i18n/label :new-public-group-chat)]]
[react/text {:style styles/new-contact-subtitle} (i18n/label :public-group-topic)] [react/text {:style styles/new-contact-subtitle} (i18n/label :public-group-topic)]
[react/view {:style styles/new-contact-separator}] [react/view {:style styles/new-contact-separator}]
@ -71,6 +74,7 @@
(.setNativeProps % (js-obj "text" "#")) (.setNativeProps % (js-obj "text" "#"))
(reset! topic-input-ref %)) (reset! topic-input-ref %))
:style styles/add-contact-input :style styles/add-contact-input
:font :default
:selection-color colors/hawkes-blue :selection-color colors/hawkes-blue
:on-change (fn [e] :on-change (fn [e]
(let [native-event (.-nativeEvent e) (let [native-event (.-nativeEvent e)

3
src/status_im/ui/screens/desktop/main/chat/styles.cljs
View File

@ -179,5 +179,4 @@
(def chat-title (def chat-title
{:margin-bottom 4 {:margin-bottom 4
:font-size 14 :font-size 14
:color colors/black :color colors/black})
:font-weight "600"})

4
src/status_im/ui/screens/desktop/main/chat/views.cljs
View File

@ -34,7 +34,8 @@
[react/image {:style styles/chat-icon [react/image {:style styles/chat-icon
:source {:uri photo-path}}]) :source {:uri photo-path}}])
[react/view {:style (styles/chat-title-and-type pending?)} [react/view {:style (styles/chat-title-and-type pending?)}
[react/text {:style styles/chat-title} [react/text {:style styles/chat-title
:font :medium}
chat-name] chat-name]
(cond pending? (cond pending?
[react/text {:style styles/add-contact-text [react/text {:style styles/add-contact-text
@ -182,6 +183,7 @@
:multiline true :multiline true
:blur-on-submit true :blur-on-submit true
:style styles/chat-text-input :style styles/chat-text-input
:font :default
:ref #(reset! inp-ref %) :ref #(reset! inp-ref %)
:on-key-press (fn [e] :on-key-press (fn [e]
(let [native-event (.-nativeEvent e) (let [native-event (.-nativeEvent e)

5
src/status_im/ui/screens/desktop/main/tabs/home/styles.cljs
View File

@ -57,9 +57,8 @@
{:flex 1 {:flex 1
:padding-vertical 16}) :padding-vertical 16})
(defn chat-name [current?] (def chat-name
{:font-size 14 {:font-size 14})
:font-weight (if current? "600" :normal)})
(def chat-last-message (def chat-last-message
{:color colors/gray {:color colors/gray

3
src/status_im/ui/screens/desktop/main/tabs/home/views.cljs
View File

@ -48,7 +48,8 @@
[icons/icon :icons/public-chat]) [icons/icon :icons/public-chat])
[react/text {:ellipsize-mode :tail [react/text {:ellipsize-mode :tail
:number-of-lines 1 :number-of-lines 1
:style (styles/chat-name (= current-chat-id chat-id))} :style styles/chat-name
:font (if (= current-chat-id chat-id) :medium :default)}
name]] name]]
[react/text {:ellipsize-mode :tail [react/text {:ellipsize-mode :tail
:number-of-lines 1 :number-of-lines 1

13
src/status_im/ui/screens/desktop/main/tabs/profile/styles.cljs
View File

@ -18,11 +18,13 @@
:align-items :center :align-items :center
:background-color (if active? colors/gray-lighter colors/white)}) :background-color (if active? colors/gray-lighter colors/white)})
(defn profile-row-text [color active?] (defn profile-row-text [color]
{:color color {:color color
:font-weight (if active? "600" :normal)
:font-size 16}) :font-size 16})
(defn profile-row-font [selected?]
(if selected? :medium :default))
(def adv-settings (def adv-settings
{:justify-content :space-between {:justify-content :space-between
:flex-direction :row :flex-direction :row
@ -35,8 +37,7 @@
:height 100}) :height 100})
(def profile-user-name (def profile-user-name
{:font-weight :bold {:font-size 18})
:font-size 18})
(def share-contact-code (def share-contact-code
{:flex-direction :row {:flex-direction :row
@ -93,7 +94,6 @@
(def qr-code-title (def qr-code-title
{:font-size 20 {:font-size 20
:font-weight "600"
:margin-bottom 32}) :margin-bottom 32})
(def qr-code (def qr-code
@ -146,8 +146,7 @@
(def advanced-settings-title (def advanced-settings-title
{:margin 24 {:margin 24
:font-size 20 :font-size 20})
:font-weight "600"})
(def title-separator (def title-separator
{:height 1 {:height 1

16
src/status_im/ui/screens/desktop/main/tabs/profile/views.cljs
View File

@ -20,6 +20,7 @@
[react/image {:source {:uri photo-path} [react/image {:source {:uri photo-path}
:style styles/profile-photo}] :style styles/profile-photo}]
[react/text {:style styles/profile-user-name [react/text {:style styles/profile-user-name
:font :medium
:number-of-lines 1} :number-of-lines 1}
name]]) name]])
@ -38,7 +39,8 @@
tooltip-opacity [:get-in [:tooltips :qr-copied]]] tooltip-opacity [:get-in [:tooltips :qr-copied]]]
[react/view [react/view
[react/view {:style styles/qr-code-container} [react/view {:style styles/qr-code-container}
[react/text {:style styles/qr-code-title} [react/text {:style styles/qr-code-title
:font :medium}
(string/replace (i18n/label :qr-code-public-key-hint) "\n" "")] (string/replace (i18n/label :qr-code-public-key-hint) "\n" "")]
[react/view {:style styles/qr-code} [react/view {:style styles/qr-code}
[qr-code-viewer/qr-code {:value public-key :size 130}]] [qr-code-viewer/qr-code {:value public-key :size 130}]]
@ -61,7 +63,9 @@
wnodes [:settings/network-wnodes]] wnodes [:settings/network-wnodes]]
(let [render-fn (offline-messaging.views/render-row current-wnode-id)] (let [render-fn (offline-messaging.views/render-row current-wnode-id)]
[react/view [react/view
[react/text {:style styles/advanced-settings-title} (i18n/label :advanced-settings)] [react/text {:style styles/advanced-settings-title
:font :medium}
(i18n/label :advanced-settings)]
[react/view {:style styles/title-separator}] [react/view {:style styles/title-separator}]
[react/text {:style styles/mailserver-title} (i18n/label :offline-messaging)] [react/text {:style styles/mailserver-title} (i18n/label :offline-messaging)]
[react/view [react/view
@ -89,12 +93,14 @@
[react/touchable-highlight {:style (styles/profile-row adv-settings-open?) [react/touchable-highlight {:style (styles/profile-row adv-settings-open?)
:on-press #(re-frame/dispatch [:navigate-to (if adv-settings-open? :home :advanced-settings)])} :on-press #(re-frame/dispatch [:navigate-to (if adv-settings-open? :home :advanced-settings)])}
[react/view {:style styles/adv-settings} [react/view {:style styles/adv-settings}
[react/text {:style (styles/profile-row-text colors/black adv-settings-open?)} (i18n/label :t/advanced-settings)] [react/text {:style (styles/profile-row-text colors/black)
:font (if adv-settings-open? :medium :default)}
(i18n/label :t/advanced-settings)]
[vector-icons/icon :icons/forward {:style {:tint-color colors/gray}}]]] [vector-icons/icon :icons/forward {:style {:tint-color colors/gray}}]]]
[react/view {:style (styles/profile-row false)} [react/view {:style (styles/profile-row false)}
[react/touchable-highlight {:on-press #(re-frame/dispatch [:logout])} [react/touchable-highlight {:on-press #(re-frame/dispatch [:logout])}
[react/text {:style (styles/profile-row-text colors/red false)} (i18n/label :t/logout)]] [react/text {:style (styles/profile-row-text colors/red)} (i18n/label :t/logout)]]
[react/view [react/text {:style (styles/profile-row-text colors/gray false)} "V" build/version " (" build/commit-sha ")"]]]]))) [react/view [react/text {:style (styles/profile-row-text colors/gray)} "V" build/version " (" build/commit-sha ")"]]]])))
(views/defview profile-data [] (views/defview profile-data []
(views/letsubs (views/letsubs

2
src/status_im/utils/platform.cljs
View File

@ -25,4 +25,4 @@
(cond (cond
android? android/platform-specific android? android/platform-specific
ios? ios/platform-specific ios? ios/platform-specific
:else desktop/platform-specific)) :else (desktop/platform-specific (if platform (.-isMacOs platform) true))))