michael/grub-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Use readonly attribute, input fields for grubs, too

Browse source
This commit is contained in:
Nicholas Kariniemi 2014-08-07 23:04:13 +03:00
parent 5a8bda4f0a
commit d05df00797
3 changed files with 21 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
public/css/styles.css
View file

@ -71,30 +71,24 @@ tr:hover .grub-close {
overflow: hidden; overflow: hidden;
} }
.grub-item .grub-static {
display: inline;
}
.grub-item .grub-input { .grub-item .grub-input {
display: none; display: inline;
} width: 100%;
border: none;
.grub-item.edit .grub-static { outline: none;
display: none; background: none;
} }
.grub-item.edit .grub-input { .grub-item.edit .grub-input {
display: inline; border-bottom-style: solid;
width: 100%; border-bottom-width: 1px;
} border-bottom-color: lightgray;
.grub-item .glyphicon {
margin-right: 5px;
} }
.completed { .completed {
text-decoration: line-through; text-decoration: line-through;
color: #a9a9a9; color: #a9a9a9;
background: #f7f7f7;
} }
.completed.edit { .completed.edit {
@ -135,6 +129,11 @@ tr:hover .grub-close {
width: inherit; width: inherit;
} }
.recipe-header-input[readonly] {
background: white;
cursor: default;
}
.recipe-header-input:focus { .recipe-header-input:focus {
border: none; border: none;
box-shadow: none; box-shadow: none;
@ -150,6 +149,11 @@ tr:hover .grub-close {
resize: none; resize: none;
} }
.recipe-grubs-input[readonly] {
background: white;
cursor: default;
}
.recipe-grubs-input:focus { .recipe-grubs-input:focus {
border: none; border: none;
box-shadow: none; box-shadow: none;

6
src/cljs/grub/view/grub.cljs
View file

@ -80,13 +80,9 @@
:on-touch-start #(transition-state owner :touch-start) :on-touch-start #(transition-state owner :touch-start)
:on-touch-cancel #(transition-state owner :touch-cancel) :on-touch-cancel #(transition-state owner :touch-cancel)
:on-touch-end #(transition-state owner :touch-end)} :on-touch-end #(transition-state owner :touch-end)}
[:span.grub-static
(if completed
[:span.glyphicon.glyphicon-check]
[:span.glyphicon.glyphicon-unchecked])
[:span.grub-text grub]]
[:input.grub-input [:input.grub-input
{:type "text" {:type "text"
:readOnly (if (= edit-state :editing) "" "readonly")
:value (:grub state) :value (:grub state)
:on-change #(om/set-state! owner :grub (.. % -target -value)) :on-change #(om/set-state! owner :grub (.. % -target -value))
:on-key-up #(when (dom/enter-pressed? %) (transition-state owner :enter))}]])) :on-key-up #(when (dom/enter-pressed? %) (transition-state owner :enter))}]]))

1
src/cljs/grub/view/recipe.cljs
View file

@ -79,6 +79,7 @@
[:div.panel-heading.recipe-header [:div.panel-heading.recipe-header
[:input.form-control.recipe-header-input [:input.form-control.recipe-header-input
{:type "text" {:type "text"
:readOnly (if (= edit-state :editing) "" "readonly")
:value name :value name
:on-change #(om/set-state! owner :name (dom/event-val %))}] :on-change #(om/set-state! owner :name (dom/event-val %))}]
[:button.btn.btn-primary.btn-sm.recipe-add-grubs-btn [:button.btn.btn-primary.btn-sm.recipe-add-grubs-btn