[8/98/3] Feature: Statusbar (#126)

Created statusbar with info about current state of app and version (major and dev num).

app/data/common/model/lang/OMSLDMainWindow.interface.ts

@@ -3,6 +3,7 @@ import IOMSLDAboutAppModal from './main_window/OMSLDAboutAppModal.interface';
 import IOMSLDMainMenu from './main_window/OMSLDMainMenu.interface';
 import IOMSLDMainStart from './main_window/OMSLDMainStart.interface';
 import IOMSLDMainModals from './main_window/OMSLDMainModals.interface';
+import IOMSLDStatusbar from './main_window/OMSLDStatusbar.interface';
 
 export default interface IOMSLDMainWindow {
   /** Dropdown of menu in app header */
@@ -17,6 +18,9 @@ export default interface IOMSLDMainWindow {
   /** Start frame */
   START_FRAME: IOMSLDMainStart;
 
+  /** Elements of status bar */
+  STATUSBAR: IOMSLDStatusbar;
+
   /** All modals */
   MODALS: IOMSLDMainModals;
 }

app/data/common/model/lang/main_window/OMSLDStatusbar.interface.ts

@@ -0,0 +1,8 @@
+/** Elements of status bar */
+export default interface IOMSLDStatusbar {
+  /** Current status of app */
+  PROGRAM_STATUS: {
+    /** Start status (app hasn't active project) */
+    START: string;
+  };
+}

app/modules/main/App/App.m.scss

@@ -10,4 +10,9 @@
     align-items: center;
     justify-content: center;
   }
+
+  &__content {
+    position: relative;
+    z-index: 1;
+  }
 }

app/modules/main/App/App.tsx

@@ -35,7 +35,7 @@ export default class App extends PureComponent {
           </Suspense>
 
           <Layout>
-            <Content>
+            <Content className={styles.App__content}>
               <Suspense fallback={this.loading}>
                 <Switch>
                   <Route exact={true} path="/" component={() => <AppStart />} />

app/modules/main/StatusBar/StatusBar.m.scss

@@ -0,0 +1,35 @@
+.StatusBar {
+  padding: 4px;
+  background: rgba(0, 0, 0, 0.1);
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+  position: relative;
+  z-index: 2;
+
+  &__side {
+    width: 50%;
+    display: flex;
+    align-items: center;
+
+    &--left {
+      justify-content: flex-start;
+    }
+
+    &--right {
+      justify-content: flex-end;
+    }
+  }
+
+  &__cell {
+    padding: 0 6px;
+
+    &:first-of-type {
+      padding-left: 0;
+    }
+
+    &:last-of-type {
+      padding-right: 0;
+    }
+  }
+}

app/modules/main/StatusBar/StatusBar.tsx

@@ -2,10 +2,51 @@ import React, { PureComponent } from 'react';
 
 import Layout from 'antd/lib/layout/layout';
 
+import styles from './StatusBar.m.scss';
+import generateMixClass from 'components/utils/mixClass';
+import IOMSLDStatusbar from 'data/common/model/lang/main_window/OMSLDStatusbar.interface';
+import { TranslateContext } from 'modules/global/TranslateContext';
+
 const { Footer } = Layout;
 
 export default class StatusBar extends PureComponent {
+  static contextType = TranslateContext;
+
+  lang: IOMSLDStatusbar = this.context.MAIN_WINDOW.STATUSBAR;
+
   render() {
-    return <Footer />;
+    return (
+      <Footer className={styles.StatusBar}>
+        <div
+          className={generateMixClass([
+            {
+              name: styles.StatusBar__side,
+              condition: true,
+            },
+            {
+              name: styles['StatusBar__side--left'],
+              condition: true,
+            },
+          ])}
+        >
+          <div className={styles.StatusBar__cell}>{this.lang.PROGRAM_STATUS.START}</div>
+        </div>
+
+        <div
+          className={generateMixClass([
+            {
+              name: styles.StatusBar__side,
+              condition: true,
+            },
+            {
+              name: styles['StatusBar__side--right'],
+              condition: true,
+            },
+          ])}
+        >
+          <div className={styles.StatusBar__cell}>Mk 0 Insiders (v0.6.0)</div>
+        </div>
+      </Footer>
+    );
   }
 }

app/modules/main/header/AppHeader/AppHeader.m.scss

@@ -6,6 +6,8 @@
   height: 40px;
   padding: 2px 5px;
   line-height: 40px;
+  position: relative;
+  z-index: 2;
 
   &__left {
     height: 100%;

package.json

@@ -1,7 +1,7 @@
 {
   "name": "octagon_studio",
   "productName": "Octagon Modmaking Studio",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Octagon Modmaking Studio - visual editor for modification development on S.T.A.L.K.E.R. Call of Pripyat",
   "scripts": {
     "rebuild": "rm yarn.lock && rm -rf node_modules && yarn",