mirror of
https://github.com/documize/community.git
synced 2025-07-24 23:59:47 +02:00
Move Add Section wizard to new UI framework
This commit is contained in:
Harvey Kandola
parent
60d2ef57bb
commit
60f8cb7b5b
5 changed files with 102 additions and 122 deletions
28
gui/app/styles/core/bootstrap.scss
vendored
28
gui/app/styles/core/bootstrap.scss
vendored
|
|
@ -93,9 +93,6 @@ $link-hover-decoration: none;
|
|||
|
||||
// Optional
|
||||
@import "node_modules/bootstrap/scss/reboot";
|
||||
// @import "node_modules/bootstrap/scss/grid";
|
||||
// @import "node_modules/bootstrap/scss/buttons";
|
||||
// @import "node_modules/bootstrap/scss/button-group";
|
||||
@import "node_modules/bootstrap/scss/forms";
|
||||
@import "node_modules/bootstrap/scss/custom-forms";
|
||||
@import "node_modules/bootstrap/scss/input-group";
|
||||
|
|
@ -107,6 +104,19 @@ $link-hover-decoration: none;
|
|||
.modal-80 {
|
||||
max-width: 80% !important;
|
||||
}
|
||||
.modal-70 {
|
||||
max-width: 70% !important;
|
||||
}
|
||||
.modal-60 {
|
||||
max-width: 60% !important;
|
||||
}
|
||||
.modal-50 {
|
||||
max-width: 50% !important;
|
||||
}
|
||||
|
||||
.modal-backdrop {
|
||||
z-index: 1041;
|
||||
}
|
||||
|
||||
body.modal-open {
|
||||
padding-right: 0 !important;
|
||||
|
|
@ -130,15 +140,3 @@ body.modal-open {
|
|||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
// Bootstrap override that removes gutter space on smaller screens
|
||||
// @media (max-width: 1200px) {
|
||||
// .container {
|
||||
// width: 100%;
|
||||
// max-width: none;
|
||||
// }
|
||||
// }
|
||||
|
|
|
|||
|
|
@ -1,38 +1,23 @@
|
|||
// Mobile first design
|
||||
.new-section-wizard {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
.new-section-caption {
|
||||
margin: 20px 0 10px 0;
|
||||
color: $theme-500;
|
||||
font-size: 1.4rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.new-section-empty {
|
||||
font-size: 1.2rem;
|
||||
color: map-get($gray-shades, 600);
|
||||
}
|
||||
|
||||
.preset-list {
|
||||
margin: 0;
|
||||
.options {
|
||||
margin: 10px;
|
||||
padding: 0;
|
||||
|
||||
> .item {
|
||||
@include border-radius(3px);
|
||||
list-style: none;
|
||||
> .preset-option {
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
margin: 0 20px 20px 0;
|
||||
padding: 12px 0 0 20px;
|
||||
height: 60px;
|
||||
border: 1px solid map-get($gray-shades, 300);
|
||||
background-color: map-get($gray-shades, 100);
|
||||
|
||||
&:hover {
|
||||
border-color: $theme-500;
|
||||
background-color: $theme-100;
|
||||
}
|
||||
white-space: nowrap;
|
||||
padding: 0.375rem 0.75rem;
|
||||
margin: 10px;
|
||||
background-color: map-get($yellow-shades, 300);
|
||||
border: 1px solid map-get($yellow-shades, 400);
|
||||
@extend .no-select;
|
||||
@include border-radius(2px);
|
||||
@include button-shadow-light();
|
||||
|
||||
.icon {
|
||||
text-align: center;
|
||||
|
|
@ -48,56 +33,60 @@
|
|||
}
|
||||
}
|
||||
|
||||
> .title {
|
||||
> .name {
|
||||
display: inline-block;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 500;
|
||||
color: $color-black-light-1;
|
||||
color: map-get($yellow-shades, 900);
|
||||
letter-spacing: 0.5px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: map-get($yellow-shades, 400);
|
||||
}
|
||||
}
|
||||
|
||||
> .block-option {
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
padding: 0.375rem 0.75rem;
|
||||
margin: 10px;
|
||||
background-color: map-get($yellow-shades, 200);
|
||||
border: 1px solid map-get($yellow-shades, 300);
|
||||
@extend .no-select;
|
||||
@include border-radius(2px);
|
||||
@include button-shadow-light();
|
||||
|
||||
> .name {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 500;
|
||||
color: map-get($yellow-shades, 800);
|
||||
letter-spacing: 0.5px;
|
||||
@extend .text-truncate;
|
||||
}
|
||||
|
||||
> .desc {
|
||||
color: map-get($yellow-shades, 700);
|
||||
font-size: 0.9rem;
|
||||
font-weight: 300;
|
||||
@extend .text-truncate;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: map-get($yellow-shades, 300);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.block-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
> .item {
|
||||
@include border-radius(3px);
|
||||
list-style: none;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
margin: 0 20px 20px 0;
|
||||
padding: 12px 20px;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
border: 1px solid map-get($gray-shades, 300);
|
||||
background-color: map-get($gray-shades, 100);
|
||||
|
||||
&:hover {
|
||||
border-color: $theme-500;
|
||||
background-color: $theme-100;
|
||||
}
|
||||
|
||||
> .actions {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 8px;
|
||||
}
|
||||
|
||||
> .details {
|
||||
> .title {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 500;
|
||||
color: $color-black-light-1;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
> .desc {
|
||||
color: $color-black-light-1;
|
||||
font-size: 1rem;
|
||||
}
|
||||
// Desktop sizing
|
||||
@media (min-width: $display-break-2) {
|
||||
.options {
|
||||
> .preset-option,
|
||||
> .block-option {
|
||||
display: inline-block;
|
||||
width: 300px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,46 +1,39 @@
|
|||
<div id="add-section-modal" class="modal" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog modal-80" role="document">
|
||||
<div class="modal-dialog modal-60" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">Insert Section</div>
|
||||
<div class="modal-body">
|
||||
|
||||
<div id="new-section-wizard" class="new-section-wizard">
|
||||
<div class="box">
|
||||
<div class="form-group">
|
||||
{{focus-input type="text" id="new-section-name" value=newSectionName
|
||||
class=(if newSectionNameMissing "mousetrap form-control form-control-lg is-invalid" "mousetrap form-control form-control-lg")
|
||||
placeholder="Enter section name" autocomplete="off"}}
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="new-section-caption">Select Section Type</div>
|
||||
<ul class="preset-list">
|
||||
{{#each sections as |section|}}
|
||||
<li class="item" {{action "onInsertSection" section}}>
|
||||
<div class="icon">
|
||||
<img class="img" src="/sections/{{section.contentType}}.png" srcset="/sections/{{section.contentType}}@2x.png">
|
||||
</div>
|
||||
<div class="title">{{section.title}}</div>
|
||||
</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
</div>
|
||||
<div class="new-section-caption">Select Re-usable Content</div>
|
||||
{{#if hasBlocks}}
|
||||
<ul class="block-list">
|
||||
{{#each blocks as |block|}}
|
||||
<li class="item">
|
||||
{{#attach-tooltip showDelay=1000}}Published by {{block.firstname}} {{block.lastname}}, {{time-ago block.created}} — used {{ block.used }} times{{/attach-tooltip}}
|
||||
<div class="details" {{action "onInsertBlock" block}}>
|
||||
<div class="title text-truncate">{{block.title}}</div>
|
||||
<div class="desc text-truncate">{{block.excerpt}}</div>
|
||||
</div>
|
||||
</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
{{else}}
|
||||
<div class="new-section-empty">You have no reusable content — publish any document section as a template for others to reuse</div>
|
||||
{{/if}}
|
||||
<div class="form-group">
|
||||
{{focus-input type="text" id="new-section-name" value=newSectionName
|
||||
class=(if newSectionNameMissing "mousetrap form-control form-control-lg is-invalid" "mousetrap form-control form-control-lg")
|
||||
placeholder="Enter section name" autocomplete="off"}}
|
||||
</div>
|
||||
|
||||
<ul class="options">
|
||||
{{#each sections as |section|}}
|
||||
<li class="preset-option" {{action "onInsertSection" section}}>
|
||||
<div class="icon">
|
||||
<img class="img" src="/sections/{{section.contentType}}.png" srcset="/sections/{{section.contentType}}@2x.png">
|
||||
</div>
|
||||
<div class="name">{{section.title}}</div>
|
||||
</li>
|
||||
{{/each}}
|
||||
{{#if hasBlocks}}
|
||||
<br>
|
||||
<br>
|
||||
{{/if}}
|
||||
{{#each blocks as |block|}}
|
||||
<li class="block-option" {{action "onInsertBlock" block}}>
|
||||
<div class="name">{{block.title}}</div>
|
||||
<div class="desc">{{block.excerpt}}</div>
|
||||
{{#attach-tooltip showDelay=1000}}
|
||||
{{block.excerpt}}<br>
|
||||
Published by {{block.firstname}} {{block.lastname}}, {{time-ago block.created}}
|
||||
{{/attach-tooltip}}
|
||||
</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<div class="document-meta">
|
||||
{{#link-to 'folder.index' space.id space.slug class="no-print"}}
|
||||
{{#link-to "folder.index" space.id space.slug class="no-print"}}
|
||||
{{ui/ui-button light=true color=constants.Color.Yellow uppercase=false
|
||||
icon=constants.Icon.ArrowLeft label=space.name}}
|
||||
{{/link-to}}
|
||||
|
|
|
|||
|
|
@ -155,7 +155,7 @@
|
|||
<div class="modal-footer">
|
||||
{{ui/ui-button color=constants.Color.Gray light=true label=constants.Label.Cancel dismiss=true}}
|
||||
{{ui/ui-button-gap}}
|
||||
{{ui/ui-button color=constants.Color.Delete light=true label=constants.Label.Delete onClick=(action "onDeletePage")}}
|
||||
{{ui/ui-button color=constants.Color.Red light=true label=constants.Label.Delete onClick=(action "onDeletePage")}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue