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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<div class="spot-drop-modal--body spot-container">
  <div class="spot-drop-modal--header">
    <div class="spot-drop-modal--header-title">Progress</div>
    <button
      class="button button_no-margin -transparent spot-drop-modal--header-close-button"
      data-test-selector="op-share-dialog-modal--close-icon">
      <!--
      Since we cannot render Angular components in the lookbook, we render the view_component for the close button here
      <svg x-icon size="small" class="spot-drop-modal--header-close-button-icon"></svg>-->
      <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-x spot-drop-modal--header-close-button-icon">
        <path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"></path>
      </svg>
    </button>
  </div>
  <div class="spot-drop-modal--content">
    <turbo-frame id="work_package_progress_modal">
      <form id="progress-form" class="progress-form" data-application-target="dynamic" data-work-packages--progress--preview-target="form" data-controller="work-packages--progress--preview" autocomplete="off" action="/work_packages/1006/progress" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="patch" autocomplete="off" /><input type="hidden" name="authenticity_token" value="twL2oxK2b2NzULyLWZILr7mt7XDJdbx-1U4n9qIRAvQgBSehxT3qGENAsGhLt7UkKY8AgEck9pYE4xB4V_Y7Ag" autocomplete="off" />
        <div data-view-component="true" class="d-flex flex-column">
          <div data-view-component="true" class="FormControl-horizontalGroup--sm-vertical">        
            <div class="FormControl-spacingWrapper">
              <div data-view-component="true" class="FormControl-horizontalGroup">
                <div class="FormControl width-full FormControl--fullWidth">
                  <label class="FormControl-label" for="work_package_status_id">
                    % Complete
                  </label>
                  <div class="FormControl-select-wrap FormControl-input-width--auto">
                    <select data-work-packages--progress--preview-target="fieldInput" data-action="work-packages--progress--preview#markFieldAsTouched work-packages--progress--preview#debouncedPreview blur->work-packages--progress--preview#debouncedPreview" aria-describedby="validation-79366feb-9159-4f20-8f00-b27e0c937c72" class="FormControl-select FormControl-medium" name="work_package[status_id]" id="work_package_status_id"></select>
                  </div>
                  <div class="FormControl-inlineValidation" id="validation-79366feb-9159-4f20-8f00-b27e0c937c72" 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>
                </div>
                <primer-text-field class="FormControl width-full FormControl--fullWidth">
                  <label class="FormControl-label" for="work_package_estimated_hours">
                    Work
                  </label>
                  <div class="FormControl-input-wrap FormControl-input-width--auto">
                    <input data-work-packages--progress--preview-target="fieldInput" data-action="work-packages--progress--preview#markFieldAsTouched work-packages--progress--preview#debouncedPreview blur->work-packages--progress--preview#debouncedPreview" data-target="primer-text-field.inputElement " aria-describedby="validation-9b26f3d9-9d1a-4c2b-9e96-be2afe34a4ea" class="FormControl-input FormControl-medium" type="text" name="work_package[estimated_hours]" id="work_package_estimated_hours" />
                  </div>
                  <div class="FormControl-inlineValidation" id="validation-9b26f3d9-9d1a-4c2b-9e96-be2afe34a4ea" hidden="hidden">
                    <span class="FormControl-inlineValidation--visual" data-target="primer-text-field.validationSuccessIcon" 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="primer-text-field.validationErrorIcon"><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>
                </primer-text-field>
                <primer-text-field class="FormControl width-full FormControl--fullWidth">
                  <label class="FormControl-label" for="work_package_remaining_hours">
                    Remaining work
                  </label>
                  <div class="FormControl-input-wrap FormControl-input-width--auto">
                    <input data-work-packages--progress--preview-target="fieldInput" data-action="work-packages--progress--preview#markFieldAsTouched work-packages--progress--preview#debouncedPreview blur->work-packages--progress--preview#debouncedPreview" data-target="primer-text-field.inputElement " readonly="readonly" placeholder="-" aria-describedby="validation-64cbe172-0425-44c2-87e8-1bcc7f54ce7e" class="FormControl-input FormControl-medium input--readonly" type="text" name="work_package[remaining_hours]" id="work_package_remaining_hours" />
                  </div>
                  <div class="FormControl-inlineValidation" id="validation-64cbe172-0425-44c2-87e8-1bcc7f54ce7e" hidden="hidden">
                    <span class="FormControl-inlineValidation--visual" data-target="primer-text-field.validationSuccessIcon" 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="primer-text-field.validationErrorIcon"><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>
                </primer-text-field>
                <input value="false" data-work-packages--progress--preview-target="touchedFieldInput" data-referrer-field="status_id" class="FormField-input" autocomplete="off" type="hidden" name="work_package[status_id_touched]" id="work_package_status_id_touched" />
                <input value="false" data-work-packages--progress--preview-target="touchedFieldInput" data-referrer-field="estimated_hours" class="FormField-input" autocomplete="off" type="hidden" name="work_package[estimated_hours_touched]" id="work_package_estimated_hours_touched" />
                <div class="FormControl-spacingWrapper">
                  <div data-view-component="true" class="d-none">
                    <input value="1004" data-work-packages--progress--preview-target="initialValueInput" data-referrer-field="status_id" class="FormField-input" autocomplete="off" type="hidden" name="work_package[initial][status_id]" id="work_package_initial_status_id" />
                  </div>
                  <div data-view-component="true" class="d-none">
                    <input data-work-packages--progress--preview-target="initialValueInput" data-referrer-field="estimated_hours" class="FormField-input" autocomplete="off" type="hidden" name="work_package[initial][estimated_hours]" id="work_package_initial_estimated_hours" />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div data-view-component="true" class="mt-3">        <span data-view-component="true" class="text-semibold">Note:</span>
            <span data-view-component="true">% Complete is set by work package status.</span>
            <a href="https://www.openproject.org/docs/user-guide/time-and-costs/progress-tracking/" data-view-component="true" class="Link">Learn more</a>
          </div>
          <div data-view-component="true" class="mt-3">
            <div data-view-component="true" class="flex-justify-end d-flex flex-row">
              <div data-view-component="true">
                <button type="submit" data-view-component="true" class="Button--primary Button--medium Button">  <span class="Button-content">
                    <span class="Button-label">Save</span>
                  </span>
                </button>
              </div>
            </div>
          </div>
        </div>
      </form>
    </turbo-frame>
  </div>
</div>

No notes provided.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="spot-drop-modal--body spot-container">
  <div class="spot-drop-modal--header">
    <div class="spot-drop-modal--header-title">Progress</div>
    <button
      class="button button_no-margin -transparent spot-drop-modal--header-close-button"
      data-test-selector="op-share-dialog-modal--close-icon">
      <!--
      Since we cannot render Angular components in the lookbook, we render the view_component for the close button here
      <svg x-icon size="small" class="spot-drop-modal--header-close-button-icon"></svg>-->
      <%= render(Primer::Beta::Octicon.new(icon: :x, classes: "spot-drop-modal--header-close-button-icon")) %>
    </button>
  </div>
  <div class="spot-drop-modal--content">
    <%= render(WorkPackages::Progress::StatusBased::ModalBodyComponent.new(work_package, focused_field:)) %>
  </div>
</div>
Param Description Input

—

—

—