change css config

Fyns · Jul 11, 2017 · cee771e · cee771e
1 parent 9aca3a6
commit cee771e
Show file tree

Hide file tree

Showing 21 changed files with 102 additions and 96 deletions.
diff --git a/config/webpack.config.base.js b/config/webpack.config.base.js
@@ -13,13 +13,15 @@ export default {
             },
             {
                 test: /\.css$/,
+                exclude: [/icomoon\/style.css$/, /global.css$/],
                 use: [
                     'style-loader',
                     {
                         loader: 'css-loader',
                         options: {
                             // Note that we’ve set importLoaders: 1 on css-loader.
                             // We’re setting this because we want PostCSS to git @import statements first
+                            modules: true,
                             importLoaders: 1,
                             localIdentName: '[path][name]__[local]--[hash:base64:5]'
                         },
@@ -42,6 +44,20 @@ export default {
                     }
                 ],
             },
+            {
+                test: /icomoon\/style.css$/,
+                use: [
+                    'style-loader',
+                    'css-loader',
+                ],
+            },
+            {
+                test: /global.css$/,
+                use: [
+                    'style-loader',
+                    'css-loader',
+                ],
+            },
             {
                 test: /\.json$/,
                 loader: 'json-loader',

diff --git a/src/global.css b/src/global.css
@@ -1,9 +1,5 @@
 
-::-webkit-scrollbar {
-    width: 0px;
-}
-
-:global * {
+* {
     user-select: none;
 }
 
@@ -12,7 +8,7 @@ body {
     margin: 0;
     padding: 0;
     -webkit-font-smoothing: antialiased;
-	text-rendering: optimizeLegibility;
+    text-rendering: optimizeLegibility;
     background: none;
     overflow: hidden;
 }
@@ -3240,3 +3236,7 @@ label {
 .emoji_face .emoji176 {
     background-position: -350px -350px
 }
+
+::-webkit-scrollbar {
+    width: 0px;
+}
diff --git a/src/js/components/Avatar/index.js b/src/js/components/Avatar/index.js
@@ -2,7 +2,7 @@
 import React, { Component, PropTypes } from 'react';
 import clazz from 'classname';
 
-import './style.css';
+import './style.global.css';
 
 export default class Avatar extends Component {
     static propTypes = {

diff --git a/src/js/components/Avatar/style.css → src/js/components/Avatar/style.global.css b/src/js/components/Avatar/style.css → src/js/components/Avatar/style.global.css
diff --git a/src/js/components/Loader/index.js b/src/js/components/Loader/index.js
@@ -3,7 +3,7 @@ import React, { Component, PropTypes } from 'react';
 import Transition from 'react-addons-css-transition-group';
 import clazz from 'classname';
 
-import './style.css';
+import './style.global.css';
 
 export default class Button extends Component {
     static PropTypes = {

diff --git a/src/js/components/Loader/style.css → src/js/components/Loader/style.global.css b/src/js/components/Loader/style.css → src/js/components/Loader/style.global.css
@@ -1,4 +1,5 @@
 
+:global
 .Loader {
     position: absolute;
     top: 0;

diff --git a/src/js/components/Modal/style.css b/src/js/components/Modal/style.css
@@ -1,4 +1,5 @@
 
+:global
 .Modal-overlay {
     position: fixed;
     top: 0;
@@ -9,6 +10,7 @@
     z-index: 999;
 }
 
+:global
 .Modal-header {
     position: relative;
     padding: 8px 20px 4px;
@@ -26,10 +28,12 @@
     }
 }
 
+:global
 .Modal-footer {
     padding: 8px 12px;
 }
 
+:global
 .Modal-content {
     position: fixed;
     top: 50%;
@@ -48,12 +52,14 @@
     }
 }
 
+:global
 .Modal-body {
     padding: 12px;
     background: #fff;
     box-shadow: 0 1px 4px rgba(0,0,0,0.3);
 }
 
+:global
 .Modal-overlay-enter {
     opacity: 0;
     visibility: hidden;
@@ -65,6 +71,7 @@
     }
 }
 
+:global
 .Modal-overlay-leave {
     opacity: 1;
     visibility: visible;
@@ -76,6 +83,7 @@
     }
 }
 
+:global
 .Modal-body-enter {
     transform: translate(-50%, -50%) scale(.8);
     opacity: 0;
@@ -87,6 +95,7 @@
     }
 }
 
+:global
 .Modal-body-leave {
     transform: translate(-50%, -50%);
     opacity: 1;

diff --git a/src/js/components/Switch/index.js b/src/js/components/Switch/index.js
@@ -2,7 +2,7 @@
 import React, { Component } from 'react';
 
 import blacklist from 'utils/blacklist';
-import './style.css';
+import './style.global.css';
 
 export default class Switch extends Component {
     render() {

diff --git a/src/js/components/Switch/style.css → src/js/components/Switch/style.global.css b/src/js/components/Switch/style.css → src/js/components/Switch/style.global.css
diff --git a/src/js/pages/Contacts/style.css b/src/js/pages/Contacts/style.css
@@ -3,7 +3,6 @@
     --column-width: 274px;
 }
 
-:local
 .columns {
     display: flex;
     padding-bottom: 24px;
@@ -12,7 +11,6 @@
     justify-content: space-between;
 }
 
-:local
 .notfound {
     display: flex;
     height: 100vh;
@@ -30,7 +28,6 @@
     }
 }
 
-:local
 .inner {
     text-align: center;
 
@@ -40,20 +37,17 @@
     }
 }
 
-:local
 .column {
     width: var(--column-width);
 }
 
-:local
 .group {
     width: var(--column-width);
     padding: 8px 0;
     margin-bottom: 24px;
     box-shadow: 0 0 10px 0 rgba(119, 119, 119, 50%);
 }
 
-:local
 .header {
     position: relative;
     width: 140px;
@@ -80,7 +74,6 @@
     }
 }
 
-:local
 .item {
     display: flex;
     height: 40px;
@@ -103,20 +96,19 @@
     }
 }
 
-:local .avatar,
-:local .info {
+.avatar,
+.info {
     display: inline-block;
 }
 
-:local .username,
-:local .signature {
+.username,
+.signature {
     max-width: 200px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }
 
-:local
 .username {
     font-family: 'Helvetica';
     font-size: 14px;
@@ -125,7 +117,6 @@
     margin-bottom: 4px;
 }
 
-:local
 .signature {
     font-family: 'Helvetica';
     font-size: 12px;

diff --git a/src/js/pages/Footer/style.css b/src/js/pages/Footer/style.css
@@ -5,7 +5,6 @@
     --shadow-color: #eaedea;
 }
 
-:local
 .footer {
     position: fixed;
     left: 0;
@@ -43,7 +42,6 @@
     }
 }
 
-:local
 .footer .active {
     position: relative;
     &:after {
@@ -61,16 +59,15 @@
     }
 }
 
-:local
 .right {
     position: fixed;
     bottom: 0;
     right: 0;
     width: calc(100% - 311px);
 }
 
-:local .home,
-:local .contacts {
+.home,
+.contacts {
     display: flex;
     height: 60px;
     align-items: center;
@@ -100,7 +97,7 @@
     }
 }
 
-:local .home {
+.home {
 
     & .action {
         width: 105px;
@@ -114,15 +111,15 @@
     }
 }
 
-:local .contacts {
+.contacts {
     & .action {
         margin-right: 17px;
         display: flex;
         justify-content: space-between;
     }
 }
 
-:local .settings {
+.settings {
     display: flex;
     height: 60px;
     text-align: right;
@@ -161,7 +158,7 @@
     }
 }
 
-:local .button {
+.button {
     position: relative;
     margin-right: 17px;
     width: 166px;
@@ -185,7 +182,7 @@
     }
 }
 
-:local .options {
+.options {
     display: inline-block;
     margin-right: 12px;
     font-family: 'Roboto';

diff --git a/src/js/pages/Header/style.css b/src/js/pages/Header/style.css
@@ -1,5 +1,4 @@
 
-:local
 .container h1 {
     height: 40px;
     line-height: 40px;

diff --git a/src/js/pages/Home/ChatContent/index.js b/src/js/pages/Home/ChatContent/index.js
@@ -30,26 +30,14 @@ export default class ChatContent extends Component {
 
     renderMessages(list, from) {
         return list.map((e, index) => {
-            if (e.isme) {
-                return (
-                    <div className={clazz(classes.message, classes.isme)} key={index}>
-                        <div>
-                            <Avatar src={from.HeadImgUrl} className={classes.avatar} onClick={e => this.props.showUserinfo()} />
-
-                            <div className={classes.content}>
-                                <p dangerouslySetInnerHTML={{__html: this.getMessageContent(e)}} />
-
-                                <span className={classes.times}>{ moment(e.CreateTime * 1000).fromNow() }</span>
-                            </div>
-                        </div>
-                    </div>
-                );
-            }
-
             return (
-                <div className={classes.message} key={index}>
+                <div className={clazz(classes.message, {
+                    [classes.isme]: e.isme,
+                    [classes.isText]: e.MsgType === 1,
+                    [classes.isImage]: e.MsgType === 3,
+                })} key={index}>
                     <div>
-                        <Avatar src={from.HeadImgUrl} className={classes.avatar} onClick={e => this.props.showUserinfo()} />
+                        <Avatar src={e.isme ? e.HeadImgUrl : from.HeadImgUrl} className={classes.avatar} onClick={e => this.props.showUserinfo()} />
 
                         <div className={classes.content}>
                             <p dangerouslySetInnerHTML={{__html: this.getMessageContent(e)}} />