From 4044e11da245521046364e49df8351ab2cda9fc3 Mon Sep 17 00:00:00 2001 From: Ilya Daynatovich Date: Fri, 2 Sep 2016 12:53:22 +0300 Subject: [PATCH] Set up SASS and change base font --- Makefile | 9 ++- css/{main.css => _base.scss} | 5 +- css/{chat.css => _chat.scss} | 0 css/_contact_list.scss | 62 +++++++++++++++++++ css/{feedback.css => _feedback.scss} | 0 css/{font-awesome.css => _font-awesome.scss} | 0 css/{font.css => _font.scss} | 0 ...{jitsi_popover.css => _jitsi_popover.scss} | 0 ...y-impromptu.css => _jquery-impromptu.scss} | 0 ...ntextMenu.css => _jquery.contextMenu.scss} | 0 ...shortcuts.css => _keyboard-shortcuts.scss} | 0 css/{login_menu.css => _login_menu.scss} | 0 css/{modaldialog.css => _modaldialog.scss} | 0 css/{notice.css => _notice.scss} | 0 css/{overlay.css => _overlay.scss} | 0 css/{popover.css => _popover.scss} | 0 css/{popup_menu.css => _popup_menu.scss} | 0 css/{recording.css => _recording.scss} | 0 css/{settingsmenu.css => _settingsmenu.scss} | 0 css/{toastr.css => _toastr.scss} | 0 ..._browser.css => _unsupported_browser.scss} | 2 +- css/_variables.scss | 5 ++ ..._default.css => _videolayout_default.scss} | 0 css/{welcome_page.css => _welcome_page.scss} | 0 css/contact_list.css | 58 ----------------- css/main.scss | 36 +++++++++++ package.json | 26 +++++--- 27 files changed, 128 insertions(+), 75 deletions(-) rename css/{main.css => _base.scss} (98%) rename css/{chat.css => _chat.scss} (100%) create mode 100644 css/_contact_list.scss rename css/{feedback.css => _feedback.scss} (100%) rename css/{font-awesome.css => _font-awesome.scss} (100%) rename css/{font.css => _font.scss} (100%) rename css/{jitsi_popover.css => _jitsi_popover.scss} (100%) rename css/{jquery-impromptu.css => _jquery-impromptu.scss} (100%) rename css/{jquery.contextMenu.css => _jquery.contextMenu.scss} (100%) rename css/{keyboard-shortcuts.css => _keyboard-shortcuts.scss} (100%) rename css/{login_menu.css => _login_menu.scss} (100%) rename css/{modaldialog.css => _modaldialog.scss} (100%) rename css/{notice.css => _notice.scss} (100%) rename css/{overlay.css => _overlay.scss} (100%) rename css/{popover.css => _popover.scss} (100%) rename css/{popup_menu.css => _popup_menu.scss} (100%) rename css/{recording.css => _recording.scss} (100%) rename css/{settingsmenu.css => _settingsmenu.scss} (100%) rename css/{toastr.css => _toastr.scss} (100%) rename css/{unsupported_browser.css => _unsupported_browser.scss} (96%) create mode 100644 css/_variables.scss rename css/{videolayout_default.css => _videolayout_default.scss} (100%) rename css/{welcome_page.css => _welcome_page.scss} (100%) delete mode 100644 css/contact_list.css create mode 100644 css/main.scss diff --git a/Makefile b/Makefile index aea82dd33..12e520810 100644 --- a/Makefile +++ b/Makefile @@ -1,9 +1,12 @@ NPM = npm BROWSERIFY = ./node_modules/.bin/browserify +NODE_SASS = ./node_modules/.bin/node-sass UGLIFYJS = ./node_modules/.bin/uglifyjs EXORCIST = ./node_modules/.bin/exorcist CLEANCSS = ./node_modules/.bin/cleancss -CSS_FILES = font.css toastr.css main.css overlay.css videolayout_default.css font-awesome.css jquery-impromptu.css modaldialog.css notice.css popup_menu.css recording.css login_menu.css popover.css jitsi_popover.css contact_list.css chat.css welcome_page.css settingsmenu.css feedback.css jquery.contextMenu.css keyboard-shortcuts.css +STYLES_MAIN = css/main.scss +STYLES_BUNDLE = css/all.bundle.css +STYLES_DESTINATION = css/all.css DEPLOY_DIR = libs BROWSERIFY_FLAGS = -d OUTPUT_DIR = . @@ -45,7 +48,9 @@ deploy-lib-jitsi-meet: $(LIBJITSIMEET_DIR)/connection_optimization/external_connect.js \ $(DEPLOY_DIR) deploy-css: - (cd css; cat $(CSS_FILES)) | $(CLEANCSS) > css/all.css + $(NODE_SASS) $(STYLES_MAIN) $(STYLES_BUNDLE) && \ + $(CLEANCSS) $(STYLES_BUNDLE) > $(STYLES_DESTINATION) ; \ + rm $(STYLES_BUNDLE) deploy-local: ([ ! -x deploy-local.sh ] || ./deploy-local.sh) diff --git a/css/main.css b/css/_base.scss similarity index 98% rename from css/main.css rename to css/_base.scss index 67c58e045..8ecc084c8 100644 --- a/css/main.css +++ b/css/_base.scss @@ -14,10 +14,7 @@ html, body{ } html, body, input, textarea, keygen, select, button { - font-family: 'open_sanslight', - 'Helvetica Neue', - Helvetica, - sans-serif !important; + font-family: $baseFontFamily !important; } .right-panel { diff --git a/css/chat.css b/css/_chat.scss similarity index 100% rename from css/chat.css rename to css/_chat.scss diff --git a/css/_contact_list.scss b/css/_contact_list.scss new file mode 100644 index 000000000..6e69a9637 --- /dev/null +++ b/css/_contact_list.scss @@ -0,0 +1,62 @@ +#contactlist { + display: none; + background-color: black; + cursor: default; + + > div.title { + text-align: left; + padding: 7px 10px; + margin: 2px; + color: #21B9FC; + font-size: 11pt; + border-bottom: 1px solid #676767; + + > span { + margin-left: 5px; + } + } + + > ul#contacts { + position: absolute; + top: 31px; + bottom: 0px; + width: 100%; + margin: 0px; + padding: 0px; + overflow-y: scroll; + overflow-x: hidden; + } + + .clickable { + cursor: pointer; + } +} + +#contacts { + + >li { + list-style-type: none; + text-align: left; + color: #FFF; + font-size: 10pt; + padding: 7px 10px; + margin: 2px; + + > p { + display: inline-block; + vertical-align: middle; + margin: 0px; + } + } +} + + +.avatar { + padding: 0px; + margin-right: 10px; + vertical-align: middle; + font-size: 22pt; + border-radius: 20px; + max-height: 30px; + max-width: 30px; +} \ No newline at end of file diff --git a/css/feedback.css b/css/_feedback.scss similarity index 100% rename from css/feedback.css rename to css/_feedback.scss diff --git a/css/font-awesome.css b/css/_font-awesome.scss similarity index 100% rename from css/font-awesome.css rename to css/_font-awesome.scss diff --git a/css/font.css b/css/_font.scss similarity index 100% rename from css/font.css rename to css/_font.scss diff --git a/css/jitsi_popover.css b/css/_jitsi_popover.scss similarity index 100% rename from css/jitsi_popover.css rename to css/_jitsi_popover.scss diff --git a/css/jquery-impromptu.css b/css/_jquery-impromptu.scss similarity index 100% rename from css/jquery-impromptu.css rename to css/_jquery-impromptu.scss diff --git a/css/jquery.contextMenu.css b/css/_jquery.contextMenu.scss similarity index 100% rename from css/jquery.contextMenu.css rename to css/_jquery.contextMenu.scss diff --git a/css/keyboard-shortcuts.css b/css/_keyboard-shortcuts.scss similarity index 100% rename from css/keyboard-shortcuts.css rename to css/_keyboard-shortcuts.scss diff --git a/css/login_menu.css b/css/_login_menu.scss similarity index 100% rename from css/login_menu.css rename to css/_login_menu.scss diff --git a/css/modaldialog.css b/css/_modaldialog.scss similarity index 100% rename from css/modaldialog.css rename to css/_modaldialog.scss diff --git a/css/notice.css b/css/_notice.scss similarity index 100% rename from css/notice.css rename to css/_notice.scss diff --git a/css/overlay.css b/css/_overlay.scss similarity index 100% rename from css/overlay.css rename to css/_overlay.scss diff --git a/css/popover.css b/css/_popover.scss similarity index 100% rename from css/popover.css rename to css/_popover.scss diff --git a/css/popup_menu.css b/css/_popup_menu.scss similarity index 100% rename from css/popup_menu.css rename to css/_popup_menu.scss diff --git a/css/recording.css b/css/_recording.scss similarity index 100% rename from css/recording.css rename to css/_recording.scss diff --git a/css/settingsmenu.css b/css/_settingsmenu.scss similarity index 100% rename from css/settingsmenu.css rename to css/_settingsmenu.scss diff --git a/css/toastr.css b/css/_toastr.scss similarity index 100% rename from css/toastr.css rename to css/_toastr.scss diff --git a/css/unsupported_browser.css b/css/_unsupported_browser.scss similarity index 96% rename from css/unsupported_browser.css rename to css/_unsupported_browser.scss index 16df46bbd..e1407b7b0 100644 --- a/css/unsupported_browser.css +++ b/css/_unsupported_browser.scss @@ -3,7 +3,7 @@ body { height:100%; background-color: white; color: #424242; - font-family: 'open_sanslight', 'Helvetica Neue', Helvetica, sans-serif; + font-family: $baseFontFamily; font-size: 28px; margin:0; padding:0; diff --git a/css/_variables.scss b/css/_variables.scss new file mode 100644 index 000000000..0a53602d0 --- /dev/null +++ b/css/_variables.scss @@ -0,0 +1,5 @@ +/** +* Style variables +*/ + +$baseFontFamily: 'Helvetica Neue', Helvetica, Arial, sans-serif; \ No newline at end of file diff --git a/css/videolayout_default.css b/css/_videolayout_default.scss similarity index 100% rename from css/videolayout_default.css rename to css/_videolayout_default.scss diff --git a/css/welcome_page.css b/css/_welcome_page.scss similarity index 100% rename from css/welcome_page.css rename to css/_welcome_page.scss diff --git a/css/contact_list.css b/css/contact_list.css deleted file mode 100644 index 3dd0fbc69..000000000 --- a/css/contact_list.css +++ /dev/null @@ -1,58 +0,0 @@ -#contactlist { - display: none; - background-color: black; - cursor: default; -} - -#contactlist>div.title { - text-align: left; - padding: 7px 10px; - margin: 2px; - color: #21B9FC; - font-size: 11pt; - border-bottom: 1px solid #676767; -} - -#contactlist>div.title>span { - margin-left: 5px; -} - -#contactlist>ul#contacts { - position: absolute; - top: 31px; - bottom: 0px; - width: 100%; - margin: 0px; - padding: 0px; - overflow-y: scroll; - overflow-x: hidden; -} - -#contacts>li { - list-style-type: none; - text-align: left; - color: #FFF; - font-size: 10pt; - padding: 7px 10px; - margin: 2px; -} - -#contacts>li>p { - display: inline-block; - vertical-align: middle; - margin: 0px; -} - -.avatar { - padding: 0px; - margin-right: 10px; - vertical-align: middle; - font-size: 22pt; - border-radius: 20px; - max-height: 30px; - max-width: 30px; -} - -#contactlist .clickable { - cursor: pointer; -} \ No newline at end of file diff --git a/css/main.scss b/css/main.scss new file mode 100644 index 000000000..3185d20e0 --- /dev/null +++ b/css/main.scss @@ -0,0 +1,36 @@ +/* Variables BEGIN */ + +@import 'variables'; + +/* Variables END */ + +/* Fonts BEGIN */ + +@import 'font'; +@import 'font-awesome'; + +/* Fonts END */ + +/* Modules BEGIN */ + +@import 'toastr'; +@import 'base'; +@import 'overlay'; +@import 'videolayout_default'; +@import 'jquery-impromptu'; +@import 'modaldialog'; +@import 'notice'; +@import 'popup_menu'; +@import 'recording'; +@import 'login_menu'; +@import 'popover'; +@import 'jitsi_popover'; +@import 'contact_list'; +@import 'chat'; +@import 'welcome_page'; +@import 'settingsmenu'; +@import 'feedback'; +@import 'jquery.contextMenu'; +@import 'keyboard-shortcuts'; + +/* Modules END */ \ No newline at end of file diff --git a/package.json b/package.json index fe9fcbd40..d83b6e334 100644 --- a/package.json +++ b/package.json @@ -35,16 +35,17 @@ "jws": "*" }, "devDependencies": { + "babel-polyfill": "*", + "babel-preset-es2015": "*", + "babelify": "*", "browserify": "11.1.x", "browserify-shim": "^3.8.10", + "clean-css": "*", "exorcist": "*", "jshint": "2.8.0", + "node-sass": "^3.8.0", "precommit-hook": "3.0.0", - "uglify-js": "2.4.24", - "clean-css": "*", - "babelify": "*", - "babel-preset-es2015": "*", - "babel-polyfill": "*" + "uglify-js": "2.4.24" }, "license": "Apache-2.0", "scripts": { @@ -57,13 +58,18 @@ "browserify": { "transform": [ "browserify-shim", - ["babelify", { - "ignore": "node_modules" - }] + [ + "babelify", + { + "ignore": "node_modules" + } + ] ] }, "babel": { - "presets": ["es2015"] + "presets": [ + "es2015" + ] }, "browser": { "jquery": "./node_modules/jquery/dist/jquery.js", @@ -102,7 +108,7 @@ "depends": "jquery:jQuery" }, "jquery-contextmenu": { - "depends": "jquery:jQuery" + "depends": "jquery:jQuery" }, "autosize": { "depends": "jquery:jQuery"