summaryrefslogtreecommitdiffstats
path: root/client/components/forms
diff options
context:
space:
mode:
authorMaxime Quandalle <maxime@quandalle.com>2015-05-29 23:35:30 +0200
committerMaxime Quandalle <maxime@quandalle.com>2015-05-30 03:50:14 +0200
commit2c0030da62b9a1e59a55e3429fe514bbd51e1ee3 (patch)
treeb2834702806e59cb05ea02e2c377266eb17d6c8f /client/components/forms
parent6457615e6ac6717d2175be9483388d4d70ea1c4a (diff)
downloadwekan-2c0030da62b9a1e59a55e3429fe514bbd51e1ee3.tar.gz
wekan-2c0030da62b9a1e59a55e3429fe514bbd51e1ee3.tar.bz2
wekan-2c0030da62b9a1e59a55e3429fe514bbd51e1ee3.zip
Implement multi-selection
The UI and the internal APIs are still rough around the edges but the feature is basically working. You can now select multiple cards and move them together or (un|)assign them a label.
Diffstat (limited to 'client/components/forms')
-rw-r--r--client/components/forms/forms.styl68
-rw-r--r--client/components/forms/inlinedform.js4
2 files changed, 32 insertions, 40 deletions
diff --git a/client/components/forms/forms.styl b/client/components/forms/forms.styl
index c572863d..06796170 100644
--- a/client/components/forms/forms.styl
+++ b/client/components/forms/forms.styl
@@ -30,10 +30,6 @@ input[type="radio"]
-webkit-appearance: radio
min-height: inherit
-input[type="checkbox"]
- -webkit-appearance: checkbox
- margin-right: 4px
-
input[type="text"],
input[type="password"],
input[type="email"]
@@ -182,10 +178,6 @@ fieldset
input[type="hidden"]
display: none
-input[type="checkbox"],
-input[type="radio"]
- display: inline
-
.radio-div,
.check-div
display: block
@@ -233,6 +225,36 @@ textarea
font-size: 26px
margin: 3px 4px
+// Material Design checkboxes
+[type="checkbox"]:not(:checked),
+[type="checkbox"]:checked
+ position: absolute
+ left: -9999px
+ visibility: hidden
+
+.materialCheckBox
+ position: relative
+ width: 13px
+ height: @width
+ z-index: 0
+ border: 2px solid #5a5a5a
+ border-radius: 1px
+ transition: .2s
+ margin: 0
+ cursor: pointer
+
+ &.is-checked
+ top: -4px
+ left: -3px
+ width: 7px
+ height: 15px
+ margin-right: 6px
+ border-top: 2px solid transparent
+ border-left: 2px solid transparent
+ transform: rotate(40deg)
+ -webkit-backface-visibility: hidden
+ transform-origin: 100% 100%
+
.button-link
background: #fff
background: linear-gradient(#fff, #f5f5f5)
@@ -355,9 +377,6 @@ textarea
background-color: rgba(255, 255, 255, .3)
border-color: transparent
- .icon-sm
- color: #fff
-
&:active
background: #2e85b8
background: linear-gradient(#2e85b8, #28739f)
@@ -401,7 +420,6 @@ textarea
border-color: #8b0e0e
button
-
&.quiet-button,
&.loud-text-button
background: none
@@ -438,11 +456,6 @@ button
&.w-img
padding-left: 28px
- .icon-sm
- left: 6px
- position: absolute
- top: 6px
-
&:hover
color: #4d4d4d
background: #dcdcdc
@@ -575,29 +588,8 @@ button
border-color: #2e85b8
color: #fff
-.form-grid
- display: flex
- flex-wrap: wrap
- width: 100%
-
-.form-grid-child
- flex: 1
- margin: 0 0 8px
-
-.form-grid-child-full
- flex: 1 1 100%
-
-.form-grid-child-threequarters
- flex: 3
- margin-right: 8px
-
-.form-grid-child-twothirds
- flex: 2
- margin-right: 8px
-
.dropdown-menu
border-radius: 2px
- // padding-bottom: 3px
overflow: hidden
li
diff --git a/client/components/forms/inlinedform.js b/client/components/forms/inlinedform.js
index f2774084..b8442a28 100644
--- a/client/components/forms/inlinedform.js
+++ b/client/components/forms/inlinedform.js
@@ -97,6 +97,6 @@ BlazeComponent.extendComponent({
// Press escape to close the currently opened inlinedForm
EscapeActions.register('inlinedForm',
- function() { return currentlyOpenedForm.get() !== null; },
- function() { currentlyOpenedForm.get().close(); }
+ function() { currentlyOpenedForm.get().close(); },
+ function() { return currentlyOpenedForm.get() !== null; }
);