summaryrefslogtreecommitdiff
path: root/app/assets/stylesheets/page_bundles/ide.scss
diff options
context:
space:
mode:
authorPhil Hughes <me@iamphill.com>2018-06-13 17:06:35 +0100
committerPhil Hughes <me@iamphill.com>2018-08-07 14:45:55 +0100
commit7b4b9e1cc453c2620502daceb94d3e2248b58dcb (patch)
tree96f79cdace962466a0a27d31c91dbdbc82d4bd88 /app/assets/stylesheets/page_bundles/ide.scss
parentf3b36ac1171f6d170d008c52a0a324a438f3e886 (diff)
downloadgitlab-ce-7b4b9e1cc453c2620502daceb94d3e2248b58dcb.tar.gz
Web IDE & CodeSandbox
This enables JavaScripts projects to have live previews straight in the browser without requiring any local configuration. This uses the CodeSandbox package `sandpack` to compile it all inside of an iframe. This feature is off by default and can be toggled on in the admin settings. Only projects with a `package.json` and a `main` key are supported. Updates happen in real-time with hot-reloading. We just watch for changes to files and then send them to `sandpack` to allow it to reload the iframe. The iframe includes a very simple navigation bar, the text bar is `readonly` to stop users navigating away from the preview and the back and forward buttons just pop/splice the navigation stack which is tracked by a listener on `sandpack` There is a button inside the iframe which allows the user to open the projects inside of CodeSandbox. This button is only visible on **public** projects. On private or internal projects this button get hidden to protect private code being leaked into an external public URL. Closes #47268
Diffstat (limited to 'app/assets/stylesheets/page_bundles/ide.scss')
-rw-r--r--app/assets/stylesheets/page_bundles/ide.scss41
1 files changed, 41 insertions, 0 deletions
diff --git a/app/assets/stylesheets/page_bundles/ide.scss b/app/assets/stylesheets/page_bundles/ide.scss
index 31dbf1da73c..37ad6a717d9 100644
--- a/app/assets/stylesheets/page_bundles/ide.scss
+++ b/app/assets/stylesheets/page_bundles/ide.scss
@@ -1229,6 +1229,10 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding;
background-color: $white-light;
border-left: 1px solid $white-dark;
}
+
+ .ide-right-sidebar-clientside {
+ padding: 0;
+ }
}
.ide-pipeline {
@@ -1412,3 +1416,40 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding;
color: $white-normal;
background-color: $blue-500;
}
+
+.ide-preview-header {
+ padding: 0 $grid-size;
+ border-bottom: 1px solid $white-dark;
+ background-color: $gray-light;
+ min-height: 44px;
+}
+
+.ide-navigator-btn {
+ height: 24px;
+ min-width: 24px;
+ max-width: 24px;
+ padding: 0;
+ margin: 0 ($grid-size / 2);
+ color: $gl-gray-light;
+
+ &:first-child {
+ margin-left: 0;
+ }
+}
+
+.ide-navigator-location {
+ padding-top: ($grid-size / 2);
+ padding-bottom: ($grid-size / 2);
+
+ &:focus {
+ outline: 0;
+ box-shadow: none;
+ border-color: $theme-gray-200;
+ }
+}
+
+.ide-preview-loading-icon {
+ right: $grid-size;
+ top: 50%;
+ transform: translateY(-50%);
+}