detail_content_layout.rb

detail_content_layout.rb

class DetailContentLayout < MK::Layout
  ############################################################
  # SETUP
  ############################################################
  view :note_container

  ############################################################
  # LAYOUT
  ############################################################
  def layout
    root :root do
      add UILabel, :title_label
      add UIView, :divider_view
      add UIView, :info_container do
        add UIImageView, :used_image
        add UILabel, :used_label
        add UIImageView, :color_image
        add UILabel, :color_label
        add UIImageView, :ruler_image
        add UILabel, :ruler_label
      end

      add ProfileView, :profile_view

      list = [
        { title: 'ORIGINAL BOX', value: "View" },
        { title: 'PURCHASE RECEIPT', value: "No" },
        { title: 'LISTING POSTED', value: "23 days ago" },
        { title: 'COLOR', value: "Safety Orange / Silver / Black" },
        { title: 'RELEASE YEAR', value: "2014" }
      ]
      add UIView, :list_container do
        list.each_with_index do |hash, i|
          add UIView, :list_row do
            add UILabel, :list_title do
              text hash[:title]
            end
            add UILabel, :list_value do
              text hash[:value]
            end
            add UIView, :bottom_border unless i == list.size - 1
          end
        end
      end

      add UIView, :note_container do
        add UILabel, :note_label
      end
    end
  end

  ############################################################
  # STYLES
  ############################################################
  # INFO SECTION
  ############################################################
  def root_style
    resize_to_subview_height true
  end

  def title_label_style
    frame from_top(width: "100%-32", down: 16)
    title_label("Air Max Lunar 90 WR")
    center_label
  end

  def divider_view_style
    frame below(:title_label, down: 16, width: "100%-32", height: 1)
    background_color grey_line
  end

  def info_container_style
    frame below(:divider_view, down: 8, width: "100%-32")
  end

  def used_image_style
    frame from_top_left(width: "33%", height: 36)
    tinted_image("condition")
    tint_color black
    resize_superview_to_fit_height
  end

  def used_label_style
    frame below(:used_image, width: "33%")
    bold_label("USED")
    center_label
    resize_superview_to_fit_height
  end

  def color_image_style
    frame from_top(width: "34%", height: 36)
    tinted_image("color")
    tint_color black
    resize_superview_to_fit_height
  end

  def color_label_style
    frame below(:color_image, width: "34%")
    bold_label("TRAFFIC CONE MAGNA ULTRICIES LIGULA VESTIBULUM NIBH")
    center_label
    resize_superview_to_fit_height
  end

  def ruler_image_style
    frame from_top_right(width: "33%", height: 36)
    tinted_image("size")
    tint_color black
    resize_superview_to_fit_height
  end

  def ruler_label_style
    frame below(:ruler_image, width: "33%")
    bold_label("10.5")
    center_label
    resize_superview_to_fit_height
  end

  ############################################################
  # PROFILE SECTION
  ############################################################
  def profile_view_style
    frame below(:info_container, down: 32, left: 16)
    resize_superview_to_fit_height
  end

  ############################################################
  # LIST SECTION
  ############################################################
  def list_container_style
    frame below(:profile_view, width: "100%-32", right: 16, down: 16)
    resize_superview_to_fit_height
  end

  def list_row_style
    if target == first(:list_row)
      frame from_top(width: "100%", height: 48)
    else
      frame below(prev(:list_row), width: "100%", height: 48)
    end
    resize_superview_to_fit_height
  end

  def list_title_style
    frame from_left(width: "100%", height: 48)
    left_label
    font bold(14)
  end

  def list_value_style
    frame from_right(width: "100%", height: 48)
    right_label
    font regular(14)
  end

  def bottom_border_style
    frame from_bottom(width: "100%", height: 1)
    background_color grey_line
  end

  ############################################################
  # NOTE SECTION
  ############################################################
  def note_container_style
    frame below(:list_container, width: "100%", left: 16, down: 16)
    background_color grey_background
    resize_superview_to_fit_height
  end

  def note_label_style
    frame from_top(width: "100%-32")
    attributed_text "Notes from Adrian:".attrd.font(bold(14)) + " Updated to endure the elements of the fall and winter season, the Air Max Lunar90 WR's upper is composed of a seam-sealed water-resistant nylon.".attrd.font(regular(14))
    label
    height target.height + 32
    resize_superview_to_fit_height
  end
end