mirror_php/formwork
1
0
Fork 0
mirror of https://github.com/getformwork/formwork.git synced 2025-02-24 09:42:43 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add dropdowns component

Browse Source
This commit is contained in:
Giuseppe Criscione 2019-04-19 18:49:05 +02:00
parent e474290271
commit c25e565098
10 changed files with 180 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
admin/assets/css/admin.css
View File

@ -879,6 +879,54 @@ input[type=range] {
.file-input-label.drag span {
background-color: #fff; }
.dropdown {
position: relative;
display: inline-block;
margin-bottom: 0.5rem; }
.dropdown-button {
margin-bottom: 0; }
.dropdown-button::after {
display: inline-block;
margin-left: 0.25rem;
height: 0;
border-top: 0.25rem solid;
border-right: 0.25rem solid transparent;
border-left: 0.25rem solid transparent;
content: ' ';
vertical-align: 0.125rem; }
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 4;
display: none;
float: left;
margin-top: 3px;
padding: 0.25rem 0;
min-width: 8rem;
border: 1px solid #cacaca;
border-radius: 3px;
background-color: #fff;
box-shadow: rgba(0, 0, 0, 0.15) 1px 1px 9px 0; }
.dropdown-item {
display: block;
padding: 0.25rem 1rem;
width: 100%;
color: #444;
white-space: nowrap;
font-size: 0.875rem; }
.dropdown-item:hover {
background-color: #f0f0f0;
color: #444; }
.dropdown-separator {
margin: 0.25rem 0;
height: 0;
border-top: 1px solid #cacaca; }
.editor-toolbar {
padding: 0 0.25rem;
border: 1px solid #cacaca;

2
admin/assets/css/admin.min.css vendored
View File

File diff suppressed because one or more lines are too long

20
admin/assets/js/app.js
View File

@ -2,6 +2,7 @@ var Formwork = {
init: function () {
Formwork.Modals.init();
Formwork.Forms.init();
Formwork.Dropdowns.init();
Formwork.Tooltips.init();
Formwork.Dashboard.init();
@ -123,6 +124,25 @@ Formwork.Dashboard = {
}
};
Formwork.Dropdowns = {
init: function () {
if ($('.dropdown').length > 0) {
$(document).click(function (event) {
var $button = $(event.target).closest('.dropdown-button');
if ($button.length > 0) {
var $dropdown = $('#' + $button.attr('data-dropdown'), '.dropdown');
var isVisible = $dropdown.is(':visible');
event.preventDefault();
}
$('.dropdown-menu').hide();
if ($dropdown !== undefined && !isVisible) {
$dropdown.show();
}
});
}
}
};
Formwork.Editor = function (id) {
var textarea = $('#' + id)[0];
var $toolbar = '.editor-toolbar[data-for=' + id + ']';

2
admin/assets/js/app.min.js vendored
View File

File diff suppressed because one or more lines are too long

18
admin/assets/js/src/components/dropdowns.js Normal file
View File

@ -0,0 +1,18 @@
Formwork.Dropdowns = {
init: function () {
if ($('.dropdown').length > 0) {
$(document).click(function (event) {
var $button = $(event.target).closest('.dropdown-button');
if ($button.length > 0) {
var $dropdown = $('#' + $button.attr('data-dropdown'), '.dropdown');
var isVisible = $dropdown.is(':visible');
event.preventDefault();
}
$('.dropdown-menu').hide();
if ($dropdown !== undefined && !isVisible) {
$dropdown.show();
}
});
}
}
};

1
admin/assets/js/src/main.js
View File

@ -2,6 +2,7 @@ var Formwork = {
init: function () {
Formwork.Modals.init();
Formwork.Forms.init();
Formwork.Dropdowns.init();
Formwork.Tooltips.init();
Formwork.Dashboard.init();

1
admin/assets/scss/admin.scss
View File

@ -7,6 +7,7 @@
@import 'components/buttons';
@import 'components/forms';
@import 'components/forms-custom';
@import 'components/dropdowns';
@import 'components/editor';
@import 'components/date-picker';
@import 'components/image-picker';

45
admin/assets/scss/components/_dropdowns.scss Normal file
View File

@ -0,0 +1,45 @@
.dropdown {
position: relative;
display: inline-block;
margin-bottom: $dropdown-margin-bottom;
}
.dropdown-button {
margin-bottom: 0;
@include caret;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 4;
display: none;
float: left;
margin-top: $dropdown-menu-margin-top;
padding: $dropdown-menu-padding-v $dropdown-menu-padding-h;
min-width: $dropdown-menu-min-width;
border: $dropdown-menu-border-width solid $color-gray;
border-radius: $dropdown-menu-border-radius;
background-color: #fff;
box-shadow: $dropdown-menu-box-shadow;
}
.dropdown-item {
display: block;
padding: $dropdown-item-padding-v $dropdown-item-padding-h;
width: 100%;
color: $color-gray-xxdark;
white-space: nowrap;
font-size: $dropdown-item-font-size;
&:hover {
background-color: $color-gray-xlight;
color: $color-gray-xxdark;
}
}
.dropdown-separator {
margin: $dropdown-separator-margin-v $dropdown-separator-margin-h;
height: 0;
border-top: $dropdown-separator-border-width solid $color-gray;
}

21
admin/assets/scss/components/_mixins.scss
View File

@ -32,6 +32,27 @@
@extend .i-#{$name}::before;
}
@mixin caret($direction: bottom) {
&::after {
display: inline-block;
margin-left: $caret-width;
height: 0;
@if $direction == bottom {
border-top: $caret-width solid;
border-right: $caret-width solid transparent;
border-left: $caret-width solid transparent;
} @else if $direction == top {
border-right: $caret-width solid transparent;
border-bottom: $caret-width solid;
border-left: $caret-width solid transparent;
}
content: ' ';
vertical-align: $caret-width / 2;
}
}
@mixin make-columns-globals($columns-count, $breakpoints) {
$selectors: '';

24
admin/assets/scss/components/_variables.scss
View File

@ -49,6 +49,8 @@ $columns-gutter: 30px;
$transition-time-s: 150ms;
$transition-time-m: 300ms;
$caret-width: 0.25rem;
// ===
// Typography
// ===
@ -165,6 +167,28 @@ $file-input-label-inner-padding-v: 1.5rem;
$file-input-label-inner-padding-h: 1rem;
$file-input-label-inner-border-width: 2px;
// ===
// Dropdowns
// ===
$dropdown-margin-bottom: $button-margin-bottom;
$dropdown-menu-margin-top: 3px;
$dropdown-menu-padding-v: 0.25rem;
$dropdown-menu-padding-h: 0;
$dropdown-menu-min-width: 8rem;
$dropdown-menu-border-width: 1px;
$dropdown-menu-border-radius: 3px;
$dropdown-menu-box-shadow: rgba(#000, 0.15) 1px 1px 9px 0;
$dropdown-item-padding-v: 0.25rem;
$dropdown-item-padding-h: 1rem;
$dropdown-item-font-size: $button-font-size;
$dropdown-separator-margin-v: 0.25rem;
$dropdown-separator-margin-h: 0;
$dropdown-separator-border-width: $dropdown-menu-border-width;
// ===
// Editor
// ===