evmux-app-framework 0.0.20 → 0.0.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "evmux-app-framework",
-  "version": "0.0.20",
+  "version": "0.0.22",
   "description": "",
   "main": "index.js",
   "scripts": {

package/src/AppsObserver/AppsObserver.js

@@ -19,7 +19,8 @@ export const availableRequests = {
     unregisterEvent: "unregisterEvent",
     EvEvent: "EvEvent",
     raiseAppMessagingEvent: "raiseAppMessagingEvent",
-    raiseExternalAppMessagingEvent: "raiseExternalAppMessagingEvent",    
+    raiseExternalAppMessagingEvent: "raiseExternalAppMessagingEvent",
+    setFastActionButtons : "setFastActionButtons"
   }
 
 
@@ -44,8 +45,7 @@ let createEventResultObject = (requestName, eventName, result) => {
         this._eventHandler = new pubSub()
         this._requestHandlers = []
 
-        // add requestHandler which are the same on editorVue
-        this._requestHandlers.push(new AppsObserverAppsHandler())
+        
     }
      
     init(app) {
@@ -54,8 +54,9 @@ let createEventResultObject = (requestName, eventName, result) => {
     }
      
      initRequestHandlerProjectSpecific(app) {
-         this._requestHandlers.push(new AppsObserverCommentsHandler(app))
-         this._requestHandlers.push(new AppsObserverSceneHandler(app))
+        this._requestHandlers.push(new AppsObserverCommentsHandler(app))
+        this._requestHandlers.push(new AppsObserverSceneHandler(app))
+        this._requestHandlers.push(new AppsObserverAppsHandler(app))
      }
 
      _sendPostMessageToUsrAppInstancesComponents(userAppInstanceId, data, originComponentIdToExclude = null) {

package/src/AppsObserver/AppsObserverAppsHandler.js

@@ -10,7 +10,7 @@ import { availableEvents } from '../EvmuxAppsApi/EvmuxAppsApi'
   
     canHandleRequest(requestObj)
     {
-        const supportedRequests = [availableRequests.raiseExternalAppMessagingEvent];
+        const supportedRequests = [availableRequests.raiseExternalAppMessagingEvent, availableRequests.setFastActionButtons];
         return supportedRequests.includes(requestObj.request);
     }
      
@@ -18,6 +18,10 @@ import { availableEvents } from '../EvmuxAppsApi/EvmuxAppsApi'
         AppsObserver._raiseEventForSpecificUserAppInstance(requestObj.data.targetUserAppInstanceId, availableEvents.externalAppMessaging, requestObj.data.data);
         return null;
     }
+       
+    async setFastActionButtons() {
+        return true;
+    }
      
     async handleRequest(requestObj)
     {

package/src/EvmuxAppsApi/EvmuxAppsApi.js

@@ -12,7 +12,8 @@ export const availableEvents = {
   keystroke: "keystroke",
   comments: "comments",
   appMessaging: "appMessaging",
-  externalAppMessaging: "externalAppMessaging"
+  externalAppMessaging: "externalAppMessaging",
+  fastActionButton: "fastActionButton"
 }
 
 export const layerTypes = {

package/src/EvmuxAppsApi/EvmuxAppsApiApps.js

@@ -19,4 +19,14 @@ export default class EvmuxAppsApiApps {
         return this.evmuxAppsApi._postMessageManager.sendRequest(requestObj);
   }
 
+
+  async setFastActionButtons(buttonsArray = []) {
+    let requestObj = {
+      request: availableRequests.setFastActionButtons,
+      userAppInstanceId: this.evmuxAppsApi._userAppInstanceId,
+      componentId: this.evmuxAppsApi._componentId,
+      data: buttonsArray
+    } 
+    return this.evmuxAppsApi._postMessageManager.sendRequestAsync(requestObj);
+  }
 }

package/src/style/evmuxUiStyles.css

@@ -0,0 +1,450 @@
+body.light {background-color: #fff;}
+body.dark {background-color: #2f353f;}
+
+.app_settings_title {
+    font-weight: 500;
+    font-size: 14px;
+    margin-bottom: 15px;
+    padding-left: 10px;
+    padding-right: 10px;
+}
+.light .app_settings_title {color: #676778;}
+.dark .app_settings_title {color: #fff;}
+.app_settings_item + .app_settings_title {margin-top: 15px;}
+
+
+
+
+.app_settings_item {
+    display: flex;
+    align-items: center;
+    padding-left: 10px;
+    padding-right: 10px;
+}
+.app_settings_item + .app_settings_item {
+    border-top-width: 1px;
+    border-top-style: solid;
+    margin-top: 6px;
+    padding-top: 6px;
+}
+.light .app_settings_item + .app_settings_item {border-top-color: #efeff7;}
+.dark .app_settings_item + .app_settings_item {border-top-color: #383e4c;}
+
+.app_settings_item_head {
+    display: flex;
+    align-items: center;
+    /*overflow: hidden;*/
+    flex: 0 0 120px;
+    padding-right: 4px;
+}
+.app_settings_item_title {
+    word-break: break-word;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 16px;
+    flex: 1;
+    overflow: hidden;
+}
+.light .app_settings_item_title {color: #676778;}
+.dark .app_settings_item_title {color: #fff;}
+
+.question_mark {width: 16px; flex: 0 0 16px; margin-right: 4px; position: relative;}
+.question_mark svg {width: 16px; display: block; cursor: pointer;}
+.question_mark .tool_tip {
+    display: none;
+    position: absolute;
+    bottom: calc(100% + 10px);
+    left: 0;
+    min-width: 40px;
+    max-width: 200px;
+    padding: 12px;
+    border-radius: 10px;
+    font-weight: 500;
+    font-size: 13px;
+    line-height: 18px;
+    text-align: center;
+    z-index: 16;
+    pointer-events: none;
+    border-width: 1px;
+    border-style: solid;
+    word-break: break-word;
+    width: max-content;
+}
+.question_mark:hover .tool_tip.bottom {
+    bottom: auto;
+    top: calc(100% + 10px);
+}
+.question_mark:hover .tool_tip {
+    display: block;
+}
+.light .question_mark path {fill: #676778;}
+.dark .question_mark path {fill: #fff;}
+.light .question_mark .tool_tip {
+    border-color: #d5d5e5;
+    background-color: #fff;
+    color: #676778;
+    box-shadow: 10px 4px 6px 0 rgba(0, 0, 0, 0.06);
+}
+.dark .question_mark .tool_tip {
+    background-color: #1E222B;
+    border-color: #383e4c;
+    box-shadow: 0 0 11px 4px rgba(0, 0, 0, 0.15);
+    color: #fff;
+}
+
+.app_settings_item_body {
+    flex: 1;
+    overflow: hidden;
+}
+
+.app_settings_item_text_input {
+    display: block;
+    width: 100%;
+    font-weight: 500;
+    font-size: 13px;
+    border-width: 1px;
+    border-style: solid;
+    border-radius: 10px;
+    height: 36px;
+    padding: 0 10px;
+    outline: none;
+    box-shadow: none;
+    overflow: hidden;
+    background: transparent;
+}
+.light .app_settings_item_text_input {color: #676778; border-color: #dcdce8;}
+.dark .app_settings_item_text_input {color: #fff; border-color: #505a68;}
+.light .app_settings_item_text_input:active,
+.light .app_settings_item_text_input:focus,
+.light .app_settings_item_text_input:active:focus,
+.dark .app_settings_item_text_input:active,
+.dark .app_settings_item_text_input:focus,
+.dark .app_settings_item_text_input:active:focus {border-color: #0096ff;}
+@media (max-width: 1400px), (max-height: 780px) {
+    .app_settings_item_text_input {
+        height: 30px;
+        font-size: 11px;
+    }
+}
+
+
+.app_settings_item_select {
+    cursor: pointer;
+    border-width: 1px;
+    border-style: solid;
+    height: 40px;
+    border-radius: 10px;
+    font-weight: 400;
+    font-size: 14px;
+    padding: 0 12px;
+    width: 100%;
+}
+.light .app_settings_item_select {
+    border-color: #e3e3ec;
+    color: #676778;
+}
+.dark .app_settings_item_select {
+    border-color: #2f353f;
+    color: #fff;
+    background-color: #383e4c;
+}
+@media (max-width: 1400px), (max-height: 780px) {
+    .app_settings_item_select {
+        height: 30px;
+        font-size: 11px;
+    }
+}
+
+
+
+.app_settings_item_file_chooser {
+    display: flex;
+    align-items: center;
+}
+.app_settings_item_file_chooser_input_block {
+    width: 94px;
+    height: 52px;
+    border-radius: 8px;
+    border-width: 1px;
+    border-style: solid;
+    overflow: hidden;
+    position: relative;
+}
+.light .app_settings_item_file_chooser_input_block {border-color: #efeff7;}
+.dark .app_settings_item_file_chooser_input_block {border-color: #383e4c;}
+
+.app_settings_item_file_chooser_input_block img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    aspect-ratio: 94/52;
+    object-fit: contain;
+}
+.app_settings_item_file_chooser_input_block input {
+    position: absolute;
+    z-index: 2;
+    display: block;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    cursor: pointer;
+    opacity: 0;
+}
+.app_settings_item_file_chooser_input_block input::file-selector-button {
+    display: none;
+}
+
+.app_settings_item_file_chooser_no_image {
+    position: absolute;
+    top: 1px;
+    left: 1px;
+    width: calc(100% - 2px);
+    height: calc(100% - 2px);
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.app_settings_item_file_chooser_no_image svg {
+    width: 20px;
+}
+.light .app_settings_item_file_chooser_no_image svg path {
+    fill: #676778;
+}
+.dark .app_settings_item_file_chooser_no_image svg path {
+    fill: #fff;
+}
+
+.light .app_settings_item_file_chooser_no_image {background-color: #efeff7;}
+.dark .app_settings_item_file_chooser_no_image {background-color: #383e4c;}
+
+
+
+.app_settings_item_color {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+}
+.app_settings_item_color svg {
+    width: 20px;
+    margin-right: 8px;
+}
+.light .app_settings_item_color_preview_border {fill: #e3e3ec;}
+.dark .app_settings_item_color_preview_border {fill: #505a68;}
+
+.app_settings_item_color_code {
+    display: flex;
+    align-items: center;
+    height: 30px;
+    overflow: hidden;
+    width: 110px;
+    border-radius: 4px;
+}
+.light .app_settings_item_color_code {color: #676778; background-color: #f0f0f7;}
+.dark .app_settings_item_color_code {color: #fff; background-color: #383e4c;}
+.app_settings_item_color_code:before {
+    content: '#';
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+    width: 24px;
+    height: 100%;
+    margin-right: 8px;
+    flex: 0 0 24px;
+}
+.light .app_settings_item_color_code:before {background-color: #d6d6e5;}
+.dark .app_settings_item_color_code:before {background-color: #505a68;}
+
+.app_settings_item_color_code_text {
+    font-size: 14px;
+    line-height: 16px;
+    font-weight: 400;
+}
+.color_picker_holder {
+    flex: 0 0 100%;
+    padding-top: 10px;
+}
+.color_picker_holder .alwan {
+    border-radius: 12px;
+    overflow: hidden;
+}
+.light .color_picker_holder .alwan {
+    background-color: #fff;
+    border-color: #D6D6E5;
+}
+.dark .color_picker_holder .alwan {
+    background-color: #2f353f;
+    border-color: #383e4c;
+}
+
+.color_picker_holder .alwan .alwan__slider::-webkit-slider-runnable-track {
+    height: 10px;
+    border-radius: 5px;
+}
+.color_picker_holder .alwan .alwan__slider::-webkit-slider-thumb {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    border: none;
+    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
+    transform: translateY(2px);
+}
+.color_picker_holder .alwan .alwan__slider--alpha {
+    margin-top: 8px;
+}
+.color_picker_holder .alwan .alwan__preview {
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+}
+
+.light .alwan__container {border-top-color: #D6D6E5;}
+.dark .alwan__container {border-top-color: #383e4c;}
+
+.light .color_picker_holder .alwan .alwan__inputs label {color: #676778;}
+.dark .color_picker_holder .alwan .alwan__inputs label {color: #fff;}
+
+.color_picker_holder .alwan .alwan__input {
+    padding: 0;
+    height: 24px;
+    border-radius: 8px;
+    font-size: 12px;
+    font-weight: 500;
+    background: transparent;
+}
+.light .color_picker_holder .alwan .alwan__input {border-color: #D6D6E5; color: #676778;}
+.dark .color_picker_holder .alwan .alwan__input {border-color: #383e4c; color: #fff;}
+
+
+
+
+
+
+
+
+
+.btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 10px;
+    height: 40px;
+    font-weight: 500;
+    font-size: 14px;
+    cursor: pointer;
+    border: none;
+    box-shadow: none;
+    text-align: center;
+    background: transparent;
+}
+.btn:not(.btn_icon) {
+    min-width: 94px;
+    padding: 0 20px;
+}
+.btn_icon {
+    width: 40px;
+}
+.btn_icon svg {
+    width: 20px;
+}
+.btn_icon svg path {}
+
+.light .btn.primary,
+.dark .btn.primary {
+    color: #fff;
+    background-color: #0096ff;
+}
+
+.light .btn.delete svg path,
+.dark .btn.delete svg path {fill: #676778;}
+.light .btn.primary svg path,
+.dark .btn.primary svg path {fill: #fff;}
+
+.light .btn.delete:hover {background-color: #efced2;}
+.dark .btn.delete:hover {background-color: #342832;}
+.light .btn.delete:hover svg path,
+.dark .btn.delete:hover svg path {fill: #ff616d;}
+
+@media (max-width: 1400px), (max-height: 780px) {
+    body:not(.mobile) .btn:not(.btn_icon) {
+        height: 30px;
+        padding: 0 15px;
+        font-size: 11px;
+    }
+}
+
+
+
+
+
+
+
+
+
+
+.scroll_bar_style::-webkit-scrollbar {
+    width: 4px;
+    height: 4px;
+}
+.scroll_bar_style::-webkit-scrollbar-thumb {
+    border-radius: 1.5px;
+    border: none;
+}
+.scroll_bar_style::-webkit-scrollbar-track {
+    background-color: rgba(255, 255, 255, 0.015);
+}
+.scroll_bar_style::-webkit-scrollbar {
+    background-color: rgba(255, 255, 255, 0.015);
+}
+.scroll_bar_style::-webkit-scrollbar-thumb {
+    background-color: rgba(204, 204, 204, 0.9);
+}
+.scroll_bar_style.hidden_scroll {
+    padding-right: 4px;
+    pointer-events: none;
+}
+.scroll_bar_style.hidden_scroll::-webkit-scrollbar {
+    width: 0px;
+    height: 0px;
+}
+.scroll_bar_style.hidden_scroll::-webkit-scrollbar-thumb {
+    border-radius: 0px;
+    border: none;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

package/webpack.config.js

@@ -0,0 +1,44 @@
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const path = require("path");
+
+
+module.exports = {
+
+  entry: {
+    'evmuxUiStylesCss': './src/style/evmuxUiStyles.css',
+    
+  },
+  output: {
+    path: path.resolve(__dirname, "dist"),
+   
+    publicPath: "",
+    // the output bundle
+    //filename: '[name].[hash].js',
+    // filename: '[name].js',
+    // chunkFilename: "[name].[hash].bundle.js",
+    // saves the files into the dist/static folder
+    // path: path.resolve(__dirname, '/home/ubuntu/CONSOLE/www/editorevmux/public/producerApp'),
+    // path: path.resolve(__dirname, 'dist'),
+    // set static as src="static/main.js as relative path
+
+    // publicPath: '', // ROMA!!! - if need to run broadcast local
+  },
+  module: {
+
+
+    rules: [
+
+      {
+        test: /\.(scss|css)$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          'css-loader',
+        ],
+      },
+
+
+    ],
+  },
+
+  plugins: [new MiniCssExtractPlugin({  filename: '[name].css'})],
+};