feat: custom pages menu - add css file to git - move "PAGES SETUP" in…

… Channels view
olzzon · Oct 22, 2020 · 944c633 · 944c633
1 parent b68599c
commit 944c633
Show file tree

Hide file tree

Showing 2 changed files with 115 additions and 15 deletions.
diff --git a/client/assets/css/PagesSettings.css b/client/assets/css/PagesSettings.css
@@ -0,0 +1,93 @@
+.pages-settings-body {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 400px;
+    overflow: auto;
+    max-height: 90vh;
+    background-color: rgb(31, 31, 31);
+    border-color: rgb(124, 124, 124);
+    border-style: solid;
+    border-width: 4px;
+    text-align: center;
+    align-items: center;
+    z-index: 2;
+
+    color: #fff;
+}
+
+.pages-settings-body > h2 {
+    border-bottom: 1px solid #999;
+    margin: 0;
+    padding: 10px 0;
+    line-height: 50px;
+    text-align: center;
+}
+
+.pages-settings-mixer-name {
+    font-size: 150%;
+    border-bottom: 1px solid #999;
+    margin: 0;
+    padding: 10px 0;
+    line-height: 50px;
+    text-align: center;
+}
+
+.pages-settings-text {
+    color: dimgray;
+    margin: 0;
+    margin-left: 40px;
+    padding: 0px 0;
+    line-height: 20px;
+    text-align: center;
+    font-size: 110%;
+}
+
+.pages-settings.checked {
+    font-weight: bold;
+    color: white;
+}
+
+.pages-settings-body > .close {
+    position: absolute;
+    outline: none;
+    border-color: rgb(99, 99, 99);
+    background-color: rgb(27, 27, 27);
+    border-radius: 100%;
+    display: block;
+    color: #fff;
+    width: 50px;
+    height: 50px;
+    font-size: 30px;
+    line-height: 50px;
+    top: -5px;
+    right: 9px;
+}
+
+.pages-settings-body > button {
+    line-height: 20px;
+    outline: none;
+    border-color: rgb(99, 99, 99);
+    background-color: rgb(58, 3, 3);
+    margin-right: 10px;
+    margin-top: 15px;
+    margin-bottom: 15px;
+    margin-left: 10px;
+    border-radius: 7px;
+    color: #fff;
+    width: 34%;
+    height: 50px;
+    font-size: 10px;
+}
+
+.pages-settings-body > .inputfield {
+    line-height: 40px;
+    outline: none;
+    margin-top: 45px;
+    border-radius: 7px;
+    color: #fff;
+    width: 34%;
+    height: 50px;
+    font-size: 18px;
+}
diff --git a/client/components/Channels.tsx b/client/components/Channels.tsx
@@ -17,7 +17,11 @@ import ChanStrip from './ChanStrip'
 import ChannelMonitorOptions from './ChannelMonitorOptions'
 import { IChannels } from '../../server/reducers/channelsReducer'
 import { IFader } from '../../server/reducers/fadersReducer'
-import { ICustomPages, ISettings, PageType } from '../../server/reducers/settingsReducer'
+import {
+    ICustomPages,
+    ISettings,
+    PageType,
+} from '../../server/reducers/settingsReducer'
 import {
     SOCKET_NEXT_MIX,
     SOCKET_CLEAR_PST,
@@ -184,7 +188,9 @@ class Channels extends React.Component<IChannelsInjectProps & Store> {
                     <Channel faderIndex={index} key={index} />
                 ))
             case PageType.CustomPage:
-                let pageIndex: number = this.props.customPages.map((item: ICustomPages) => item.id).indexOf(curPage.id || '');
+                let pageIndex: number = this.props.customPages
+                    .map((item: ICustomPages) => item.id)
+                    .indexOf(curPage.id || '')
                 return this.props.customPages[pageIndex].faders
                     .filter((value) => {
                         return (
@@ -194,10 +200,7 @@ class Channels extends React.Component<IChannelsInjectProps & Store> {
                     })
                     .map((faderIndex, index) => {
                         return (
-                            <Channel
-                                key={faderIndex}
-                                faderIndex={faderIndex}
-                            />
+                            <Channel key={faderIndex} faderIndex={faderIndex} />
                         )
                     })
         }
@@ -281,14 +284,26 @@ class Channels extends React.Component<IChannelsInjectProps & Store> {
                             'settings=0'
                         ) ? null : (
                             <button
-                                className="button channels-show-storage-button"
+                                className="button half channels-show-storage-button"
                                 onClick={() => {
                                     this.handleShowStorage()
                                 }}
                             >
                                 STORAGE
                             </button>
                         )}
+                        {window.location.search.includes(
+                            'settings=0'
+                        ) ? null : (
+                            <button
+                                className="button half channels-show-settings-button"
+                                onClick={() => {
+                                    this.handleShowPagesSetting()
+                                }}
+                            >
+                                PAGES SETUP
+                            </button>
+                        )}
                     </div>
                     <div className="mid">
                         {this.renderAllManualButton()}
@@ -313,14 +328,6 @@ class Channels extends React.Component<IChannelsInjectProps & Store> {
                             </React.Fragment>
                         )}
                     </div>
-                    <button
-                                className="button half channels-show-settings-button"
-                                onClick={() => {
-                                    this.handleShowPagesSetting()
-                                }}
-                            >
-                                PAGES SETUP
-                        </button>
                     <div className="bot">{this.renderPageButtons()}</div>
                 </div>
             </div>