fixed integration of pageHtml

.gitignore

@@ -2,4 +2,5 @@
 .idea/
 .git/
 node_modules/
+dist/pageHtml.plugin.js
 dist/pageHtml.plugin.js.map

src/container/PageHtml.jsx

@@ -15,16 +15,16 @@ class pageHtml extends React.Component {
       data: props.data
         ? props.data
         : { // for debugg purpose
-          PageHtml: {
+          file: {
+            version: '3',
+            text: 'Bonjour ?'
+          },
+          pluginData: {
             name: 'PageHtml',
             componentLeft: 'PageHtml',
             componentRight: 'Timeline',
             customClass: 'wsFilePageHtml',
             icon: 'fa fa-file-word-o'
-          },
-          activeFileContent: {
-            version: '3',
-            text: 'Bonjour ?'
           }
         }
     }
@@ -45,23 +45,23 @@ class pageHtml extends React.Component {
   }
 
   render () {
-    const { PageHtml, activeFileContent } = this.state.data
+    const { file, pluginData } = this.state.data
 
     return (
-      <PopinFixed customClass={`${PageHtml.customClass}`}>
+      <PopinFixed customClass={`${pluginData.customClass}`}>
         <PopinFixedHeader
-          customClass={`${PageHtml.customClass}`}
-          icon={PageHtml.icon}
-          name={activeFileContent.title}
+          customClass={`${pluginData.customClass}`}
+          icon={pluginData.icon}
+          name={file.title}
           onClickCloseBtn={this.handleClickBtnClosePlugin}
         />
 
-        <PopinFixedOption customClass={`${PageHtml.customClass}`} />
+        <PopinFixedOption customClass={`${pluginData.customClass}`} />
 
-        <PopinFixedContent customClass={`${PageHtml.customClass}__contentpage`}>
+        <PopinFixedContent customClass={`${pluginData.customClass}__contentpage`}>
           <PageHtmlComponent
-            version={activeFileContent.version}
-            text={activeFileContent.text}
+            version={file.version}
+            text={file.text}
             key={'PageHtml'}
           />
 

src/css/Variable.styl

@@ -1,13 +0,0 @@
-min-xs = 0px
-max-xs = 575px
-
-min-sm = 576px
-max-sm = 767px
-
-min-md = 768px
-max-md = 991px
-
-min-lg = 992px
-max-lg = 1199px
-
-min-xl = 1200px

src/css/index.styl

@@ -1 +1,160 @@
-@import "Variable"
+@import "../../node_modules/tracim_lib/src/css/Variable.styl"
+
+.wsFilePageHtml
+  width 1200px
+  height calc(100% - 85px)
+  overflow-Y auto
+  &__header
+    background-color htmlColor
+    &__icon
+      .fa-file-word-o
+        color white
+  &__contentpage
+    &__textnote
+      margin 10px
+      border-radius 10px
+      padding 25px
+      height 100%
+      background-color off-white
+      &__latestversion
+        text-align right
+        opacity 0.7
+      &__text
+        font-size 14px
+    &__messagelist
+      min-height 300px
+      &__item
+        &__content
+          color darkGrey
+      &__version
+        margin-top 40px
+        background-color grey-hover
+        &__btn
+          padding 5px 25px
+          border-radius 5px
+          width 145px
+          color white
+          font-size 17px
+          background-color htmlColor
+          & > i
+            margin-right 10px
+            color darkGrey
+            font-size 22px
+          &:hover
+            background-color darkHtmlColor
+          &:focus
+            background-color darkHtmlColor
+        &__date
+          color fontColor
+          font-size 17px
+    &__texteditor
+      &__simpletext
+        &__input
+          &:focus
+            color htmlColor
+            border-color htmlColor
+      &__submit
+        &__btn
+          border-color htmlColor
+          background-color htmlColor
+          color white
+          &:hover
+            border-color htmlColor
+            background-color htmlColor
+          &:focus
+            border-color htmlColor
+            background-color htmlColor
+
+.messagelistOpen
+  .wsFilePageHtml__contentpage__messagelist
+    flex 0
+    min-height 0
+
+.received
+  .wsFilePageHtml__contentpage__messagelist__item__content
+    background-color htmlColor
+
+@media (min-width: max-xs) and (max-width: max-lg)
+  .wsFilePageHtml
+    &__contentpage
+      display block
+      overflow-Y scroll
+      &__textnote
+        margin-right 10px
+        padding 10px 20px
+        width auto
+        overflow-Y hidden
+        &__latestversion
+          padding-top 10px
+      &__wrapper
+        width auto
+      &__texteditor
+        &__simpletext
+          display inline-flex
+          width 60%
+        &__submit
+          display inline-flex
+          margin 10px 0
+          &__btn
+            display flex
+            margin-left 35px
+            &__icon
+              margin-left 15px
+
+@media (min-width: min-lg) and (max-width: max-lg)
+  .wsFilePageHtml
+    width 692px
+    &__contentpage__texteditor__simpletext
+      margin-left 15px
+
+@media (min-width: min-md) and (max-width: max-md)
+  .wsFilePageHtml
+    width 768px
+    &__contentpage__texteditor__simpletext
+      margin-left 25px
+
+@media (min-width: min-sm) and (max-width: max-sm)
+  .wsFilePageHtml
+    top 69px
+    width 576px
+    height calc(100% - 69px)
+    &__contentpage__texteditor__simpletext
+      margin-left 10px
+
+@media (max-width: max-xs)
+  .wsFilePageHtml
+    top 70px
+    height calc(100% - 70px)
+    width 100%
+    box-shadow none
+    &__contentpage
+      display block
+      overflow-Y scroll
+      &__textnote
+        margin-right 10px
+        width auto
+        overflow-Y hidden
+        font-size 15px
+      &__wrapper
+        width auto
+      &__messagelist
+        &__item
+          padding 0 35px 20px 30px
+        &__version
+          &__btn
+            font-size 17px
+            vertical-align middle
+          &__dateversion
+            font-size 15px
+      &__texteditor
+        &__simpletext
+          margin 10px 0
+          display flex
+          width 95%
+          margin-left 10px
+        &__submit
+          &__btn
+            display flex
+            margin 0 auto
+            &__icon
+              margin-left 10px

src/index.js

@@ -5,9 +5,9 @@ import PageHtml from './container/PageHtml.jsx'
 require('./css/index.styl')
 
 const pluginInterface = {
-  renderPlugin: domId => {
+  renderPlugin: (domId, data) => {
     return ReactDOM.render(
-      <PageHtml />
+      <PageHtml file={data} />
       , document.getElementById(domId)
     )
   },

webpack.config.js

@@ -10,19 +10,18 @@ module.exports = {
     path: path.resolve(__dirname, 'dist'),
     filename: isProduction ? 'pageHtml.plugin.js' : 'pageHtml.plugin.dev.js',
     pathinfo: !isProduction,
-    library: isProduction ? 'tracim_plugin_pagehtml' : undefined,
-    libraryTarget: isProduction ? 'umd' : undefined,
-    umdNamedDefine: isProduction
+    library: isProduction ? 'pluginPageHtml' : undefined,
+    libraryTarget: isProduction ? 'var' : undefined,
   },
-  externals: isProduction
-    ? {
-      react: {commonjs: 'react', commonjs2: 'react', amd: 'react', root: '_'},
-      'react-dom': {commonjs: 'react-dom', commonjs2: 'react-dom', amd: 'react-dom', root: '_'},
-      classnames: {commonjs: 'classnames', commonjs2: 'classnames', amd: 'classnames', root: '_'},
-      'prop-types': {commonjs: 'prop-types', commonjs2: 'prop-types', amd: 'prop-types', root: '_'},
-      tracim_lib: {commonjs: 'tracim_lib', commonjs2: 'tracim_lib', amd: 'tracim_lib', root: '_'}
-    }
-    : {},
+  externals: {},
+    // isProduction ? { // Côme - since plugins are imported through <script>, cannot externalize libraries
+    //   react: {commonjs: 'react', commonjs2: 'react', amd: 'react', root: '_'},
+    //   'react-dom': {commonjs: 'react-dom', commonjs2: 'react-dom', amd: 'react-dom', root: '_'},
+    //   classnames: {commonjs: 'classnames', commonjs2: 'classnames', amd: 'classnames', root: '_'},
+    //   'prop-types': {commonjs: 'prop-types', commonjs2: 'prop-types', amd: 'prop-types', root: '_'},
+    //   tracim_lib: {commonjs: 'tracim_lib', commonjs2: 'tracim_lib', amd: 'tracim_lib', root: '_'}
+    // }
+    // : {},
   devServer: {
     contentBase: path.join(__dirname, 'dist/'),
     port: 8071,