OpenProject Lookbook

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<link rel="stylesheet" href="/highlighting/styles/ca365f20d304e39e84428d24ae49c40360668dfaec0e66935ed27ce2a4a95465.css" media="all" />
<form id="asdf" action="/abc" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="4CbEL2cGSXHwSihf5j7cstTsL39cHuGCcsvj7OabNSRQUg4kOSQaSqhMxrfGt0fuIuzT3AjJCqCgeYwapvLSJw" autocomplete="off" />
  <div class="FormControl-spacingWrapper">
    <div data-view-component="true">
      <div class="FormControl width-full FormControl--fullWidth">
        <label class="FormControl-label" for="status_id">
          Color
        </label>
        <div class="FormControl-input-wrap FormControl-input-width--auto">
          <input autocomplete="off" type="hidden" name="status[color_id]" id="status_color_id" />
          <opce-colors-autocompleter class="colors-autocomplete form--select-container" data-colors="[{"name":"Blue (dark)","value":1},{"name":"Blue","value":2},{"name":"Blue (light)","value":3},{"name":"Green (light)","value":4},{"name":"Green (dark)","value":5},{"name":"yellow","value":6},{"name":"Orange","value":7},{"name":"Red","value":8},{"name":"Magenta","value":9},{"name":"White","value":10},{"name":"Grey (light)","value":11},{"name":"Grey","value":12},{"name":"Grey (dark)","value":13},{"name":"Black","value":14},{"name":"Lachs","value":15},{"name":"gray-5","value":16},{"name":"Pink","value":18},{"name":"Violet","value":19},{"name":"gray-0","value":20},{"name":"gray-1","value":21},{"name":"gray-2","value":22},{"name":"gray-3","value":23},{"name":"gray-4","value":24},{"name":"gray-5","value":25},{"name":"gray-6","value":26},{"name":"gray-7","value":27},{"name":"gray-8","value":28},{"name":"gray-9","value":29},{"name":"red-0","value":30},{"name":"red-1","value":31},{"name":"red-2","value":32},{"name":"red-3","value":33},{"name":"red-4","value":34},{"name":"red-5","value":35},{"name":"red-6","value":36},{"name":"red-7","value":37},{"name":"red-8","value":38},{"name":"red-9","value":39},{"name":"pink-0","value":40},{"name":"pink-1","value":41},{"name":"pink-2","value":42},{"name":"pink-3","value":43},{"name":"pink-4","value":44},{"name":"pink-5","value":45},{"name":"pink-6","value":46},{"name":"pink-7","value":47},{"name":"pink-8","value":48},{"name":"pink-9","value":49},{"name":"grape-0","value":50},{"name":"grape-1","value":51},{"name":"grape-2","value":52},{"name":"grape-3","value":53},{"name":"grape-4","value":54},{"name":"grape-5","value":55},{"name":"grape-6","value":56},{"name":"grape-7","value":57},{"name":"grape-8","value":58},{"name":"grape-9","value":59},{"name":"violet-0","value":60},{"name":"violet-1","value":61},{"name":"violet-2","value":62},{"name":"violet-3","value":63},{"name":"violet-4","value":64},{"name":"violet-5","value":65},{"name":"violet-6","value":66},{"name":"violet-7","value":67},{"name":"violet-8","value":68},{"name":"violet-9","value":69},{"name":"indigo-0","value":70},{"name":"indigo-1","value":71},{"name":"indigo-2","value":72},{"name":"indigo-3","value":73},{"name":"indigo-4","value":74},{"name":"indigo-5","value":75},{"name":"indigo-6","value":76},{"name":"indigo-7","value":77},{"name":"indigo-8","value":78},{"name":"indigo-9","value":79},{"name":"blue-0","value":80},{"name":"blue-1","value":81},{"name":"blue-2","value":82},{"name":"blue-3","value":83},{"name":"blue-4","value":84},{"name":"blue-5","value":85},{"name":"blue-6","value":86},{"name":"blue-7","value":87},{"name":"blue-8","value":88},{"name":"blue-9","value":89},{"name":"cyan-0","value":90},{"name":"cyan-1","value":91},{"name":"cyan-2","value":92},{"name":"cyan-3","value":93},{"name":"cyan-4","value":94},{"name":"cyan-5","value":95},{"name":"cyan-6","value":96},{"name":"cyan-7","value":97},{"name":"cyan-8","value":98},{"name":"cyan-9","value":99},{"name":"teal-0","value":100},{"name":"teal-1","value":101},{"name":"teal-2","value":102},{"name":"teal-3","value":103},{"name":"teal-4","value":104},{"name":"teal-5","value":105},{"name":"teal-6","value":106},{"name":"teal-7","value":107},{"name":"teal-8","value":108},{"name":"teal-9","value":109},{"name":"green-0","value":110},{"name":"green-1","value":111},{"name":"green-2","value":112},{"name":"green-3","value":113},{"name":"green-4","value":114},{"name":"green-5","value":115},{"name":"green-6","value":116},{"name":"green-7","value":117},{"name":"green-8","value":118},{"name":"green-9","value":119},{"name":"lime-0","value":120},{"name":"lime-1","value":121},{"name":"lime-2","value":122},{"name":"lime-3","value":123},{"name":"lime-4","value":124},{"name":"lime-5","value":125},{"name":"lime-6","value":126},{"name":"lime-7","value":127},{"name":"lime-8","value":128},{"name":"lime-9","value":129},{"name":"yellow-0","value":130},{"name":"yellow-1","value":131},{"name":"yellow-2","value":132},{"name":"yellow-3","value":133},{"name":"yellow-4","value":134},{"name":"yellow-5","value":135},{"name":"yellow-6","value":136},{"name":"yellow-7","value":137},{"name":"yellow-8","value":138},{"name":"yellow-9","value":139},{"name":"orange-0","value":140},{"name":"orange-1","value":141},{"name":"orange-2","value":142},{"name":"orange-3","value":143},{"name":"orange-4","value":144},{"name":"orange-5","value":145},{"name":"orange-6","value":146},{"name":"orange-7","value":147},{"name":"orange-8","value":148},{"name":"orange-9","value":149},{"name":"PM2 Orange","value":150},{"name":"PM2 Purple","value":151},{"name":"PM2 Red","value":152},{"name":"PM2 Magenta","value":153},{"name":"PM2 Green Yellow","value":154}]" data-classes="ng-select--primerized" data-update-input="status[color_id]"></opce-colors-autocompleter>
        </div>
        <div class="FormControl-inlineValidation" id="validation-3afc4b17-dc96-4fbc-a0a9-9a591e734a79" hidden="hidden">
          <span class="FormControl-inlineValidation--visual" data-target="" hidden><svg aria-hidden="true" height="12" viewBox="0 0 12 12" version="1.1" width="12" data-view-component="true" class="octicon octicon-check-circle-fill">
              <path d="M6 0a6 6 0 1 1 0 12A6 6 0 0 1 6 0Zm-.705 8.737L9.63 4.403 8.392 3.166 5.295 6.263l-1.7-1.702L2.356 5.8l2.938 2.938Z"></path>
            </svg></span>
          <span class=" FormControl-inlineValidation--visual" data-target=""><svg aria-hidden="true" height="12" viewBox="0 0 12 12" version="1.1" width="12" data-view-component="true" class="octicon octicon-alert-fill">
              <path d="M4.855.708c.5-.896 1.79-.896 2.29 0l4.675 8.351a1.312 1.312 0 0 1-1.146 1.954H1.33A1.313 1.313 0 0 1 .183 9.058ZM7 7V3H5v4Zm-1 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"></path>
            </svg></span>
          <span></span>
        </div>
        <span class="FormControl-caption" id="caption-3afc4b17-dc96-4fbc-a0a9-9a591e734a79">Caption: The dropdown might be offset due to the iFrame around it. This will not happen in production.</span>
      </div>
    </div>
  </div>
</form>

No notes provided.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<%= stylesheet_link_tag "/highlighting/styles/#{highlight_css_version_tag}",
                        media: :all,
                        skip_pipeline: true %>
<%
  the_form = Class.new(ApplicationForm) do
    form do |f|
      f.color_select_list(
        name: :id,
        label: Color.model_name.human,
        caption: "Caption: The dropdown might be offset due to the iFrame around it. This will not happen in production."
      )
    end
  end
  model = Status.new
%>
<%= primer_form_with(
      model:,
      url: "/abc",
      id: "asdf"
    ) do |f|
      render(the_form.new(f))
    end %>

No params configured.