From 8bbe5fb6a31e664ab9a502ff863263a60489867f Mon Sep 17 00:00:00 2001 From: sualko Date: Wed, 17 Oct 2018 13:33:44 +0200 Subject: [PATCH] refactor: split scss file --- .editorconfig | 3 + .jsbeautifyrc | 5 - .stylelintrc | 19 +++ scss/_oc.scss | 305 ---------------------------------- scss/index.scss | 13 ++ scss/jsxc.oc.scss | 18 -- scss/modules/_animations.scss | 13 ++ scss/partials/_misc.scss | 177 ++++++++++++++++++++ scss/partials/_nextcloud.scss | 92 ++++++++++ scss/vendor/_jsxc.scss | 42 +++++ ts/ChatIconInjector.ts | 2 +- webpack.config.js | 2 +- 12 files changed, 361 insertions(+), 330 deletions(-) delete mode 100644 .jsbeautifyrc create mode 100644 .stylelintrc delete mode 100644 scss/_oc.scss create mode 100644 scss/index.scss delete mode 100644 scss/jsxc.oc.scss create mode 100644 scss/modules/_animations.scss create mode 100644 scss/partials/_misc.scss create mode 100644 scss/partials/_nextcloud.scss create mode 100644 scss/vendor/_jsxc.scss diff --git a/.editorconfig b/.editorconfig index f068026..06ed7a7 100644 --- a/.editorconfig +++ b/.editorconfig @@ -13,3 +13,6 @@ charset = utf-8 indent_style = space indent_size = 3 quote_type = single + +[scss/**.scss] +indent_size = 2 diff --git a/.jsbeautifyrc b/.jsbeautifyrc deleted file mode 100644 index d3dd4e8..0000000 --- a/.jsbeautifyrc +++ /dev/null @@ -1,5 +0,0 @@ -{ - "indent_size": 3, - "indent_char": " ", - "end_with_newline": true -} diff --git a/.stylelintrc b/.stylelintrc new file mode 100644 index 0000000..a579427 --- /dev/null +++ b/.stylelintrc @@ -0,0 +1,19 @@ +{ + "extends": "stylelint-config-sass-guidelines", + "rules": { + "string-quotes": "double", + "selector-max-id": 1, + "max-nesting-depth": 5, + "selector-max-compound-selectors": 5, + "selector-no-qualifying-type": [true, { + "ignore": ["attribute", "class", "id"] + }], + "selector-class-pattern": [ + "^[a-z0-9_\\-]+$", + { + "message": + "Selector should be written in lowercase with hyphens and underscores (selector-class-pattern)" + } + ] + } +} diff --git a/scss/_oc.scss b/scss/_oc.scss deleted file mode 100644 index 1bbc173..0000000 --- a/scss/_oc.scss +++ /dev/null @@ -1,305 +0,0 @@ -@keyframes jsxc-left-to-right { - 0% { - background-position-x: 0%; - } - - 50% { - background-position-x: 100%; - } - - 100% { - background-position-x: 0%; - } -} - -#jsxc-roster { - padding-top: 5px; // NC >= 14 - top: 45px; - z-index: 1500; -} - -#jsxc_toggleRoster { - width: 8px; -} - -#jsxc-window-list, #jsxc_windowListSB { - z-index: 1500; -} - -.jsxc-dialog-wrapper { - z-index: 1600; -} - -#jsxc { - padding: 20px; - - h1 { - margin: 15px 0 5px; - font-size: 1.5em; - } - - a { - color: blue; - text-decoration: underline; - - &:hover { - text-decoration: none; - } - } -} - -#jsxc_submit { - font-size: 15px; - padding: 3px 5px; - opacity: 1; - font-weight: normal; - - &:hover { - opacity: 0.7; - } -} - -#ojsxc { - .form-group { - overflow: hidden; - - > label, > .form-col { - float: left; - } - } - - label { - box-sizing: border-box; - padding: 6px 15px 6px 0; - width: 100%; - margin: 3px 0; - - @media (min-width: 768px) { - width: 33%; - text-align: right; - } - } - - .form-no-padding { - padding: 0; - } - - .form-col { - width: 100%; - overflow: hidden; - - @media (min-width: 768px) { - width: 66%; - } - - input { - display: block; - } - } - - .form-col-offset { - @media (min-width: 768px) { - padding-left: 33%; - } - } - - input { - box-sizing: border-box; - padding-right: 15px; - width: 100%; - - &[type='checkbox'] { - margin: 13px 0; - width: auto; - min-height: auto; - height: auto; - } - - &[type='radio'] { - width: auto; - min-height: auto; - height: auto; - } - - &[readonly] { - background-color: #f1f1f1; - } - - &:invalid { - border: 1px solid red; - position: relative; - } - - &.jsxc-loading { - background-image: linear-gradient(to right, #fff, #fff); - background-position-x: 10%; - background-size: 30px 100%; - background-repeat: no-repeat; - animation: jsxc-left-to-right 5s linear infinite; - } - } - - em, .boshUrl-msg { - display: block; - clear: left; - margin-bottom: 0.8em; - } - - .text-left { - text-align: left; - } - - h3 { - width: 100%; - - @media (min-width: 768px) { - width: 33%; - border-bottom: 1px solid #e1e1e1; - } - } - - .text { - margin-bottom: 10px; - } -} - -%msg { - border: 1px solid #fff; - color: #030; - padding: 11px; - padding-left: 38px; - background-position: 12px center; - background-repeat: no-repeat; - background-color: #f1f1f1; - margin: 3px; -} - -.jsxc_success { - @extend %msg; - - background-image: url("../img/checkmark-green.svg"); -} - -.jsxc_fail { - @extend %msg; - - background-image: url("../img/cross-red.svg"); - background-position: 12px 5px; -} - -.jsxc_log { - width: 500px; -} - -#mainContainer, #odf-toolbar { - right: 0; - left: 0; - width: auto !important; - z-index: 70 !important; -} - -#header .jsxc_chatIcon { - width: 45px; - height: 45px; - float: right; - background-image: url("../img/chat-icon-white.svg"); - background-size: 20px; - background-repeat: no-repeat; - background-position: center; - opacity: 0.7; - cursor: pointer; - - &:hover { - opacity: 1; - } -} - -@media (min-width: 768px) { - #content, #content-wrapper, #filestable > thead { - padding-right: 0; - transition: padding-right 0.5s; - } - - #mainContainer, #odf-toolbar, #app-sidebar { - right: 0; - transition: right 0.5s; - } - - .app-mail .submit-message-wrapper { - transition: right 0.5s; - - .submit-message { - transition: right 0.5s; - } - } - - .jsxc-roster-shown { - #content, #content-wrapper, #filestable > thead { - padding-right: 210px; - } - - #mainContainer, #odf-toolbar, #app-sidebar { - right: 210px; - } - - .app-mail .submit-message-wrapper { - right: 225px; - - .submit-message { - right: 225px; - } - } - - #app-content.with-app-sidebar { - padding-right: 50px; - } - } -} - -#body-login { - #jsxc_windowList, #jsxc_roster { - display: none; - } -} - -#contactsmenu-contacts { - .jsxc_statusIndicator { - position: relative; - - &:before { - width: 6px; - height: 6px; - right: 13px; - top: 13px; - position: absolute; - } - } - - .contact { - &:before { - position: absolute; - top: 7px; - left: 7px; - } - - .avatar { - cursor: pointer; - } - } -} - -.nav-icon-javascript-xmpp-client { - background-image: url("../img/app-black.svg"); -} - -.jsxc-internal-server { - #jsxc_buddylist .jsxc_more { - display: none; - } - - #jsxc_menu { - .jsxc_joinChat, .jsxc_addBuddy { - display: none; - } - } -} diff --git a/scss/index.scss b/scss/index.scss new file mode 100644 index 0000000..3bcd26d --- /dev/null +++ b/scss/index.scss @@ -0,0 +1,13 @@ +//fonts +$font-sans: Arial, sans-serif; +$font-serif: serif; + +$window-bar-bg: #0082c9; +$window-bar-color: #c0dff1; +$window-bar-color-hover: #fff; + +@import "modules/animations"; +@import "vendor/jsxc"; + +@import "partials/nextcloud"; +@import "partials/misc"; diff --git a/scss/jsxc.oc.scss b/scss/jsxc.oc.scss deleted file mode 100644 index 9522f27..0000000 --- a/scss/jsxc.oc.scss +++ /dev/null @@ -1,18 +0,0 @@ -//fonts -$font_sans: Arial, sans-serif; -$font_serif: serif; - -$window_bar_bg: #0082c9; -$window_bar_color: #c0dff1; -$window_bar_color_hover: #fff; - -@import "oc"; - -.jsxc-bar--window, .jsxc-window-item .jsxc-memberlist { - background-color: $window_bar_bg; - color: $window_bar_color; - - :hover { - // color: $window_bar_color_hover; - } -} diff --git a/scss/modules/_animations.scss b/scss/modules/_animations.scss new file mode 100644 index 0000000..b1996a0 --- /dev/null +++ b/scss/modules/_animations.scss @@ -0,0 +1,13 @@ +@keyframes jsxc-left-to-right { + 0% { + background-position-x: 0%; + } + + 50% { + background-position-x: 100%; + } + + 100% { + background-position-x: 0%; + } +} diff --git a/scss/partials/_misc.scss b/scss/partials/_misc.scss new file mode 100644 index 0000000..216f281 --- /dev/null +++ b/scss/partials/_misc.scss @@ -0,0 +1,177 @@ +#jsxc_submit { + font-size: 15px; + padding: 3px 5px; + opacity: 1; + font-weight: normal; + + &:hover { + opacity: 0.7; + } +} + +#ojsxc { + .form-group { + overflow: hidden; + + >label, + >.form-col { + float: left; + } + } + + label { + box-sizing: border-box; + padding: 6px 15px 6px 0; + width: 100%; + margin: 3px 0; + + @media (min-width: 768px) { + width: 33%; + text-align: right; + } + } + + .form-no-padding { + padding: 0; + } + + .form-col { + width: 100%; + overflow: hidden; + + @media (min-width: 768px) { + width: 66%; + } + + input { + display: block; + } + } + + .form-col-offset { + @media (min-width: 768px) { + padding-left: 33%; + } + } + + input { + box-sizing: border-box; + padding-right: 15px; + width: 100%; + + &[type='checkbox'] { + margin: 13px 0; + width: auto; + min-height: auto; + height: auto; + } + + &[type='radio'] { + width: auto; + min-height: auto; + height: auto; + } + + &[readonly] { + background-color: #f1f1f1; + } + + &:invalid { + border: 1px solid red; + position: relative; + } + + &.jsxc-loading { + background-image: linear-gradient(to right, #fff, #fff); + background-position-x: 10%; + background-size: 30px 100%; + background-repeat: no-repeat; + animation: jsxc-left-to-right 5s linear infinite; + } + } + + em, + .boshUrl-msg { + display: block; + clear: left; + margin-bottom: 0.8em; + } + + .text-left { + text-align: left; + } + + h3 { + width: 100%; + + @media (min-width: 768px) { + width: 33%; + border-bottom: 1px solid #e1e1e1; + } + } + + .text { + margin-bottom: 10px; + } +} + +%msg { + border: 1px solid #fff; + color: #030; + padding: 11px; + padding-left: 38px; + background-position: 12px center; + background-repeat: no-repeat; + background-color: #f1f1f1; + margin: 3px; +} + +.jsxc_success { + @extend %msg; + + background-image: url("../img/checkmark-green.svg"); +} + +.jsxc_fail { + @extend %msg; + + background-image: url("../img/cross-red.svg"); + background-position: 12px 5px; +} + + + +#header .ojsxc-chat-icon { + width: 45px; + height: 45px; + float: right; + background-image: url("../img/chat-icon-white.svg"); + background-size: 20px; + background-repeat: no-repeat; + background-position: center; + opacity: 0.7; + cursor: pointer; + + &:hover { + opacity: 1; + } +} + + +.nav-icon-javascript-xmpp-client { + background-image: url("../img/app-black.svg"); +} + +.jsxc-internal-server { + #jsxc_buddylist .jsxc_more { + display: none; + } + + #jsxc_menu { + + .jsxc_joinChat, + .jsxc_addBuddy { + display: none; + } + } +} diff --git a/scss/partials/_nextcloud.scss b/scss/partials/_nextcloud.scss new file mode 100644 index 0000000..6bf6a5c --- /dev/null +++ b/scss/partials/_nextcloud.scss @@ -0,0 +1,92 @@ +#mainContainer, +#odf-toolbar { + right: 0; + left: 0; + width: auto !important; + z-index: 70 !important; +} + +#body-login { + #jsxc_windowList, + #jsxc_roster { + display: none; + } +} + +#contactsmenu-contacts { + .jsxc_statusIndicator { + position: relative; + + &:before { + width: 6px; + height: 6px; + right: 13px; + top: 13px; + position: absolute; + } + } + + .contact { + &:before { + position: absolute; + top: 7px; + left: 7px; + } + + .avatar { + cursor: pointer; + } + } +} + +@media (min-width: 768px) { + + #content, + #content-wrapper, + #filestable>thead { + padding-right: 0; + transition: padding-right 0.5s; + } + + #mainContainer, + #odf-toolbar, + #app-sidebar { + right: 0; + transition: right 0.5s; + } + + .app-mail .submit-message-wrapper { + transition: right 0.5s; + + .submit-message { + transition: right 0.5s; + } + } + + .jsxc-roster-shown { + + #content, + #content-wrapper, + #filestable>thead { + padding-right: 210px; + } + + #mainContainer, + #odf-toolbar, + #app-sidebar { + right: 210px; + } + + .app-mail .submit-message-wrapper { + right: 225px; + + .submit-message { + right: 225px; + } + } + + #app-content.with-app-sidebar { + padding-right: 50px; + } + } +} diff --git a/scss/vendor/_jsxc.scss b/scss/vendor/_jsxc.scss new file mode 100644 index 0000000..97089e2 --- /dev/null +++ b/scss/vendor/_jsxc.scss @@ -0,0 +1,42 @@ +.jsxc-bar--window, +.jsxc-window-item .jsxc-memberlist { + background-color: $window-bar-bg; + color: $window-bar-color; + + :hover { + // color: $window_bar_color_hover; + } +} + +#jsxc { + padding: 20px; + + h1 { + margin: 15px 0 5px; + font-size: 1.5em; + } + + a { + color: blue; + text-decoration: underline; + + &:hover { + text-decoration: none; + } + } +} + +#jsxc-roster { + padding-top: 5px; // NC >= 14 + top: 45px; + z-index: 1500; +} + +#jsxc-window-list, +#jsxc_windowListSB { + z-index: 1500; +} + +.jsxc-dialog-wrapper { + z-index: 1600; +} diff --git a/ts/ChatIconInjector.ts b/ts/ChatIconInjector.ts index 7e7ce9d..3e102a0 100644 --- a/ts/ChatIconInjector.ts +++ b/ts/ChatIconInjector.ts @@ -2,7 +2,7 @@ export default function injectChatIcon() { var div = $('
'); - div.addClass('jsxc_chatIcon'); + div.addClass('ojsxc-chat-icon'); div.click(function() { jsxc.toggleRoster(); }); diff --git a/webpack.config.js b/webpack.config.js index 485b5a3..9da159b 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -16,7 +16,7 @@ const fileLoader = { }; module.exports = { - entry: ['./scss/jsxc.oc.scss', './ts/index.ts'], + entry: ['./scss/index.scss', './ts/index.ts'], output: { filename: 'js/bundle.js', path: path.resolve(__dirname, DESTINATION_DIR),