@aj-shadow/actorjs-app 0.0.0-aj-beta.221

package/project/client/components/middle/test-suites/tabs/middle-test-suites-tab-sequence-diagram.jsx

@@ -0,0 +1,155 @@
+
+'use strict';
+
+import TestSuiteStore from '../../../../stores/test-suite-store';
+import LoginStore from '../../../../stores/login-store';
+import { ActionTestSuiteButtonsUpdate } from '../../../../actions/action-test-suite/action-test-suite';
+import StyleStore from 'z-abs-complayer-markup-client/client/stores/style-store';
+import Const from 'z-abs-complayer-visualizationsequencediagram-client/client/logic/const';
+import SeqDiaFilter from 'z-abs-complayer-visualizationsequencediagram-client/client/logic/seq-dia-filter';
+import RealtimeZoom from 'z-abs-complayer-bootstrap-client/client/realtime-components/realtime-zoom';
+import RealtimeWidth from 'z-abs-complayer-bootstrap-client/client/realtime-components/realtime-width';
+import RealtimePressDownButton from 'z-abs-complayer-bootstrap-client/client/realtime-components/realtime-press-down-button';
+import SequenceDiagram from 'z-abs-complayer-visualizationsequencediagram-client/client/react-component/sequence-diagram';
+import ActorPhaseConst from 'z-abs-funclayer-engine-cs/clientServer/execution/actor-phase-const';
+import ReactComponentRealtime from 'z-abs-corelayer-client/client/react-component/react-component-realtime';
+import React from 'react';
+
+
+export default class MiddleTestSuitesTabSequenceDiagram extends ReactComponentRealtime {
+  constructor(props) {
+    super(props, [TestSuiteStore, LoginStore, StyleStore]);
+    this.refZoomDisplay = React.createRef();
+    this.refWidthDisplay = React.createRef();
+    this.refSeqDia = React.createRef();
+    this.refScrollButton = null;
+    this.filter = new SeqDiaFilter();
+    this.filter.init(this.state.TestSuiteStore.buttons.sequenceDiagram);
+    this.cbIsRealtime = () => {
+      return this.state.TestSuiteStore.execution !== TestSuiteStore.EXECUTION_NOT_RUNNING;
+    };
+  }
+  
+  static SHOW_HIDE = ['Show', 'Hide'];
+  
+  didMount() {
+    this.refSeqDia.current.active(this.props.active);
+  }
+  
+  shouldUpdate(nextProps, nextState) {
+    return !this.shallowCompare(this.props.active, nextProps.active)
+      || !this.shallowCompare(this.state.TestSuiteStore.error, nextState.TestSuiteStore.error)
+      || !this.shallowCompare(this.state.TestSuiteStore.testSuite, nextState.TestSuiteStore.testSuite)
+      || !this.shallowCompare(this.state.TestSuiteStore.buttonsLoaded, nextState.TestSuiteStore.buttonsLoaded)
+      || !this.shallowCompare(this.state.TestSuiteStore.buttons.sequenceDiagram, nextState.TestSuiteStore.buttons.sequenceDiagram)
+      || !this.shallowCompare(this.state.LoginStore.login.systemUnderTest, nextState.LoginStore.login.systemUnderTest)
+      || !this.shallowCompare(this.state.StyleStore.stackStyles, nextState.StyleStore.stackStyles);
+  }
+  
+  didUpdate(prevProps, prevState) {
+    this.refSeqDia.current.active(this.props.active);
+  }
+  
+  realtimeUpdate(nextProps, nextState) {
+    this.refSeqDia.current.active(nextProps.active);
+  }
+  
+  _fireButtonAction(valueName, value, rt) {
+    this.dispatch(TestSuiteStore, new ActionTestSuiteButtonsUpdate('sequenceDiagram', valueName, value));
+    if(this.cbIsRealtime()) {
+      this.renderRealtime(() => {
+        rt();
+      });
+    }
+  }
+  
+  render() {
+    if(this.state.TestSuiteStore.error) {
+      return (
+        <div className="test_cases_tab_view">
+          ERROR
+        </div>
+      );
+    }
+    else {
+      const stateSequenceDiagram = this.state.TestSuiteStore.buttons.sequenceDiagram;
+      return (
+        <>
+          <div className="seq_dia_panel">
+            <div className="seq_dia_panel_inner btn-toolbar" role="toolbar" aria-label="...">
+              <div className="aj_btn_group" role="group" aria-label="...">
+                <RealtimeZoom zoom={stateSequenceDiagram.zoom} colorMark="zoom_events" 
+                  onAction={(zoom) => {
+                    this.dispatch(TestSuiteStore, new ActionTestSuiteButtonsUpdate('sequenceDiagram', 'zoom', zoom));
+                  }}
+                />
+              </div>
+              <div className="aj_btn_group" role="group" aria-label="...">
+                <RealtimeWidth width={stateSequenceDiagram.width} colorMark="zoom_events" 
+                  onAction={(width) => {
+                    this.dispatch(TestSuiteStore, new ActionTestSuiteButtonsUpdate('sequenceDiagram', 'width', width));
+                  }}
+                />
+              </div>  
+              <div className="aj_btn_group" role="group" aria-label="...">
+                <RealtimePressDownButton size="aj_btn_xs" buttonValue={stateSequenceDiagram.scroll} icon={'icon-scroll-auto'} toolTipContent={['On', 'Off']} toolTipHeading="Auto scroll"
+                  onLoad={(e) => {
+                    this.refScrollButton = e;
+                  }}
+                  onAction={this._fireButtonAction.bind(this, 'scroll')}
+                />
+              </div>
+              <div className="aj_btn_group" role="group" aria-label="...">
+                <RealtimePressDownButton size="aj_btn_xs" buttonValue={stateSequenceDiagram.executedStateEvents} icon={'icon-state-event-executed'} toolTipContent="Executed State Events" toolTipHeading={MiddleTestSuitesTabSequenceDiagram.SHOW_HIDE} onAction={this._fireButtonAction.bind(this, 'executedStateEvents')} />
+                <RealtimePressDownButton size="aj_btn_xs" buttonValue={stateSequenceDiagram.notExecutedStateEvents} icon={'icon-state-event-not-executed'} toolTipContent="Not Executed State Events" toolTipHeading={MiddleTestSuitesTabSequenceDiagram.SHOW_HIDE} onAction={this._fireButtonAction.bind(this, 'notExecutedStateEvents')} />
+              </div>
+              <div className="aj_btn_group" role="group" aria-label="...">
+                <RealtimePressDownButton size="aj_btn_xs" buttonValue={stateSequenceDiagram.messageDetailEvents} icon={'icon-con-message-events'} colorMark="" toolTipContent="Message Events" toolTipHeading={MiddleTestSuitesTabSequenceDiagram.SHOW_HIDE} onAction={this._fireButtonAction.bind(this, 'messageDetailEvents')} />
+                <RealtimePressDownButton size="aj_btn_xs" buttonValue={stateSequenceDiagram.connectionEvents} icon={'icon-con-connection-events'} colorMark="" toolTipContent="Connection Events" toolTipHeading={MiddleTestSuitesTabSequenceDiagram.SHOW_HIDE} onAction={this._fireButtonAction.bind(this, 'connectionEvents')} />
+                <RealtimePressDownButton size="aj_btn_xs" buttonValue={stateSequenceDiagram.serverEvents} icon={'icon-con-server-events'} colorMark="" toolTipContent="Server Events" toolTipHeading={MiddleTestSuitesTabSequenceDiagram.SHOW_HIDE} onAction={this._fireButtonAction.bind(this, 'serverEvents')} />
+                <RealtimePressDownButton size="aj_btn_xs" buttonValue={stateSequenceDiagram.messageEvents} icon={'icon-con-messages'} colorMark="" toolTipContent="Messages" toolTipHeading={MiddleTestSuitesTabSequenceDiagram.SHOW_HIDE} onAction={this._fireButtonAction.bind(this, 'messageEvents')} />
+              </div>
+              <div className="aj_btn_group" role="group" aria-label="...">
+                <RealtimePressDownButton size="aj_btn_xs" buttonValue={stateSequenceDiagram.protocolData} icon={'icon-communication'} colorMark="" toolTipContent="Communication Data" toolTipHeading={MiddleTestSuitesTabSequenceDiagram.SHOW_HIDE} onAction={this._fireButtonAction.bind(this, 'protocolData')} />
+                <RealtimePressDownButton size="aj_btn_xs" buttonValue={stateSequenceDiagram.protocolAddressNameData} icon={'icon-communication-address'} colorMark="" toolTipContent="Communication Address" toolTipHeading={MiddleTestSuitesTabSequenceDiagram.SHOW_HIDE} onAction={this._fireButtonAction.bind(this, 'protocolAddressNameData')} />
+                <RealtimePressDownButton size="aj_btn_xs" buttonValue={stateSequenceDiagram.protocolIpData} icon={'icon-communication-ip'} colorMark="" toolTipContent="Communication Ip" toolTipHeading={MiddleTestSuitesTabSequenceDiagram.SHOW_HIDE} onAction={this._fireButtonAction.bind(this, 'protocolIpData')} />
+                <RealtimePressDownButton size="aj_btn_xs" buttonValue={stateSequenceDiagram.protocolTransportData} icon={'icon-communication-transport'} colorMark="" toolTipContent="Communication Transport" toolTipHeading={MiddleTestSuitesTabSequenceDiagram.SHOW_HIDE} onAction={this._fireButtonAction.bind(this, 'protocolTransportData')} />
+                <RealtimePressDownButton size="aj_btn_xs" buttonValue={stateSequenceDiagram.protocolInfoData} icon={'icon-communication-info'} colorMark="" toolTipContent="Communication Info" toolTipHeading={MiddleTestSuitesTabSequenceDiagram.SHOW_HIDE} onAction={this._fireButtonAction.bind(this, 'protocolInfoData')} />
+                <RealtimePressDownButton size="aj_btn_xs" buttonValue={stateSequenceDiagram.protocolInstanceData} icon={'icon-communication-instance'} colorMark="" toolTipContent="Communication Instance" toolTipHeading={MiddleTestSuitesTabSequenceDiagram.SHOW_HIDE} onAction={this._fireButtonAction.bind(this, 'protocolInstanceData')} />
+                <RealtimePressDownButton size="aj_btn_xs" buttonValue={stateSequenceDiagram.protocolNameData} icon={'icon-communication-stack'} colorMark="" toolTipContent="Communication Stack" toolTipHeading={MiddleTestSuitesTabSequenceDiagram.SHOW_HIDE} onAction={this._fireButtonAction.bind(this, 'protocolNameData')} />
+              </div>
+              <div className="aj_btn_group" role="group" aria-label="...">
+                <RealtimePressDownButton size="aj_btn_xs" buttonValue={stateSequenceDiagram.stackEvents} icon={'icon-stack-events'} toolTipContent="Stack Events" toolTipHeading={MiddleTestSuitesTabSequenceDiagram.SHOW_HIDE} onAction={this._fireButtonAction.bind(this, 'stackEvents')} />
+                <RealtimePressDownButton size="aj_btn_xs" buttonValue={stateSequenceDiagram.stackInfoEvents} icon={'icon-stack-event-info'} toolTipContent="Stack Info" toolTipHeading={MiddleTestSuitesTabSequenceDiagram.SHOW_HIDE} onAction={this._fireButtonAction.bind(this, 'stackInfoEvents')} />
+                <RealtimePressDownButton size="aj_btn_xs" buttonValue={stateSequenceDiagram.stackInstanceEvents} icon={'icon-stack-event-instance'} toolTipContent="Stack Instance" toolTipHeading={MiddleTestSuitesTabSequenceDiagram.SHOW_HIDE} onAction={this._fireButtonAction.bind(this, 'stackInstanceEvents')} />
+                <RealtimePressDownButton size="aj_btn_xs" buttonValue={stateSequenceDiagram.stackProtocolEvents} icon={'icon-stack-event-stack'} toolTipContent="Stack name" toolTipHeading={MiddleTestSuitesTabSequenceDiagram.SHOW_HIDE} onAction={this._fireButtonAction.bind(this, 'stackProtocolEvents')} />
+              </div>
+              <div className="aj_btn_group" role="group" aria-label="...">
+                <RealtimePressDownButton size="aj_btn_xs" buttonValue={stateSequenceDiagram.guiEvents} icon={'icon-gui-events'} toolTipContent="GUI Events" toolTipHeading={MiddleTestSuitesTabSequenceDiagram.SHOW_HIDE} onAction={this._fireButtonAction.bind(this, 'guiEvents')} />
+                <RealtimePressDownButton size="aj_btn_xs" buttonValue={stateSequenceDiagram.guiObjectEvents} icon={'icon-gui-event-object'} toolTipContent="GUI Object" toolTipHeading={MiddleTestSuitesTabSequenceDiagram.SHOW_HIDE} onAction={this._fireButtonAction.bind(this, 'guiObjectEvents')} />
+                <RealtimePressDownButton size="aj_btn_xs" buttonValue={stateSequenceDiagram.guiActionEvents} icon={'icon-gui-event-action'} toolTipContent="GUI Actions" toolTipHeading={MiddleTestSuitesTabSequenceDiagram.SHOW_HIDE} onAction={this._fireButtonAction.bind(this, 'guiActionEvents')} />
+                <RealtimePressDownButton size="aj_btn_xs" buttonValue={stateSequenceDiagram.guiFunctionEvents} icon={'icon-gui-event-function'} toolTipContent="GUI Function" toolTipHeading={MiddleTestSuitesTabSequenceDiagram.SHOW_HIDE} onAction={this._fireButtonAction.bind(this, 'guiFunctionEvents')} />
+                <RealtimePressDownButton size="aj_btn_xs" buttonValue={stateSequenceDiagram.guiInfoData} icon={'icon-gui-event-info'} toolTipContent="GUI Info" toolTipHeading={MiddleTestSuitesTabSequenceDiagram.SHOW_HIDE} onAction={this._fireButtonAction.bind(this, 'guiInfoData')} />
+                <RealtimePressDownButton size="aj_btn_xs" buttonValue={stateSequenceDiagram.guiInstanceData} icon={'icon-gui-event-instance'} toolTipContent="GUI Instance" toolTipHeading={MiddleTestSuitesTabSequenceDiagram.SHOW_HIDE} onAction={this._fireButtonAction.bind(this, 'guiInstanceData')} />
+                <RealtimePressDownButton size="aj_btn_xs" buttonValue={stateSequenceDiagram.guiProtocolData} icon={'icon-gui-event-stack'} toolTipContent="GUI Stack name" toolTipHeading={MiddleTestSuitesTabSequenceDiagram.SHOW_HIDE} onAction={this._fireButtonAction.bind(this, 'guiProtocolData')} />
+              </div>
+              <div className="aj_btn_group" role="group" aria-label="...">
+                <RealtimePressDownButton size="aj_btn_xs" name="Data" buttonValue={stateSequenceDiagram.phases} icon={'icon-phase-data'} buttonIndex={ActorPhaseConst.DATA} toolTipContent="Data Phase Events" toolTipHeading={MiddleTestSuitesTabSequenceDiagram.SHOW_HIDE} onAction={this._fireButtonAction.bind(this, 'phases')} />
+                <RealtimePressDownButton size="aj_btn_xs" name="Precondition" buttonValue={stateSequenceDiagram.phases} icon={'icon-phase-precondition'} buttonIndex={ActorPhaseConst.PRE} toolTipContent="Precondition Phase Events" toolTipHeading={MiddleTestSuitesTabSequenceDiagram.SHOW_HIDE} onAction={this._fireButtonAction.bind(this, 'phases')} />
+                <RealtimePressDownButton size="aj_btn_xs" name="Execution" buttonValue={stateSequenceDiagram.phases} icon={'icon-phase-execution'} buttonIndex={ActorPhaseConst.EXEC} toolTipContent="Execution Phase Events" toolTipHeading={MiddleTestSuitesTabSequenceDiagram.SHOW_HIDE} onAction={this._fireButtonAction.bind(this, 'phases')} />
+                <RealtimePressDownButton size="aj_btn_xs" name="Postcondition" buttonValue={stateSequenceDiagram.phases} icon={'icon-phase-postcondition'} buttonIndex={ActorPhaseConst.POST} toolTipContent="Postcondition Phase Events" toolTipHeading={MiddleTestSuitesTabSequenceDiagram.SHOW_HIDE} onAction={this._fireButtonAction.bind(this, 'phases')} />
+                <RealtimePressDownButton size="aj_btn_xs" name="None" buttonValue={stateSequenceDiagram.phases} icon={'icon-phase-none'} buttonIndex={ActorPhaseConst.NONE} toolTipContent="None Phase Events" toolTipHeading={MiddleTestSuitesTabSequenceDiagram.SHOW_HIDE} onAction={this._fireButtonAction.bind(this, 'phases')} />
+              </div>
+            </div>
+          </div>
+          <SequenceDiagram ref={this.refSeqDia} filter={this.filter} name="test-suite-seq-dia" clearMsgPrefix="TestSuite" store={TestSuiteStore} storeName="TestSuiteStore" buttonsLoaded={this.state.TestSuiteStore.buttonsLoaded} stackStyles={this.state.StyleStore.stackStyles} testCase={this.state.TestSuiteStore.testCase} systemUnderTest={this.state.LoginStore.login.systemUnderTest}
+            onOnit={() => {}}
+            onAutoScroll={(autoScroll) => {
+              this.refScrollButton.click();
+            }}
+          />
+        </>
+      );
+    }
+  }
+}

package/project/client/components/middle/user/middle-user-toolbar.jsx

@@ -0,0 +1,32 @@
+
+'use strict';
+
+import Button from 'z-abs-complayer-bootstrap-client/client/button';
+//import {RouterContext} from 'z-abs-complayer-router-client/client/react-component/router-context';
+import ReactComponentBase from 'z-abs-corelayer-client/client/react-component/react-component-base';
+import React from 'react';
+
+
+export default class MiddleUserToolbar extends ReactComponentBase {
+  constructor(props) {
+    super(props);
+  }
+  
+  shouldUpdate(nextProps, nextState) {
+    return false;
+  }
+  
+  render() {
+    return (
+      <div className="middle_toolbar">
+        <div className="btn-toolbar" role="toolbar"  aria-label="...">
+          <div className="btn-group btn-group-sm" role="group" aria-label="...">
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+
+//MiddleUserToolbar.contextType = RouterContext;

package/project/client/components/middle/user/middle-user-view.jsx

@@ -0,0 +1,32 @@
+
+'use strict';
+
+import Popover from 'z-abs-complayer-bootstrap-client/client/popover';
+import ReactComponentStore from 'z-abs-corelayer-client/client/react-component/react-component-store';
+import React from 'react';
+
+
+export default class MiddleUserView extends ReactComponentStore {
+  constructor(props) {
+    super(props);
+  }
+  
+  shouldUpdate(nextProps, nextState) {
+    return false;
+  }
+  
+  render() {
+    return (
+      <div className="">
+        <div className="col-xs-1" />
+        <div className="col-xs-10">
+          <h1>
+            <strong>User</strong>
+          </h1>
+          <code style={{color:'Green', backgroundColor:'Honeydew', border:'1px solid Green'}}>Comming soon:</code>&nbsp;Here you will be able to register and handle Services.
+        </div>
+        <div className="col-xs-1" />
+      </div>
+    );
+  }
+}

package/project/client/components/middle/user/middle-user.jsx

@@ -0,0 +1,39 @@
+
+'use strict';
+
+import MiddleSidebar from '../middle_sidebar';
+import MiddleUserToolbar from './middle-user-toolbar';
+import MiddleUserView from './middle-user-view';
+import Route from 'z-abs-complayer-router-client/client/react-component/route';
+import ReactComponentBase from 'z-abs-corelayer-client/client/react-component/react-component-base';
+import React from 'react';
+
+
+export default class MiddleUser extends ReactComponentBase {
+  constructor(props) {
+    super(props);
+    this.setTitle(() => {
+      return {
+        isPath: false,
+        text: 'User'
+      };
+    });
+  }
+  
+  shouldUpdate(nextProps, nextState) {
+    return false;
+  }
+  
+  render() {
+    return (
+      <div className="middle">
+        <MiddleUserToolbar />
+        <MiddleSidebar />
+        <div className="middle_view">
+          <MiddleUserView />
+        </div>
+      </div>
+    );
+  }
+}
+

package/project/client/components/middle/videos/middle-videos-view.jsx

@@ -0,0 +1,135 @@
+
+'use strict';
+
+import Popover from 'z-abs-complayer-bootstrap-client/client/popover';
+import ReactComponentStore from 'z-abs-corelayer-client/client/react-component/react-component-store';
+import React from 'react';
+
+
+export default class MiddleVideosView extends ReactComponentStore {
+  constructor(props) {
+    super(props);
+  }
+  
+  shouldUpdate(nextProps, nextState) {
+    return false;
+  }
+  
+  renderHeading(videoHeading) {
+    return (
+      <p style={{fontSize:'0.8vw',fontWeight:'bolder',margin:0,padding:0}}>{videoHeading}</p>
+    );
+  }
+  
+  renderText(videoText) {
+    return (
+      <p style={{fontSize:'0.7vw',margin:0,padding:0}}>{videoText}</p>
+    );
+  }
+  
+  renderVideo(video, index) {
+    return (
+      <a className="videos_meny" key={index} href={`https://www.youtube.com/watch?v=${video.src}`} target="_blank">
+        <div className="embed-responsive embed-responsive-16by9" style={{marginBottom:'4px',border:'solid black 1px'}}>
+          <img id="start_page" src="/abs-images/svg/ActorJsLogo.svg" alt="ActorJs Logo" style={{
+            display: 'block',
+            marginLeft: 'auto',
+            marginRight: 'auto',
+            marginTop: '0.6vw',
+            marginBottom: '0.2vw',
+            width: '100%'
+          }} />
+          <div style={{margin:0,padding:0,textAlign:'center'}}>
+            {this.renderHeading(video.heading)}
+            {this.renderText(video.text)}
+          </div>
+        </div>
+      </a>
+    );
+  }
+  
+  renderOuterColumn(heading, videos) {
+    const videosJsx = videos.map((video, index) => {
+      return this.renderVideo(video, index);
+    });
+    return (
+      <>
+        <div className="videos_meny_header">
+          <h2 className="videos_meny">{heading}</h2>
+        </div>
+        {videosJsx}
+      </>
+    );
+  }
+  
+  renderVideos() {
+    let key = 0;
+    return (
+      <div className="videos_menu_outer">
+        <div key={++key} className="videos_menu_inner">
+          {this.renderOuterColumn('Get Started', [
+            {
+              src:'4OUyEm7a-yQ&ab_channel=aaaaaaaaaa',
+              heading: 'Get Started',
+              text: '1. Define your first SUT'
+            },
+            {
+              src:'dzZYmUQCWXI&ab_channel=aaaaaaaaaa',
+              heading: 'Get Started',
+              text: '2. Make your first Actors'
+            },
+            {
+              src:'LWPE2N3THkM&ab_channel=aaaaaaaaaa',
+              heading: 'Get Started',
+              text: '3. Make your first Test Case'
+            },
+            {
+              src:'pa9fm2QTM24&ab_channel=aaaaaaaaaa',
+              heading: 'Get Started',
+              text: '4. Make your first Test Suite'
+            },
+            {
+              src:'pjVtuKKA8Q0&ab_channel=aaaaaaaaaa',
+              heading: 'Get Started',
+              text: '5. Add your first Addresses'
+            },
+            {
+              src:'rRJoTBjbOkA&ab_channel=aaaaaaaaaa',
+              heading: 'Get Started',
+              text: '6. Share your work'
+            }
+          ])}
+        </div>
+        <div key={++key} className="videos_menu_inner">
+          {this.renderOuterColumn('How to', [])}
+        </div>
+        <div key={++key} className="videos_menu_inner">
+          {this.renderOuterColumn('Abstractions', [])}
+        </div>
+        <div key={++key} className="videos_menu_inner">
+          {this.renderOuterColumn('Lessons', [])}
+        </div>
+        <div key={++key} className="videos_menu_inner">
+          {this.renderOuterColumn('Actor Api', [])}
+        </div>
+        <div key={++key} className="videos_menu_inner">
+          {this.renderOuterColumn('Stacks', [])}
+        </div>
+        <div key={++key} className="videos_menu_inner">
+          {this.renderOuterColumn('Tools', [])}
+        </div>
+        <div key={++key} className="videos_menu_inner">
+          {this.renderOuterColumn('Markup', [])}
+        </div>
+      </div>
+    );
+  }
+  
+  render() {
+    return (
+      <div className="middle_view_full_full videos_menu">
+        {this.renderVideos()}
+      </div>
+    );
+  }
+}

package/project/client/components/middle/videos/middle-videos.jsx

@@ -0,0 +1,32 @@
+
+'use strict';
+
+import MiddleVideosView from './middle-videos-view';
+import ReactComponentBase from 'z-abs-corelayer-client/client/react-component/react-component-base';
+import React from 'react';
+
+
+export default class MiddleVideos extends ReactComponentBase {
+  constructor(props) {
+    super(props);
+    this.setTitle(() => {
+      return {
+        isPath: false,
+        text: 'Videos'
+      };
+    });
+  }
+  
+  shouldUpdate(nextProps, nextState) {
+    return false;
+  }
+  
+  render() {
+    return (
+      <div className="middle middle_start">
+        <MiddleVideosView />
+      </div>
+    );
+  }
+}
+

package/project/client/css/components/component-video.css

@@ -0,0 +1,15 @@
+
+
+div.component_video_controls{
+  position:relative;
+  visibility:visable;
+  opacity:0.5;
+  width:100%;
+  border-radius:10px;
+  bottom:20px;
+  background-color:black;
+  box-shadow:3px 3px 5px black;
+  transition:1s all;
+  display:flex;
+}
+

package/project/client/css/components/modal-dialog-file.css

@@ -0,0 +1,4 @@
+/*.modal-dialog-file-body{
+  max-height:248px;
+  overflow-y:scroll;
+}*/

package/project/client/css/footer/footer-info.css

@@ -0,0 +1,18 @@
+
+div.build_info{
+  background-color:antiquewhite;
+  border:1px Solid Black;
+  width:100px;
+  height:22px;
+  float:left;
+  margin-right:4px;
+}
+
+div.test_execution_info{
+  background-color:antiquewhite;
+  border:1px Solid Black;
+  width:100px;
+  height:22px;
+  float:left;
+  margin-right:4px;
+}

package/project/client/css/footer/footer-logo.css

@@ -0,0 +1,39 @@
+
+.footer{
+	position:fixed;
+  padding-top:4px;
+  padding-left:3px;
+	overflow:hidden;
+	width:100%;
+	height:32px;
+	bottom:0px;
+	background-color:#EEE;
+	/*border: 1px solid red*/
+  border:1px solid #E0E0E0;
+}
+
+#footer_status{
+  position:relative;
+  float:right;
+}
+
+div.footer_logo{
+  font-size:11px;
+  right:0px;
+  position:absolute;
+}
+
+img.footer_logo{
+  position:relative;
+  height:18px;
+  margin-left:8px;
+  top:2px;
+  right:4px;
+  border:0;
+  float:right;
+}
+
+div.footer_right_buttons{
+  right:107px;
+  position:absolute;
+}

package/project/client/css/from-code-editor/sidebar-dark.css

@@ -0,0 +1,20 @@
+
+div.sidebar_dark{
+  width:360px;
+  min-width:180px;
+  max-width:720px;
+  background-color:Black;
+}
+
+div.sidebar_mover_dark {
+  position:absolute;
+  top:0px;
+  bottom:0px;
+  width:4px;
+  right:0px;
+  background-color:Black;
+}
+
+div.sidebar_mover_dark:hover {
+  cursor:e-resize;
+}

package/project/client/css/from-code-editor/sidebar-light.css

@@ -0,0 +1,18 @@
+
+div.sidebar_light{
+  width:360px;
+  min-width:180px;
+  max-width:720px;
+}
+
+div.sidebar_mover_light {
+  position:absolute;
+  top:0px;
+  bottom:0px;
+  width:4px;
+  right:0px;
+}
+
+div.sidebar_mover_light:hover {
+  cursor:e-resize;
+}

package/project/client/css/from-code-editor/tab.css

@@ -0,0 +1,19 @@
+
+button.middle_code_editor_close {
+  float:right;
+  margin-left:8px;
+  margin-right:-4px;
+  opacity:1.0;
+  padding:0;
+  cursor:pointer;
+  border:0;
+  font-size:21px;
+  font-weight:bold;
+  text-shadow:0 1px 0 #fff;
+  line-height:1;
+}
+
+button.middle_code_editor_close:hover {
+  text-decoration:none;
+  cursor:pointer;
+}

package/project/client/css/from-code-editor/tab_dark.css

@@ -0,0 +1,9 @@
+
+button.middle_code_editor_close_dark {
+  color:#d4d4d4;
+  background-color:#333333;
+}
+
+button.middle_code_editor_close_dark:hover {
+  color:#fff;
+}

package/project/client/css/from-code-editor/tab_light.css

@@ -0,0 +1,9 @@
+
+button.middle_code_editor_close_light {
+  color:#838383;
+  background-color:White;
+}
+
+button.middle_code_editor_close_light:hover {
+  color:#000;
+}

package/project/client/css/from-code-editor/view-dark.css

@@ -0,0 +1,11 @@
+
+div.view_dark{
+  position:absolute;
+  overflow:hidden;
+  padding:4px 4px 4px 0px;
+  right:0px;
+  bottom:0px;
+  left:360px;
+  top:36px;
+  background-color:Black;
+}

package/project/client/css/from-code-editor/view-light.css

@@ -0,0 +1,10 @@
+
+div.view_light{
+  position: absolute;
+  overflow:hidden;
+  padding: 4px 4px 4px 0px;
+  right: 0px;
+  bottom: 0px;
+  left: 360px;
+  top: 36px;
+}