evmux-app-framework 0.0.26 → 0.0.28

package/package.json

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

package/src/AppsObserver/AppsObserver.js

@@ -22,7 +22,10 @@ export const availableRequests = {
     raiseAppMessagingEvent: "raiseAppMessagingEvent",
     raiseExternalAppMessagingEvent: "raiseExternalAppMessagingEvent",
     raiseFastAccessButtonEvent: "raiseFastAccessButtonEvent",
-    setFastActionButtons : "setFastActionButtons"
+    setFastActionButtons: "setFastActionButtons",
+    createNewLayer: "createNewLayer",
+    removeSizeCatcher: "removeSizeCatcher"
+
   }
 
 

package/src/AppsObserver/AppsObserverSceneHandler.js

@@ -1,12 +1,13 @@
 import AppsObserverRequestHandlerBase from './AppsObserverRequestHandlerBase'
-   export default class AppsObserverCommentsHandler extends AppsObserverRequestHandlerBase  {
+import  {availableRequests} from './AppsObserver'
+   export default class AppsObserverSceneHandler extends AppsObserverRequestHandlerBase  {
     constructor(){
         super()
     }
   
     canHandleRequest(requestObj)
     {
-        const supportedRequests = ["createNewLayer"];
+        const supportedRequests = [availableRequests.createNewLayer, availableRequests.removeSizeCatcher];
         return supportedRequests.includes(requestObj.request);
     }
 
@@ -15,6 +16,8 @@ import AppsObserverRequestHandlerBase from './AppsObserverRequestHandlerBase'
             userAppInstanceId: "26c6f221-b278-46c8-a69c-ce8379766e24"
         }
     }
-
-      
+       
+    async removeSizeCatcher(requestObj) {
+        return true
+    } 
  }

package/src/EvmuxAppsApi/EvmuxAppsApi.js

@@ -14,7 +14,10 @@ export const availableEvents = {
   comments: "comments",
   appMessaging: "appMessaging",
   externalAppMessaging: "externalAppMessaging",
-  fastActionButton: "fastActionButton"
+  fastActionButton: "fastActionButton",
+  doubleClickOnWidget: "doubleClickOnWidget",
+  widgetOnFocus: "widgetGotFocus",
+  widgetOnBlur: "widgetOnBlur"
 }
 
 export const layerTypes = {

package/src/EvmuxAppsApi/EvmuxAppsApiScene.js

@@ -1,3 +1,5 @@
+import { availableRequests} from '../AppsObserver/AppsObserver'
+
 export default class EvmuxAppsApiScene {
   
   constructor(evmuxAppsApi) {
@@ -7,7 +9,7 @@ export default class EvmuxAppsApiScene {
   async createNewLayer(layerType, paramsObject = {}) {
     
     let reqObj = {
-      request: "createNewLayer",
+      request: availableRequests.createNewLayer,
       userAppInstanceId: this.evmuxAppsApi._userAppInstanceId,
       componentId: this.evmuxAppsApi._componentId,
       data: { 
@@ -19,4 +21,18 @@ export default class EvmuxAppsApiScene {
 
   }
 
+  async removeSizeCatcher(paramsObject = {}) {
+    
+    let reqObj = {
+      request: availableRequests.removeSizeCatcher,
+      userAppInstanceId: this.evmuxAppsApi._userAppInstanceId,
+      componentId: this.evmuxAppsApi._componentId,
+      data: { 
+        paramsObject
+      }
+    }
+
+    return this.evmuxAppsApi._postMessageManager.sendRequestAsync(reqObj);
+  }
+
 }

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'})],
+};