Add show timestamp/seconds and fullscreen options to action page (#24876)

Part of #24728

- The timestamp shows local time and is parsed by `date.toLocaleString`;
- "show seconds" and "show timestamps" are mutually exclusive, and they
can be both hidden.


https://github.com/go-gitea/gitea/assets/17645053/89531e54-37b7-4400-a6a0-bb3cc69eb6f5

Update for timestamp format:

<img width="306" alt="Screen Shot 2023-05-25 at 09 07 47"
src="https://github.com/go-gitea/gitea/assets/17645053/2d99768d-d39c-4c9e-81a2-7bc7470399dd">

---------

Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>

options/locale/locale_en-US.ini

@@ -125,6 +125,10 @@ concept_user_individual = Individual
 concept_code_repository = Repository
 concept_user_organization = Organization
 
+show_timestamps = Show timestamps
+show_log_seconds = Show seconds
+show_full_screen = Show full screen
+
 [aria]
 navbar = Navigation Bar
 footer = Footer

templates/repo/actions/view.tmpl

@@ -19,6 +19,9 @@
 		data-locale-status-skipped="{{.locale.Tr "actions.status.skipped"}}"
 		data-locale-status-blocked="{{.locale.Tr "actions.status.blocked"}}"
 		data-locale-artifacts-title="{{$.locale.Tr "artifacts"}}"
+		data-locale-show-timestamps="{{.locale.Tr "show_timestamps"}}"
+		data-locale-show-log-seconds="{{.locale.Tr "show_log_seconds"}}"
+		data-locale-show-full-screen="{{.locale.Tr "show_full_screen"}}"
 	>
 	</div>
 </div>

web_src/css/base.css

@@ -74,12 +74,15 @@
   --color-secondary-alpha-90: #dededee1;
   --color-secondary-hover: var(--color-secondary-dark-1);
   --color-secondary-active: var(--color-secondary-dark-2);
-  /* console colors */
+  /* console colors - used for actions console and console files */
-  --color-console-fg: #ffffff;
+  --color-console-fg: #eeeff2;
-  --color-console-bg: #252a2f;
+  --color-console-fg-subtle: #959cab;
-  --color-console-border: #ffffff16;
+  --color-console-bg: #262936;
+  --color-console-border: #383c47;
   --color-console-hover-bg: #ffffff16;
-  --color-console-active-bg: #353a3f;
+  --color-console-active-bg: #454a57;
+  --color-console-menu-bg: #383c47;
+  --color-console-menu-border: #5c6374;
   /* named colors */
   --color-red: #db2828;
   --color-orange: #f2711c;

web_src/css/themes/theme-arc-green.css

@@ -60,12 +60,15 @@
   --color-secondary-alpha-90: #525767e1;
   --color-secondary-hover: var(--color-secondary-light-1);
   --color-secondary-active: var(--color-secondary-light-2);
-  /* console colors */
+  /* console colors - used for actions console and console files */
-  --color-console-fg: #ffffff;
+  --color-console-fg: #eeeff2;
+  --color-console-fg-subtle: #959cab;
   --color-console-bg: #262936;
-  --color-console-border: #ffffff16;
+  --color-console-border: #383c47;
   --color-console-hover-bg: #ffffff16;
-  --color-console-active-bg: #383c47;
+  --color-console-active-bg: #454a57;
+  --color-console-menu-bg: #383c47;
+  --color-console-menu-border: #5c6374;
   /* named colors */
   --color-red: #cc4848;
   --color-orange: #cc580c;

web_src/js/svg.js

@@ -26,6 +26,7 @@ import octiconEye from '../../public/img/svg/octicon-eye.svg';
 import octiconFile from '../../public/img/svg/octicon-file.svg';
 import octiconFileDirectoryFill from '../../public/img/svg/octicon-file-directory-fill.svg';
 import octiconFilter from '../../public/img/svg/octicon-filter.svg';
+import octiconGear from '../../public/img/svg/octicon-gear.svg';
 import octiconGitBranch from '../../public/img/svg/octicon-git-branch.svg';
 import octiconGitMerge from '../../public/img/svg/octicon-git-merge.svg';
 import octiconGitPullRequest from '../../public/img/svg/octicon-git-pull-request.svg';
@@ -94,6 +95,7 @@ const svgs = {
   'octicon-file': octiconFile,
   'octicon-file-directory-fill': octiconFileDirectoryFill,
   'octicon-filter': octiconFilter,
+  'octicon-gear': octiconGear,
   'octicon-git-branch': octiconGitBranch,
   'octicon-git-merge': octiconGitMerge,
   'octicon-git-pull-request': octiconGitPullRequest,
@@ -132,7 +134,7 @@ const svgs = {
   'octicon-tag': octiconTag,
   'octicon-triangle-down': octiconTriangleDown,
   'octicon-x': octiconX,
-  'octicon-x-circle-fill': octiconXCircleFill
+  'octicon-x-circle-fill': octiconXCircleFill,
 };
 
 // TODO: use a more general approach to access SVG icons.

web_src/js/utils.js

@@ -60,7 +60,7 @@ export function parseUrl(str) {
 }
 
 // return current locale chosen by user
-function getCurrentLocale() {
+export function getCurrentLocale() {
   return document.documentElement.lang;
 }