diff options
author | Phil Hughes <me@iamphill.com> | 2017-11-23 17:16:01 +0000 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2017-11-24 15:55:07 +0000 |
commit | a76cd8833c8e5d72decba7139c5f57a29eae6a0c (patch) | |
tree | c9e177629fcc0deac6a29ca4c1b5b2fe47f8d9f7 /app/assets/stylesheets | |
parent | 882dac685cd643755d733ab947d347e346488c73 (diff) | |
download | gitlab-ce-a76cd8833c8e5d72decba7139c5f57a29eae6a0c.tar.gz |
Added IDE commit panel
Closes #40041
Diffstat (limited to 'app/assets/stylesheets')
-rw-r--r-- | app/assets/stylesheets/pages/repo.scss | 408 |
1 files changed, 189 insertions, 219 deletions
diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/pages/repo.scss index d93c51d5448..339b1e35366 100644 --- a/app/assets/stylesheets/pages/repo.scss +++ b/app/assets/stylesheets/pages/repo.scss @@ -35,270 +35,240 @@ } } -.repository-view { - border: 1px solid $border-color; - border-radius: $border-radius-default; - color: $almost-black; - - .code.white pre .hll { - background-color: $well-light-border !important; +.multi-file { + display: flex; + height: calc(100vh - 145px); + border-top: 1px solid $white-dark; + border-bottom: 1px solid $white-dark; + + &.is-collapsed { + .ide-file-list { + max-width: 250px; + overflow: scroll; + } } +} - .tree-content-holder { - display: -webkit-flex; - display: flex; - min-height: 300px; +.ide-file-list { + flex: 1; + + .file { + cursor: pointer; } - .tree-content-holder-mini { - height: 100vh; + a { + color: $gl-text-color; } +} - .panel-right { - display: -webkit-flex; - display: flex; - -webkit-flex-direction: column; - flex-direction: column; - width: 80%; - height: 100%; - - .monaco-editor.vs { - .current-line { - border: 0; - background: $well-light-border; - } +.multi-file-table-col-name, +.multi-file-table-col-commit-message { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 0; +} + +.multi-file-table-col-name { + width: 350px; +} - .line-numbers { - cursor: pointer; +.multi-file-table-col-commit-message { + width: 450px; +} - &:hover { - text-decoration: underline; - } - } - } +.multi-file-edit-pane { + display: flex; + flex-direction: column; + flex: 1; + border-left: 1px solid $white-dark; + overflow: hidden; +} - .blob-no-preview { - .vertical-center { - justify-content: center; - width: 100%; - } - } +.multi-file-tabs { + display: flex; + overflow: scroll; + background-color: $white-normal; + box-shadow: inset 0 -1px $white-dark; - &.blob-editor-container { - overflow: hidden; - } + > li { + position: relative; + } +} - .blob-viewer-container { - -webkit-flex: 1; - flex: 1; - overflow: auto; +.multi-file-tab { + padding: ($gl-padding / 2) ($gl-padding + 12) ($gl-padding / 2) $gl-padding; + background-color: $gray-normal; + border-right: 1px solid $white-dark; + border-bottom: 1px solid $white-dark; + cursor: pointer; + @include str-truncated(150px); + + &.active { + background-color: $white-light; + border-bottom-color: $white-light; + } +} - > div, - .file-content:not(.wiki) { - display: flex; - } +.multi-file-tab-close { + position: absolute; + right: 8px; + top: 50%; + padding: 0; + background: none; + border: 0; + font-size: $gl-font-size; + color: $gray-darkest; + transform: translateY(-50%); + + &:not(.modified):hover, + &:not(.modified):focus { + color: $hint-color; + } - > div, - .file-content, - .blob-viewer, - .line-number, - .blob-content, - .code { - min-height: 100%; - width: 100%; - } + &.modified { + color: $indigo-700; + } +} - .line-numbers { - min-width: 44px; - } +.multi-file-edit-pane-content { + flex: 1; + height: 0; +} - .blob-content { - flex: 1; - overflow-x: auto; - } +.multi-file-editor-btn-group { + padding: $grid-size; + border-top: 1px solid $white-dark; +} + +// Not great, but this is to deal with our current output +.multi-file-preview-holder { + height: 100%; + overflow: scroll; + + & { + .blob-viewer { + height: 100%; } - #tabs { - position: relative; - flex-shrink: 0; + .file-content.code { display: flex; - width: 100%; - padding-left: 0; - margin-bottom: 0; - white-space: nowrap; - overflow-y: hidden; - overflow-x: auto; - - li { - position: relative; - background: $gray-normal; - padding: #{$gl-padding / 2} $gl-padding; - border-right: 1px solid $white-dark; - border-bottom: 1px solid $white-dark; - cursor: pointer; - - &.active { - background: $white-light; - border-bottom: 0; - } - - a { - @include str-truncated(100px); - color: $gl-text-color; - vertical-align: middle; - text-decoration: none; - margin-right: 12px; - - &:focus { - outline: none; - } - } - - .close-btn { - position: absolute; - right: 8px; - top: 50%; - padding: 0; - background: none; - border: 0; - font-size: $gl-font-size; - transform: translateY(-50%); - } - - .close-icon:hover { - color: $hint-color; - } - - .close-icon, - .unsaved-icon { - color: $gray-darkest; - } - - .unsaved-icon { - color: $brand-success; - } - - &.tabs-divider { - width: 100%; - background-color: $white-light; - border-right: 0; - border-top-right-radius: 2px; - } + + i { + margin-left: -10px; } } - .repo-file-buttons { - background-color: $white-light; - padding: 5px 10px; - border-top: 1px solid $white-normal; + .line-numbers { + min-width: 50px; } - #binary-viewer { - height: 80vh; - overflow: auto; - margin: 0; + .file-content, + .line-numbers, + .blob-content, + .code { + min-height: 100%; + } + } +} - .blob-viewer { - padding-top: 20px; - padding-left: 20px; - } +.multi-file-commit-panel { + display: flex; + flex-direction: column; + height: 100%; + width: 290px; + padding: $gl-padding; + background-color: $gray-light; + border-left: 1px solid $white-dark; + + &.is-collapsed { + width: 60px; + padding: 0; + } +} - .binary-unknown { - text-align: center; - padding-top: 100px; - background: $gray-light; - height: 100%; - font-size: 17px; +.multi-file-commit-panel-section { + display: flex; + flex-direction: column; + flex: 1; +} - span { - display: block; - } - } - } - } +.multi-file-commit-panel-header { + display: flex; + align-items: center; + padding: 0 0 12px 0; + margin-bottom: 12px; + border-bottom: 1px solid $white-dark; - #commit-area { - background: $gray-light; - padding: 20px; + &.is-collapsed { + border-bottom: 1px solid $white-dark; - .help-block { - padding-top: 7px; - margin-top: 0; + svg { + margin-left: auto; + margin-right: auto; } } +} - #view-toggler { - height: 41px; - position: relative; - display: block; - border-bottom: 1px solid $white-normal; - background: $white-light; - margin-top: -5px; - } +.multi-file-commit-panel-collapse-btn { + padding-top: 0; + padding-bottom: 0; + margin-left: auto; + font-size: 20px; - #binary-viewer { - img { - max-width: 100%; - } + &.is-collapsed { + margin-right: auto; } +} - #sidebar { - flex: 1; - height: 100%; - - &.sidebar-mini { - width: 20%; - border-right: 1px solid $white-normal; - overflow: auto; - } +.multi-file-commit-list { + flex: 1; + overflow: scroll; +} - .table { - margin-bottom: 0; - } +.multi-file-commit-list-item { + display: flex; + align-items: center; +} - tr { - .repo-file-options { - padding: 2px 16px; - width: 100%; - } +.multi-file-addition { + fill: $green-500; +} - .title { - font-size: 10px; - text-transform: uppercase; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - vertical-align: middle; - } +.multi-file-modified { + fill: $orange-500; +} - .file-icon { - margin-right: 5px; - } +.multi-file-commit-list-collapsed { + display: flex; + flex-direction: column; - td { - white-space: nowrap; - } - } + > svg { + margin-left: auto; + margin-right: auto; + } +} - .file { - cursor: pointer; - } +.multi-file-commit-list-path { + @include str-truncated(100%); +} - a { - @include str-truncated(250px); - color: $almost-black; - } - } +.multi-file-commit-form { + padding-top: 12px; + border-top: 1px solid $white-dark; } -.render-error { - min-height: calc(100vh - 62px); +.multi-file-commit-fieldset { + display: flex; + align-items: center; + padding-bottom: 12px; - p { - width: 100%; + .btn { + flex: 1; } } -.multi-file-table-col-name { - width: 350px; +.multi-file-commit-message.form-control { + height: 80px; + resize: none; } |