1
1
mirror of https://github.com/aelve/guide.git synced 2024-12-24 21:35:06 +03:00

Recolor items in a less ugly way

This commit is contained in:
Artyom 2016-03-17 03:35:56 +03:00
parent 9b38dc68c0
commit f116663b29
3 changed files with 37 additions and 61 deletions

View File

@ -330,23 +330,22 @@ submitTrait =
submitItemInfo :: JSFunction a => a
submitItemInfo =
makeJSFunction "submitItemInfo" ["infoNode", "otherNodes", "itemId", "form"]
makeJSFunction "submitItemInfo" ["infoNode", "bodyNode", "itemId", "form"]
[text|
// If the group was changed, we need to recolor the whole item,
// but we don't want to rerender the item on the server because
// it would lose the item's state (e.g. what if the traits were
// being edited? etc). So, instead we query colors from the server
// and change the color of the other divs (traits, notes, etc)
// manually.
// and change the color of the item's body manually.
$.post("/set/item/"+itemId+"/info", $(form).serialize())
.done(function (data) {
// Note the order first we change the color, then we replace
// the info node. The reason is that otherwise the otherNodes
// the info node. The reason is that otherwise the bodyNode
// selector might become invalid (if it depends on the infoNode
// selector).
$.get("/render/item/"+itemId+"/colors")
.done(function (colors) {
$(otherNodes).css("background-color", colors.light);
$(bodyNode).css("background-color", colors.light);
$(infoNode).replaceWith(data);
});
});

View File

@ -99,18 +99,15 @@ renderMethods = Spock.subcomponent "render" $ do
-- Item description
Spock.get (itemVar <//> "description") $ \itemId -> do
item <- dbQuery (GetItem itemId)
category <- dbQuery (GetCategoryByItem itemId)
lucid $ renderItemDescription category item
lucid $ renderItemDescription item
-- Item ecosystem
Spock.get (itemVar <//> "ecosystem") $ \itemId -> do
item <- dbQuery (GetItem itemId)
category <- dbQuery (GetCategoryByItem itemId)
lucid $ renderItemEcosystem category item
lucid $ renderItemEcosystem item
-- Item notes
Spock.get (itemVar <//> "notes") $ \itemId -> do
item <- dbQuery (GetItem itemId)
category <- dbQuery (GetCategoryByItem itemId)
lucid $ renderItemNotes category item
lucid $ renderItemNotes item
-- TODO: [easy] use window.onerror to catch and show all JS errors (showing
-- could be done by displaying an alert)
@ -165,20 +162,17 @@ setMethods = Spock.subcomponent "set" $ do
Spock.post (itemVar <//> "description") $ \itemId -> do
content' <- param' "content"
item <- dbUpdate (SetItemDescription itemId content')
category <- dbQuery (GetCategoryByItem itemId)
lucid $ renderItemDescription category item
lucid $ renderItemDescription item
-- Item ecosystem
Spock.post (itemVar <//> "ecosystem") $ \itemId -> do
content' <- param' "content"
item <- dbUpdate (SetItemEcosystem itemId content')
category <- dbQuery (GetCategoryByItem itemId)
lucid $ renderItemEcosystem category item
lucid $ renderItemEcosystem item
-- Item notes
Spock.post (itemVar <//> "notes") $ \itemId -> do
content' <- param' "content"
item <- dbUpdate (SetItemNotes itemId content')
category <- dbQuery (GetCategoryByItem itemId)
lucid $ renderItemNotes category item
lucid $ renderItemNotes item
-- Trait
Spock.post (itemVar <//> traitVar) $ \itemId traitId -> do
content' <- param' "content"

View File

@ -297,16 +297,18 @@ getItemHue category item = case item^.group_ of
-- TODO: perhaps use jQuery Touch Punch or something to allow dragging items
-- instead of using arrows? Touch Punch works on mobile, too
renderItem :: Category -> Item -> HtmlT IO ()
renderItem cat item =
renderItem category item =
div_ [id_ ("item-" <> uidToText (item^.uid)), class_ "item"] $ do
renderItemInfo cat item
renderItemInfo category item
-- TODO: replace “edit description” with a big half-transparent pencil
-- to the left of it
renderItemDescription cat item
renderItemEcosystem cat item
renderItemTraits cat item
-- TODO: add a separator here? [very-easy]
renderItemNotes cat item
let bg = hueToLightColor $ getItemHue category item
div_ [class_ "item-body", style_ ("background-color:" <> bg)] $ do
renderItemDescription item
renderItemEcosystem item
renderItemTraits item
-- TODO: add a separator here? [very-easy]
renderItemNotes item
-- TODO: some spinning thingy that spins in the corner of the page while a
-- request is happening
@ -315,6 +317,7 @@ renderItem cat item =
-- category, item and trait) without passing everything explicitly?
-- TODO: warn when a library isn't on Hackage but is supposed to be
-- TODO: give a link to oldest available docs when the new docs aren't there
renderItemInfo :: Category -> Item -> HtmlT IO ()
renderItemInfo cat item = do
@ -376,12 +379,12 @@ renderItemInfo cat item = do
section "editing" [] $ do
let selectedIf p x = if p then with x [selected_ "selected"] else x
-- otherNodes are all nodes that have to be recolored when this node is
-- recolored
let otherNodes = JS.selectChildren (JS.selectParent this)
(JS.selectClass "item-body")
-- When the info/header node changes its group (and is hence
-- recolored), item's body has to be recolored too
let bodyNode = JS.selectChildren (JS.selectParent this)
(JS.selectClass "item-body")
let formSubmitHandler formNode =
JS.submitItemInfo (this, otherNodes, item^.uid, formNode)
JS.submitItemInfo (this, bodyNode, item^.uid, formNode)
form_ [onFormSubmit formSubmitHandler] $ do
-- All inputs have "autocomplete = off" thanks to
-- <http://stackoverflow.com/q/8311455>
@ -455,16 +458,11 @@ renderItemInfo cat item = do
-- TODO: categories without items (e.g. “web dev”) that list links to other
-- categories
renderItemDescription :: Category -> Item -> HtmlT IO ()
renderItemDescription category item = do
let bg = hueToLightColor $ getItemHue category item
-- If the structure of HTML changes here, don't forget to update the
-- 'otherNodes' selector in 'renderItemInfo'. Specifically, we depend on
-- having a div with a class “item-body” here.
renderItemDescription :: Item -> HtmlT IO ()
renderItemDescription item = do
let thisId = "item-description-" <> uidToText (item^.uid)
this = JS.selectId thisId
div_ [id_ thisId, class_ "item-description item-body",
style_ ("background-color:" <> bg)] $ do
div_ [id_ thisId, class_ "item-description"] $ do
section "normal" [shown, noScriptShown] $ do
if item^.description == ""
@ -479,16 +477,11 @@ renderItemDescription category item = do
(\val -> JS.submitItemDescription (this, item^.uid, val))
(JS.switchSection (this, "normal" :: Text))
renderItemEcosystem :: Category -> Item -> HtmlT IO ()
renderItemEcosystem category item = do
let bg = hueToLightColor $ getItemHue category item
-- If the structure of HTML changes here, don't forget to update the
-- 'otherNodes' selector in 'renderItemInfo'. Specifically, we depend on
-- having a div with a class “item-body” here.
renderItemEcosystem :: Item -> HtmlT IO ()
renderItemEcosystem item = do
let thisId = "item-ecosystem-" <> uidToText (item^.uid)
this = JS.selectId thisId
div_ [id_ thisId, class_ "item-ecosystem item-body",
style_ ("background-color:" <> bg)] $ do
div_ [id_ thisId, class_ "item-ecosystem"] $ do
strong_ "Ecosystem"
emptySpan "0.5em"
imgButton "edit ecosystem" "/pencil.svg"
@ -507,14 +500,9 @@ renderItemEcosystem category item = do
(\val -> JS.submitItemEcosystem (this, item^.uid, val))
(Just (JS.switchSection (this, "normal" :: Text)))
renderItemTraits :: Category -> Item -> HtmlT IO ()
renderItemTraits cat item = do
let bg = hueToLightColor $ getItemHue cat item
-- If the structure of HTML changes here, don't forget to update the
-- 'otherNodes' selector in 'renderItemInfo'. Specifically, we depend on
-- having a div with a class “item-body” here.
div_ [class_ "item-traits item-body",
style_ ("background-color:" <> bg)] $ do
renderItemTraits :: Item -> HtmlT IO ()
renderItemTraits item = do
div_ [class_ "item-traits"] $ do
this <- thisNode
div_ [class_ "traits-groups-container"] $ do
div_ [class_ "traits-group"] $ do
@ -609,16 +597,11 @@ renderTrait itemId trait = do
-- TODO: [very-easy] focus the notes textarea on edit (can use jQuery's
-- .focus() on it)
renderItemNotes :: Category -> Item -> HtmlT IO ()
renderItemNotes category item = do
let bg = hueToLightColor $ getItemHue category item
-- If the structure of HTML changes here, don't forget to update the
-- 'otherNodes' selector in 'renderItemInfo'. Specifically, we depend on
-- having a div with a class “item-body” here.
renderItemNotes :: Item -> HtmlT IO ()
renderItemNotes item = do
let thisId = "item-notes-" <> uidToText (item^.uid)
this = JS.selectId thisId
div_ [id_ thisId, class_ "item-notes item-body",
style_ ("background-color:" <> bg)] $ do
div_ [id_ thisId, class_ "item-notes"] $ do
-- TODO: this duplicates code from renderCategoryNotes, try to reduce
-- duplication