Updated to v4.6.0: added Add-On visual editor, various UI improvements.

forcedotcom · May 19, 2024 · dc48bdc · dc48bdc
1 parent 7ae55e1
commit dc48bdc
Show file tree

Hide file tree

Showing 240 changed files with 39,084 additions and 2,004 deletions.
diff --git a/css/app.css b/css/app.css
@@ -50,23 +50,32 @@
     overflow-y: auto;
 }
 
-:disabled,
-[disabled="disabled"],
-[disabled="true"] {
-    opacity: 0.7 !important;
+input:not([type=checkbox]):disabled,
+input:not([type=checkbox])[disabled="disabled"],
+input:not([type=checkbox])[disabled="true"],
+textarea:disabled,
+textarea[disabled="disabled"],
+textarea[disabled="true"],
+textarea:read-only {
+    background-color: var(--bs-gray-200) !important;
+    opacity: 0.87 !important;
+}
+
+input:read-only {
+    background-color: var(--bs-gray-200) !important;
 }
 
 input[type=checkbox]:disabled,
-[disabled="true"] {
-    opacity: 0.4 !important;
+input[type=checkbox][disabled="true"] {
+    opacity: 0.5 !important;
 }
 
 .text-primary-dashed,
 .text-primary-dashed * {
     color: var(--bs-primary) !important;
     text-decoration: underline dotted var(--bs-primary) !important;
     text-underline-offset: 20%;
-    cursor:  pointer !important;
+    cursor: pointer !important;
 }
 
 .text-size-2 {
@@ -159,18 +168,13 @@ textarea[readonly] {
     padding: 12px 12px 0px 12px;
 }
 
-.app-sidebar .toggle-btn {
+.app-sidebar .btn-toggle {
     top: 10px;
-    position: absolute;
-    width: 32px;
-    height: 32px;
     left: 16px;
     right: auto;
-    font-weight: bold;
-    z-index: 99;
 }
 
-.app-sidebar.right .toggle-btn {
+.app-sidebar.right .btn-toggle {
     right: 4px;
     left: auto;
 }
@@ -184,6 +188,168 @@ textarea[readonly] {
 }
 
 
+/* Forms Styling ------------- */
+.form-control-width {
+    width: 150px;
+}
+
+.form-control-width-2 {
+    width: 200px;
+}
+
+.form-control-width-3 {
+    width: 250px;
+}
+
+.form-control-width-4 {
+    width: 300px;
+}
+
+
+select.form-control,
+input.form-control {
+    height: 38px;
+}
+
+.form-control:disabled {
+    opacity: 1 !important;
+}
+
+.form-group {
+    position: relative;
+}
+
+.form-control-error {
+    position: absolute;
+}
+
+
+
+/* Buttons Styling ------------- */
+.btn-circle {
+    width: 32px;
+    height: 32px;
+    text-align: center;
+    padding: 6px 0;
+    font-size: 12px;
+    line-height: 1.428571429;
+    border-radius: 15px;
+    overflow: hidden;
+}
+
+.btn-toggle {
+    position: absolute;
+    font-weight: bold;
+    z-index: 99;
+    font-size: 24px;
+    line-height: 24px;
+}
+
+.btn:disabled {
+    opacity: 0.4 !important;
+}
+
+.btn-sm.rounded-circle {
+    width: 32px;
+    height: 32px;
+}
+
+
+/* Tooltips Styling ------------- */
+.tooltip-inner {
+    width: 100vw !important;
+    text-align: left;
+    padding: 12px;
+    max-width: min(300px, 90vw) !important;
+}
+
+.tooltip-object .tooltip-inner {
+    max-width: min(300px, 90vw) !important;
+}
+
+.tooltip-objectErrors .tooltip-inner {
+    max-width: min(800px, 90vw) !important;
+}
+
+.tooltip-mainStateAlertBox .tooltip-inner {
+    max-width: min(1024px, 90vw) !important;
+}
+
+/* Components Styling -----------*/
+.settings-form {
+    height: calc(max(100vh - 456px, 220px));
+    overflow-y: auto;
+    width: 100%;
+    overflow-x: hidden;
+    /* padding: 0px 1rem 0 0; */
+}
+
+.command-line-form {
+    height: calc(max(100vh - 556px, 220px));
+    overflow-y: auto;
+    width: 100%;
+    overflow-x: hidden;
+    padding: 0px 1rem 0 0;
+
+}
+
+.auto-height-h500 {
+    height: calc(max(100vh - 500px, 220px)) !important;
+}
+
+.auto-height-h554 {
+    height: calc(max(100vh - 554px, 220px)) !important;
+}
+
+.auto-height-h557 {
+    height: calc(max(100vh - 646px, 220px)) !important;
+}
+
+.auto-height-h720 {
+    height: calc(max(100vh - 670px, 220px)) !important;
+}
+
+.auto-height-h750 {
+    height: calc(max(100vh - 750px, 220px)) !important;
+}
+
+.auto-height-h790 {
+    height: calc(max(100vh - 790px, 220px)) !important;
+}
+
+
+.auto-height-h835 {
+    height: calc(max(100vh - 730px, 220px)) !important;
+}
+
+
+/** Object Selector Styling ------------- */
+.object-selector-container {
+    max-width: 500px;
+    position: relative;
+    transition: max-width 0.3s;
+}
+
+.object-selector-container.collapsed {
+    max-width: 0px;
+}
+
+.object-selector-container.collapsed .object-selector {
+    display: none;
+}
+
+.object-selector-container .btn-toggle {
+    position: absolute;
+    top: -2px;
+    right: -14px;
+    z-index: 99;
+}
+
+/** Object Editor Styling ------------- */
+.object-editor-container {
+    background: var(--bs-card-bg);
+    z-index: 2;
+}
 
 /* uiMenu Directive Styling ------------- */
 .nav-link.dropdown-toggle:hover+.dropdown-menu,
@@ -354,50 +520,7 @@ ui-menu nav {
     color: var(--bs-primary);
 }
 
-/* Forms Styling ------------- */
-.form-control-width {
-    width: 150px;
-}
-
-.form-control-width-2 {
-    width: 200px;
-}
-
-/* Buttons Styling ------------- */
-.btn-circle {
-    width: 30px;
-    height: 30px;
-    text-align: center;
-    padding: 6px 0;
-    font-size: 12px;
-    line-height: 1.428571429;
-    border-radius: 15px;
-    overflow: hidden;
-}
-
-.btn:disabled {
-    opacity: 0.4 !important;
-}
-
-/* Tooltips Styling ------------- */
-.tooltip-inner {
-    width: 100vw !important;
-    text-align: left;
-    padding: 12px;
-    max-width: min(300px, 90vw) !important;
-}
-
-.tooltip-object .tooltip-inner {
-    max-width: min(300px, 90vw) !important;
-}
-
-.tooltip-objectErrors .tooltip-inner {
-    max-width: min(800px, 90vw) !important;
-}
 
-.tooltip-mainStateAlertBox .tooltip-inner {
-    max-width: min(1024px, 90vw) !important;
-}
 
 /* uiTabs Directive Styling ------------- */
 ui-tabs .nav-pills {
@@ -444,7 +567,8 @@ ui-tabs .nav-pills .nav-item {
 
 /* Object Editor Styling ------------- */
 .object-editor-tab-content {
-    overflow-y: auto;
+    /* overflow-y: auto;
+    overflow-x: hidden; */
     max-height: 640px;
     min-height: 300px;
     margin: 8px;
@@ -522,4 +646,42 @@ ui-tabs .nav-pills .nav-item {
 
 .table-active td {
     color: var(--bs-white) !important;
+}
+
+/* uiJsonEditorModal Directive Styling ------------- */
+.je-ready .card-title {
+    font-size: 20px;
+}
+
+.je-ready .table-responsive th {
+    font-size: 1rem;
+}
+
+#editor_holder>.je-object__container>*:not(.card) {
+    display: none !important;
+}
+
+#editor_holder [data-schematype="array"]>p,
+#editor_holder [data-schematype="object"]>p {
+    font-size: 86%;
+}
+
+#editor_holder .btn-group>.btn {
+    margin-left: 8px;
+    border-radius: var(--bs-btn-border-radius) !important;
+    flex: 0;
+}
+
+#editor_holder label.required:after {
+    content: "*";
+    margin-right: 4px;
+    color: var(--bs-danger);
+}
+
+
+/* uiContentDialog Directive Styling ------------- */
+.modal-content.full-width {
+    width: calc(100vw - 100px);
+    left: 50%;
+    transform: translate(-50%);
 }