1- page_title _('Preferences')
2- @content_class = "limit-container-width" unless fluid_layout
3- user_theme_id = Gitlab::Themes.for_user(@user).id
4- user_fields = { theme: user_theme_id, gitpod_enabled: @user.gitpod_enabled, sourcegraph_enabled: @user.sourcegraph_enabled }.to_json
5- @themes = Gitlab::Themes::THEMES.to_json
6- data_attributes = { themes: @themes, integration_views: integration_views.to_json, user_fields: user_fields, body_classes: Gitlab::Themes.body_classes, profile_preferences_path: profile_preferences_path }
7
8- Gitlab::Themes.each do |theme|
9  = stylesheet_link_tag "themes/#{theme.css_filename}" if theme.css_filename
10
11= form_for @user, url: profile_preferences_path, remote: true, method: :put, html: { id: "profile-preferences-form" } do |f|
12  .row.gl-mt-3.js-preferences-form.js-search-settings-section
13    .col-lg-4.application-theme#navigation-theme
14      %h4.gl-mt-0
15        = s_('Preferences|Navigation theme')
16      %p
17        = s_('Preferences|Customize the appearance of the application header and navigation sidebar.')
18    .col-lg-8.application-theme
19      .row
20        - Gitlab::Themes.each do |theme|
21          %label.col-6.col-sm-4.col-md-3.gl-mb-5.gl-text-center
22            .preview{ class: theme.css_class }
23            = f.radio_button :theme_id, theme.id, checked: user_theme_id == theme.id
24            = theme.name
25
26    .col-sm-12
27      %hr
28
29  .row.js-preferences-form.js-search-settings-section
30    .col-lg-4.profile-settings-sidebar#syntax-highlighting-theme
31      %h4.gl-mt-0
32        = s_('Preferences|Syntax highlighting theme')
33      %p
34        = s_('Preferences|This setting allows you to customize the appearance of the syntax.')
35        = succeed '.' do
36          = link_to _('Learn more'), help_page_path('user/profile/preferences', anchor: 'syntax-highlighting-theme'), target: '_blank'
37    .col-lg-8.syntax-theme
38      - Gitlab::ColorSchemes.each do |scheme|
39        = label_tag do
40          .preview= image_tag "#{scheme.css_class}-scheme-preview.png"
41          = f.radio_button :color_scheme_id, scheme.id
42          = scheme.name
43
44    .col-sm-12
45      %hr
46
47  .row.js-preferences-form.js-search-settings-section
48    .col-lg-4.profile-settings-sidebar#behavior
49      %h4.gl-mt-0
50        = s_('Preferences|Behavior')
51      %p
52        = s_('Preferences|This setting allows you to customize the behavior of the system layout and default views.')
53        = succeed '.' do
54          = link_to _('Learn more'), help_page_path('user/profile/preferences', anchor: 'behavior'), target: '_blank'
55    .col-lg-8
56      .form-group
57        = f.label :layout, class: 'label-bold' do
58          = s_('Preferences|Layout width')
59        = f.select :layout, layout_choices, {}, class: 'select2'
60        .form-text.text-muted
61          = s_('Preferences|Choose between fixed (max. 1280px) and fluid (%{percentage}) application layout.').html_safe % { percentage: '100%' }
62      .form-group
63        = f.label :dashboard, class: 'label-bold' do
64          = s_('Preferences|Homepage content')
65        = f.select :dashboard, dashboard_choices, {}, class: 'select2'
66        .form-text.text-muted
67          = s_('Preferences|Choose what content you want to see on your homepage.')
68
69      = render_if_exists 'profiles/preferences/group_overview_selector', f: f # EE-specific
70
71      .form-group
72        = f.label :project_view, class: 'label-bold' do
73          = s_('Preferences|Project overview content')
74        = f.select :project_view, project_view_choices, {}, class: 'select2'
75        .form-text.text-muted
76          = s_('Preferences|Choose what content you want to see on a project’s overview page.')
77      .form-group.form-check
78        = f.check_box :render_whitespace_in_code, class: 'form-check-input'
79        = f.label :render_whitespace_in_code, class: 'form-check-label' do
80          = s_('Preferences|Render whitespace characters in the Web IDE')
81      .form-group.form-check
82        = f.check_box :show_whitespace_in_diffs, class: 'form-check-input'
83        = f.label :show_whitespace_in_diffs, class: 'form-check-label' do
84          = s_('Preferences|Show whitespace changes in diffs')
85      .form-group.form-check
86        = f.check_box :view_diffs_file_by_file, class: 'form-check-input'
87        = f.label :view_diffs_file_by_file, class: 'form-check-label' do
88          = s_("Preferences|Show one file at a time on merge request's Changes tab")
89        .form-text.text-muted
90          = s_("Preferences|Instead of all the files changed, show only one file at a time. To switch between files, use the file browser.")
91      .form-group.form-check
92        = f.check_box :markdown_surround_selection, class: 'form-check-input'
93        = f.label :markdown_surround_selection, class: 'form-check-label' do
94          = s_('Preferences|Surround text selection when typing quotes or brackets')
95        .form-text.text-muted
96          - supported_characters = %w(" ' ` \( [ { < * _).map {|char| "<code>#{char}</code>" }.join(', ')
97          - msg = "Preferences|When you type in a description or comment box, selected text is surrounded by the corresponding character after typing one of the following characters: #{supported_characters}."
98          = s_(msg).html_safe
99
100      .form-group
101        = f.label :tab_width, s_('Preferences|Tab width'), class: 'label-bold'
102        = f.number_field :tab_width,
103                         class: 'form-control gl-form-input',
104                         min: Gitlab::TabWidth::MIN,
105                         max: Gitlab::TabWidth::MAX,
106                         required: true
107        .form-text.text-muted
108          = s_('Preferences|Must be a number between %{min} and %{max}') % { min: Gitlab::TabWidth::MIN, max: Gitlab::TabWidth::MAX }
109
110    .col-sm-12
111      %hr
112  .row.js-preferences-form.js-search-settings-section
113    .col-lg-4.profile-settings-sidebar#localization
114      %h4.gl-mt-0
115        = _('Localization')
116      %p
117        = _('Customize language and region related settings.')
118        = succeed '.' do
119          = link_to _('Learn more'), help_page_path('user/profile/preferences', anchor: 'localization'), target: '_blank'
120    .col-lg-8
121      .form-group
122        = f.label :preferred_language, class: 'label-bold' do
123          = _('Language')
124        = f.select :preferred_language, language_choices, {}, class: 'select2'
125        .form-text.text-muted
126          = s_('Preferences|This feature is experimental and translations are not complete yet')
127      .form-group
128        = f.label :first_day_of_week, class: 'label-bold' do
129          = _('First day of the week')
130        = f.select :first_day_of_week, first_day_of_week_choices_with_default, {}, class: 'select2'
131    .col-sm-12
132      %hr
133  .row.js-preferences-form.js-search-settings-section
134    .col-lg-4.profile-settings-sidebar#time-preferences
135      %h4.gl-mt-0
136        = s_('Preferences|Time preferences')
137      %p
138        = s_('Preferences|Configure how dates and times display for you.')
139        = succeed '.' do
140          = link_to _('Learn more'), help_page_path('user/profile/preferences', anchor: 'time-preferences'), target: '_blank'
141    .col-lg-8
142      .form-group.form-check
143        = f.check_box :time_display_relative, class: 'form-check-input'
144        = f.label :time_display_relative, class: 'form-check-label' do
145          = s_('Preferences|Use relative times')
146        .form-text.text-muted
147          = s_('Preferences|For example: 30 minutes ago.')
148      - if Feature.enabled?(:user_time_settings)
149        .form-group.form-check
150          = f.check_box :time_format_in_24h, class: 'form-check-input'
151          = f.label :time_format_in_24h, class: 'form-check-label' do
152            = s_('Preferences|Display time in 24-hour format')
153
154  #js-profile-preferences-app{ data: data_attributes }
155