diff options
author | Phil Hughes <me@iamphill.com> | 2018-06-13 17:06:35 +0100 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2018-08-07 14:45:55 +0100 |
commit | 7b4b9e1cc453c2620502daceb94d3e2248b58dcb (patch) | |
tree | 96f79cdace962466a0a27d31c91dbdbc82d4bd88 /app/assets/stylesheets/page_bundles/ide.scss | |
parent | f3b36ac1171f6d170d008c52a0a324a438f3e886 (diff) | |
download | gitlab-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.scss | 41 |
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%); +} |