Skip to content

G
gitlab-ce
Commit efcf250d authored by Natalia Tepluhina's avatar Natalia Tepluhina Committed by Nicolò Maria Mezzopera
Browse files
Options

Updated design presentation and dropzone to GtiLab UI classes

parent 9a8494ad
Show whitespace changes
Inline Side-by-side
Showing with 51 additions and 51 deletions
app/assets/javascripts/design_management/components/design_presentation.vue
View file @ efcf250d
...@@ -286,7 +286,7 @@ export default { ...@@ -286,7 +286,7 @@ export default {
<template> <template>
<div <div
ref="presentationViewport" ref="presentationViewport"
class="h-100 w-100 p-3 overflow-auto position-relative" class="gl-h-full gl-w-full gl-p-5 overflow-auto gl-relative"
:style="presentationStyle" :style="presentationStyle"
@mousedown="onPresentationMousedown" @mousedown="onPresentationMousedown"
@mousemove="onPresentationMousemove" @mousemove="onPresentationMousemove"
...@@ -297,7 +297,7 @@ export default { ...@@ -297,7 +297,7 @@ export default {
@touchend="onPresentationMouseup" @touchend="onPresentationMouseup"
@touchcancel="onPresentationMouseup" @touchcancel="onPresentationMouseup"
> >
<div class="h-100 w-100 d-flex align-items-center position-relative"> <div class="gl-h-full gl-w-full gl-display-flex gl-align-items-center gl-relative">
<design-image <design-image
v-if="image" v-if="image"
:image="image" :image="image"
......
app/assets/javascripts/design_management/components/upload/design_dropzone.vue
View file @ efcf250d
...@@ -83,7 +83,7 @@ export default { ...@@ -83,7 +83,7 @@ export default {
<template> <template>
<div <div
class="w-100 position-relative" class="gl-w-full gl-relative"
@dragstart.prevent.stop @dragstart.prevent.stop
@dragend.prevent.stop @dragend.prevent.stop
@dragover.prevent.stop @dragover.prevent.stop
...@@ -93,7 +93,7 @@ export default { ...@@ -93,7 +93,7 @@ export default {
> >
<slot> <slot>
<button <button
class="card design-dropzone-card design-dropzone-border w-100 h-100 gl-align-items-center gl-justify-content-center gl-p-3" class="card design-dropzone-card design-dropzone-border gl-w-full gl-h-full gl-align-items-center gl-justify-content-center gl-p-3"
@click="openFileUpload" @click="openFileUpload"
> >
<div <div
...@@ -127,9 +127,9 @@ export default { ...@@ -127,9 +127,9 @@ export default {
<transition name="design-dropzone-fade"> <transition name="design-dropzone-fade">
<div <div
v-show="dragging && !isDraggingDesign" v-show="dragging && !isDraggingDesign"
class="card design-dropzone-border design-dropzone-overlay w-100 h-100 position-absolute d-flex-center p-3 bg-white" class="card design-dropzone-border design-dropzone-overlay gl-w-full gl-h-full gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center gl-p-3 gl-bg-white"
> >
<div v-show="!isDragDataValid" class="mw-50 text-center"> <div v-show="!isDragDataValid" class="mw-50 gl-text-center">
<h3 :class="{ 'gl-font-base gl-display-inline': !hasDesigns }">{{ __('Oh no!') }}</h3> <h3 :class="{ 'gl-font-base gl-display-inline': !hasDesigns }">{{ __('Oh no!') }}</h3>
<span>{{ <span>{{
__( __(
...@@ -137,7 +137,7 @@ export default { ...@@ -137,7 +137,7 @@ export default {
) )
}}</span> }}</span>
</div> </div>
<div v-show="isDragDataValid" class="mw-50 text-center"> <div v-show="isDragDataValid" class="mw-50 gl-text-center">
<h3 :class="{ 'gl-font-base gl-display-inline': !hasDesigns }">{{ __('Incoming!') }}</h3> <h3 :class="{ 'gl-font-base gl-display-inline': !hasDesigns }">{{ __('Incoming!') }}</h3>
<span>{{ __('Drop your designs to start your upload.') }}</span> <span>{{ __('Drop your designs to start your upload.') }}</span>
</div> </div>
......
spec/frontend/design_management/components/__snapshots__/design_presentation_spec.js.snap
View file @ efcf250d
...@@ -2,10 +2,10 @@ ...@@ -2,10 +2,10 @@
exports[`Design management design presentation component currentCommentForm is equal to current annotation position when isAnnotating is true 1`] = ` exports[`Design management design presentation component currentCommentForm is equal to current annotation position when isAnnotating is true 1`] = `
<div <div
class="h-100 w-100 p-3 overflow-auto position-relative" class="gl-h-full gl-w-full gl-p-5 overflow-auto gl-relative"
> >
<div <div
class="h-100 w-100 d-flex align-items-center position-relative" class="gl-h-full gl-w-full gl-display-flex gl-align-items-center gl-relative"
> >
<design-image-stub <design-image-stub
image="test.jpg" image="test.jpg"
...@@ -25,10 +25,10 @@ exports[`Design management design presentation component currentCommentForm is e ...@@ -25,10 +25,10 @@ exports[`Design management design presentation component currentCommentForm is e
exports[`Design management design presentation component currentCommentForm is null when isAnnotating is false 1`] = ` exports[`Design management design presentation component currentCommentForm is null when isAnnotating is false 1`] = `
<div <div
class="h-100 w-100 p-3 overflow-auto position-relative" class="gl-h-full gl-w-full gl-p-5 overflow-auto gl-relative"
> >
<div <div
class="h-100 w-100 d-flex align-items-center position-relative" class="gl-h-full gl-w-full gl-display-flex gl-align-items-center gl-relative"
> >
<design-image-stub <design-image-stub
image="test.jpg" image="test.jpg"
...@@ -47,10 +47,10 @@ exports[`Design management design presentation component currentCommentForm is n ...@@ -47,10 +47,10 @@ exports[`Design management design presentation component currentCommentForm is n
exports[`Design management design presentation component currentCommentForm is null when isAnnotating is true but annotation position is falsey 1`] = ` exports[`Design management design presentation component currentCommentForm is null when isAnnotating is true but annotation position is falsey 1`] = `
<div <div
class="h-100 w-100 p-3 overflow-auto position-relative" class="gl-h-full gl-w-full gl-p-5 overflow-auto gl-relative"
> >
<div <div
class="h-100 w-100 d-flex align-items-center position-relative" class="gl-h-full gl-w-full gl-display-flex gl-align-items-center gl-relative"
> >
<design-image-stub <design-image-stub
image="test.jpg" image="test.jpg"
...@@ -69,10 +69,10 @@ exports[`Design management design presentation component currentCommentForm is n ...@@ -69,10 +69,10 @@ exports[`Design management design presentation component currentCommentForm is n
exports[`Design management design presentation component renders empty state when no image provided 1`] = ` exports[`Design management design presentation component renders empty state when no image provided 1`] = `
<div <div
class="h-100 w-100 p-3 overflow-auto position-relative" class="gl-h-full gl-w-full gl-p-5 overflow-auto gl-relative"
> >
<div <div
class="h-100 w-100 d-flex align-items-center position-relative" class="gl-h-full gl-w-full gl-display-flex gl-align-items-center gl-relative"
> >
<!----> <!---->
...@@ -83,10 +83,10 @@ exports[`Design management design presentation component renders empty state whe ...@@ -83,10 +83,10 @@ exports[`Design management design presentation component renders empty state whe
exports[`Design management design presentation component renders image and overlay when image provided 1`] = ` exports[`Design management design presentation component renders image and overlay when image provided 1`] = `
<div <div
class="h-100 w-100 p-3 overflow-auto position-relative" class="gl-h-full gl-w-full gl-p-5 overflow-auto gl-relative"
> >
<div <div
class="h-100 w-100 d-flex align-items-center position-relative" class="gl-h-full gl-w-full gl-display-flex gl-align-items-center gl-relative"
> >
<design-image-stub <design-image-stub
image="test.jpg" image="test.jpg"
......
spec/frontend/design_management/components/upload/__snapshots__/design_dropzone_spec.js.snap
View file @ efcf250d
...@@ -2,10 +2,10 @@ ...@@ -2,10 +2,10 @@
exports[`Design management dropzone component when dragging renders correct template when drag event contains files 1`] = ` exports[`Design management dropzone component when dragging renders correct template when drag event contains files 1`] = `
<div <div
class="w-100 position-relative" class="gl-w-full gl-relative"
> >
<button <button
class="card design-dropzone-card design-dropzone-border w-100 h-100 gl-align-items-center gl-justify-content-center gl-p-3" class="card design-dropzone-card design-dropzone-border gl-w-full gl-h-full gl-align-items-center gl-justify-content-center gl-p-3"
> >
<div <div
class="gl-display-flex gl-align-items-center gl-justify-content-center gl-text-center gl-flex-direction-column" class="gl-display-flex gl-align-items-center gl-justify-content-center gl-text-center gl-flex-direction-column"
...@@ -39,11 +39,11 @@ exports[`Design management dropzone component when dragging renders correct temp ...@@ -39,11 +39,11 @@ exports[`Design management dropzone component when dragging renders correct temp
name="design-dropzone-fade" name="design-dropzone-fade"
> >
<div <div
class="card design-dropzone-border design-dropzone-overlay w-100 h-100 position-absolute d-flex-center p-3 bg-white" class="card design-dropzone-border design-dropzone-overlay gl-w-full gl-h-full gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center gl-p-3 gl-bg-white"
style="" style=""
> >
<div <div
class="mw-50 text-center" class="mw-50 gl-text-center"
style="display: none;" style="display: none;"
> >
<h3 <h3
...@@ -58,7 +58,7 @@ exports[`Design management dropzone component when dragging renders correct temp ...@@ -58,7 +58,7 @@ exports[`Design management dropzone component when dragging renders correct temp
</div> </div>
<div <div
class="mw-50 text-center" class="mw-50 gl-text-center"
style="" style=""
> >
<h3 <h3
...@@ -78,10 +78,10 @@ exports[`Design management dropzone component when dragging renders correct temp ...@@ -78,10 +78,10 @@ exports[`Design management dropzone component when dragging renders correct temp
exports[`Design management dropzone component when dragging renders correct template when drag event contains files and text 1`] = ` exports[`Design management dropzone component when dragging renders correct template when drag event contains files and text 1`] = `
<div <div
class="w-100 position-relative" class="gl-w-full gl-relative"
> >
<button <button
class="card design-dropzone-card design-dropzone-border w-100 h-100 gl-align-items-center gl-justify-content-center gl-p-3" class="card design-dropzone-card design-dropzone-border gl-w-full gl-h-full gl-align-items-center gl-justify-content-center gl-p-3"
> >
<div <div
class="gl-display-flex gl-align-items-center gl-justify-content-center gl-text-center gl-flex-direction-column" class="gl-display-flex gl-align-items-center gl-justify-content-center gl-text-center gl-flex-direction-column"
...@@ -115,11 +115,11 @@ exports[`Design management dropzone component when dragging renders correct temp ...@@ -115,11 +115,11 @@ exports[`Design management dropzone component when dragging renders correct temp
name="design-dropzone-fade" name="design-dropzone-fade"
> >
<div <div
class="card design-dropzone-border design-dropzone-overlay w-100 h-100 position-absolute d-flex-center p-3 bg-white" class="card design-dropzone-border design-dropzone-overlay gl-w-full gl-h-full gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center gl-p-3 gl-bg-white"
style="" style=""
> >
<div <div
class="mw-50 text-center" class="mw-50 gl-text-center"
style="display: none;" style="display: none;"
> >
<h3 <h3
...@@ -134,7 +134,7 @@ exports[`Design management dropzone component when dragging renders correct temp ...@@ -134,7 +134,7 @@ exports[`Design management dropzone component when dragging renders correct temp
</div> </div>
<div <div
class="mw-50 text-center" class="mw-50 gl-text-center"
style="" style=""
> >
<h3 <h3
...@@ -154,10 +154,10 @@ exports[`Design management dropzone component when dragging renders correct temp ...@@ -154,10 +154,10 @@ exports[`Design management dropzone component when dragging renders correct temp
exports[`Design management dropzone component when dragging renders correct template when drag event contains text 1`] = ` exports[`Design management dropzone component when dragging renders correct template when drag event contains text 1`] = `
<div <div
class="w-100 position-relative" class="gl-w-full gl-relative"
> >
<button <button
class="card design-dropzone-card design-dropzone-border w-100 h-100 gl-align-items-center gl-justify-content-center gl-p-3" class="card design-dropzone-card design-dropzone-border gl-w-full gl-h-full gl-align-items-center gl-justify-content-center gl-p-3"
> >
<div <div
class="gl-display-flex gl-align-items-center gl-justify-content-center gl-text-center gl-flex-direction-column" class="gl-display-flex gl-align-items-center gl-justify-content-center gl-text-center gl-flex-direction-column"
...@@ -191,11 +191,11 @@ exports[`Design management dropzone component when dragging renders correct temp ...@@ -191,11 +191,11 @@ exports[`Design management dropzone component when dragging renders correct temp
name="design-dropzone-fade" name="design-dropzone-fade"
> >
<div <div
class="card design-dropzone-border design-dropzone-overlay w-100 h-100 position-absolute d-flex-center p-3 bg-white" class="card design-dropzone-border design-dropzone-overlay gl-w-full gl-h-full gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center gl-p-3 gl-bg-white"
style="" style=""
> >
<div <div
class="mw-50 text-center" class="mw-50 gl-text-center"
> >
<h3 <h3
class="" class=""
...@@ -209,7 +209,7 @@ exports[`Design management dropzone component when dragging renders correct temp ...@@ -209,7 +209,7 @@ exports[`Design management dropzone component when dragging renders correct temp
</div> </div>
<div <div
class="mw-50 text-center" class="mw-50 gl-text-center"
style="display: none;" style="display: none;"
> >
<h3 <h3
...@@ -229,10 +229,10 @@ exports[`Design management dropzone component when dragging renders correct temp ...@@ -229,10 +229,10 @@ exports[`Design management dropzone component when dragging renders correct temp
exports[`Design management dropzone component when dragging renders correct template when drag event is empty 1`] = ` exports[`Design management dropzone component when dragging renders correct template when drag event is empty 1`] = `
<div <div
class="w-100 position-relative" class="gl-w-full gl-relative"
> >
<button <button
class="card design-dropzone-card design-dropzone-border w-100 h-100 gl-align-items-center gl-justify-content-center gl-p-3" class="card design-dropzone-card design-dropzone-border gl-w-full gl-h-full gl-align-items-center gl-justify-content-center gl-p-3"
> >
<div <div
class="gl-display-flex gl-align-items-center gl-justify-content-center gl-text-center gl-flex-direction-column" class="gl-display-flex gl-align-items-center gl-justify-content-center gl-text-center gl-flex-direction-column"
...@@ -266,11 +266,11 @@ exports[`Design management dropzone component when dragging renders correct temp ...@@ -266,11 +266,11 @@ exports[`Design management dropzone component when dragging renders correct temp
name="design-dropzone-fade" name="design-dropzone-fade"
> >
<div <div
class="card design-dropzone-border design-dropzone-overlay w-100 h-100 position-absolute d-flex-center p-3 bg-white" class="card design-dropzone-border design-dropzone-overlay gl-w-full gl-h-full gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center gl-p-3 gl-bg-white"
style="" style=""
> >
<div <div
class="mw-50 text-center" class="mw-50 gl-text-center"
> >
<h3 <h3
class="" class=""
...@@ -284,7 +284,7 @@ exports[`Design management dropzone component when dragging renders correct temp ...@@ -284,7 +284,7 @@ exports[`Design management dropzone component when dragging renders correct temp
</div> </div>
<div <div
class="mw-50 text-center" class="mw-50 gl-text-center"
style="display: none;" style="display: none;"
> >
<h3 <h3
...@@ -304,10 +304,10 @@ exports[`Design management dropzone component when dragging renders correct temp ...@@ -304,10 +304,10 @@ exports[`Design management dropzone component when dragging renders correct temp
exports[`Design management dropzone component when dragging renders correct template when dragging stops 1`] = ` exports[`Design management dropzone component when dragging renders correct template when dragging stops 1`] = `
<div <div
class="w-100 position-relative" class="gl-w-full gl-relative"
> >
<button <button
class="card design-dropzone-card design-dropzone-border w-100 h-100 gl-align-items-center gl-justify-content-center gl-p-3" class="card design-dropzone-card design-dropzone-border gl-w-full gl-h-full gl-align-items-center gl-justify-content-center gl-p-3"
> >
<div <div
class="gl-display-flex gl-align-items-center gl-justify-content-center gl-text-center gl-flex-direction-column" class="gl-display-flex gl-align-items-center gl-justify-content-center gl-text-center gl-flex-direction-column"
...@@ -341,11 +341,11 @@ exports[`Design management dropzone component when dragging renders correct temp ...@@ -341,11 +341,11 @@ exports[`Design management dropzone component when dragging renders correct temp
name="design-dropzone-fade" name="design-dropzone-fade"
> >
<div <div
class="card design-dropzone-border design-dropzone-overlay w-100 h-100 position-absolute d-flex-center p-3 bg-white" class="card design-dropzone-border design-dropzone-overlay gl-w-full gl-h-full gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center gl-p-3 gl-bg-white"
style="display: none;" style="display: none;"
> >
<div <div
class="mw-50 text-center" class="mw-50 gl-text-center"
> >
<h3 <h3
class="" class=""
...@@ -359,7 +359,7 @@ exports[`Design management dropzone component when dragging renders correct temp ...@@ -359,7 +359,7 @@ exports[`Design management dropzone component when dragging renders correct temp
</div> </div>
<div <div
class="mw-50 text-center" class="mw-50 gl-text-center"
style="display: none;" style="display: none;"
> >
<h3 <h3
...@@ -379,10 +379,10 @@ exports[`Design management dropzone component when dragging renders correct temp ...@@ -379,10 +379,10 @@ exports[`Design management dropzone component when dragging renders correct temp
exports[`Design management dropzone component when no slot provided renders default dropzone card 1`] = ` exports[`Design management dropzone component when no slot provided renders default dropzone card 1`] = `
<div <div
class="w-100 position-relative" class="gl-w-full gl-relative"
> >
<button <button
class="card design-dropzone-card design-dropzone-border w-100 h-100 gl-align-items-center gl-justify-content-center gl-p-3" class="card design-dropzone-card design-dropzone-border gl-w-full gl-h-full gl-align-items-center gl-justify-content-center gl-p-3"
> >
<div <div
class="gl-display-flex gl-align-items-center gl-justify-content-center gl-text-center gl-flex-direction-column" class="gl-display-flex gl-align-items-center gl-justify-content-center gl-text-center gl-flex-direction-column"
...@@ -416,11 +416,11 @@ exports[`Design management dropzone component when no slot provided renders defa ...@@ -416,11 +416,11 @@ exports[`Design management dropzone component when no slot provided renders defa
name="design-dropzone-fade" name="design-dropzone-fade"
> >
<div <div
class="card design-dropzone-border design-dropzone-overlay w-100 h-100 position-absolute d-flex-center p-3 bg-white" class="card design-dropzone-border design-dropzone-overlay gl-w-full gl-h-full gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center gl-p-3 gl-bg-white"
style="display: none;" style="display: none;"
> >
<div <div
class="mw-50 text-center" class="mw-50 gl-text-center"
> >
<h3 <h3
class="" class=""
...@@ -434,7 +434,7 @@ exports[`Design management dropzone component when no slot provided renders defa ...@@ -434,7 +434,7 @@ exports[`Design management dropzone component when no slot provided renders defa
</div> </div>
<div <div
class="mw-50 text-center" class="mw-50 gl-text-center"
style="display: none;" style="display: none;"
> >
<h3 <h3
...@@ -454,7 +454,7 @@ exports[`Design management dropzone component when no slot provided renders defa ...@@ -454,7 +454,7 @@ exports[`Design management dropzone component when no slot provided renders defa
exports[`Design management dropzone component when slot provided renders dropzone with slot content 1`] = ` exports[`Design management dropzone component when slot provided renders dropzone with slot content 1`] = `
<div <div
class="w-100 position-relative" class="gl-w-full gl-relative"
> >
<div> <div>
dropzone slot dropzone slot
...@@ -464,11 +464,11 @@ exports[`Design management dropzone component when slot provided renders dropzon ...@@ -464,11 +464,11 @@ exports[`Design management dropzone component when slot provided renders dropzon
name="design-dropzone-fade" name="design-dropzone-fade"
> >
<div <div
class="card design-dropzone-border design-dropzone-overlay w-100 h-100 position-absolute d-flex-center p-3 bg-white" class="card design-dropzone-border design-dropzone-overlay gl-w-full gl-h-full gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center gl-p-3 gl-bg-white"
style="display: none;" style="display: none;"
> >
<div <div
class="mw-50 text-center" class="mw-50 gl-text-center"
> >
<h3 <h3
class="" class=""
...@@ -482,7 +482,7 @@ exports[`Design management dropzone component when slot provided renders dropzon ...@@ -482,7 +482,7 @@ exports[`Design management dropzone component when slot provided renders dropzon
</div> </div>
<div <div
class="mw-50 text-center" class="mw-50 gl-text-center"
style="display: none;" style="display: none;"
> >
<h3 <h3
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7