github-mirror/BookStack
2
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-05-23 07:10:00 +08:00
Code Issues Actions 10 Packages Projects Releases Wiki Activity

Converted image-manager to be component/HTML based

Browse Source 
Instead of vue based.
This commit is contained in:
Dan Brown
2020-07-25 00:20:58 +01:00
parent b6aa232205
commit 02dc3154e3
23 changed files with 483 additions and 392 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
resources/sass/_colors.scss
View File

@ -51,6 +51,11 @@
fill: currentColor !important;
}
.text-white {
color: #fff;
fill: currentColor !important;
}
/*
* Entity text colors
*/

27
resources/sass/_components.scss
View File

@ -197,11 +197,8 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
transition: all cubic-bezier(.4, 0, 1, 1) 160ms;
overflow: hidden;
&.selected {
//transform: scale3d(0.92, 0.92, 0.92);
border: 4px solid #FFF;
overflow: hidden;
border-radius: 8px;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
transform: scale3d(0.92, 0.92, 0.92);
outline: currentColor 2px solid;
}
img {
width: 100%;
@ -231,7 +228,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
}
}
#image-manager .load-more {
.image-manager .load-more {
display: block;
text-align: center;
@include lightDark(background-color, #EEE, #444);
@ -243,6 +240,10 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
font-style: italic;
}
.image-manager .loading-container {
text-align: center;
}
.image-manager-sidebar {
width: 300px;
overflow-y: auto;
@ -250,6 +251,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
border-inline-start: 1px solid #DDD;
@include lightDark(border-color, #ddd, #000);
.inner {
min-height: auto;
padding: $-m;
}
img {
@ -291,6 +293,12 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
}
}
.image-manager .corner-button {
margin: 0;
border-radius: 0;
padding: $-m;
}
// Dropzone
/*
* The MIT License
@ -298,7 +306,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
*/
.dz-message {
font-size: 1em;
line-height: 2.35;
line-height: 2.85;
font-style: italic;
color: #888;
text-align: center;
@ -601,9 +609,14 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
display: inline-block;
@include lightDark(color, #666, #999);
cursor: pointer;
border-right: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: 2px solid transparent;
&.selected {
border-bottom: 2px solid var(--color-primary);
}
&:last-child {
border-right: 0;
}
}
}

5
resources/sass/_layout.scss
View File

@ -121,6 +121,11 @@ body.flexbox {
position: relative;
}
.flex-container-column {
display: flex;
flex-direction: column;
}
.flex {
min-height: 0;
flex: 1;

5
resources/sass/styles.scss
View File

@ -140,8 +140,10 @@ $btt-size: 40px;
.contained-search-box {
display: flex;
height: 38px;
input, button {
border-radius: 0;
border: 1px solid #ddd;
@include lightDark(border-color, #ddd, #000);
margin-inline-start: -1px;
}
@ -162,6 +164,9 @@ $btt-size: 40px;
background-color: $negative;
color: #EEE;
}
svg {
margin: 0;
}
}
.entity-selector {