You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@daffodil.apache.org by "stricklandrbls (via GitHub)" <gi...@apache.org> on 2023/04/03 21:08:53 UTC

[GitHub] [daffodil-vscode] stricklandrbls opened a new pull request, #559: Data Editor UI has togglable color mode.

stricklandrbls opened a new pull request, #559:
URL: https://github.com/apache/daffodil-vscode/pull/559

   - UI color theme pulls from user selected VSCode color theme.
   - Some UI components have locked theme background to ensure readability across various themes. 
   
   Closes #536


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: commits-unsubscribe@daffodil.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


[GitHub] [daffodil-vscode] stricklandrbls commented on pull request #559: Data Editor UI has togglable color mode.

Posted by "stricklandrbls (via GitHub)" <gi...@apache.org>.
stricklandrbls commented on PR #559:
URL: https://github.com/apache/daffodil-vscode/pull/559#issuecomment-1494987127

   ### GIF preview of the UI color scheme
   ![vscode-theme-change](https://user-images.githubusercontent.com/30351915/229628154-6fd5e2f6-fd84-48e9-b2c1-2d27331e98f0.gif)
   <sup>GIF shows the pre-revised top components but the branch has been  rebased to main to include those changes.</sup>
   


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: commits-unsubscribe@daffodil.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


[GitHub] [daffodil-vscode] stricklandrbls commented on a diff in pull request #559: Data Editor UI has togglable color mode.

Posted by "stricklandrbls (via GitHub)" <gi...@apache.org>.
stricklandrbls commented on code in PR #559:
URL: https://github.com/apache/daffodil-vscode/pull/559#discussion_r1157353742


##########
src/svelte/src/components/dataEditor.svelte:
##########
@@ -774,658 +781,713 @@ limitations under the License.
           scrollSearchResults(false)
         }
         break
+      case MessageCommand.setUITheme:
+        $darkUITheme = msg.data.theme === 2
+        break
     }
   })
 </script>
 
 <svelte:window on:keydown|nonpassive={handleKeybind} />
-<header>
-  <div class="header-container">
-    <fieldset class="box file-metrics">
-      <legend>File Metrics</legend>
-      <div class="flex-container row wrap">
-        <div class="row-item flex-container col">
-          <label for="file_name" class="col-item file-metrics">Path</label>
-          <div id="file_name" class="col-item file-name">{$fileName}</div>
-        </div>
-      </div>
-      <hr />
-      <div class="flex-container row" style="padding-top: 5pt;">
-        <div class="two-row-items flex-container col">
-          <label class="col-item file-metrics" for="disk_file_size"
-            >Disk Size</label
-          >
-          <div class="col-item" id="disk_file_size">{$diskFileSize}</div>
-        </div>
-        <div class="two-row-item flex-container col">
-          <label class="col-item file-metrics" for="computed_file_size"
-            >Computed Size</label
-          >
-          <div class="col-item" id="computed_file_size">
-            {$computedFileSize}
+<body class={$UIThemeCSSClass}>

Review Comment:
   I needed a way to set the global font colors per scheme but didn't have a way to inject any styling in the `SvelteWebviewInitializer` that contains the UI body. This was the quickest solution that I predict will change with the implementation of https://github.com/ctc-oss/daffodil-vscode/issues/110



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: commits-unsubscribe@daffodil.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


[GitHub] [daffodil-vscode] Shanedell merged pull request #559: Data Editor UI has togglable color mode.

Posted by "Shanedell (via GitHub)" <gi...@apache.org>.
Shanedell merged PR #559:
URL: https://github.com/apache/daffodil-vscode/pull/559


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: commits-unsubscribe@daffodil.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


[GitHub] [daffodil-vscode] scholarsmate commented on a diff in pull request #559: Data Editor UI has togglable color mode.

Posted by "scholarsmate (via GitHub)" <gi...@apache.org>.
scholarsmate commented on code in PR #559:
URL: https://github.com/apache/daffodil-vscode/pull/559#discussion_r1157333046


##########
src/svelte/src/components/dataEditor.svelte:
##########
@@ -774,658 +781,713 @@ limitations under the License.
           scrollSearchResults(false)
         }
         break
+      case MessageCommand.setUITheme:
+        $darkUITheme = msg.data.theme === 2
+        break
     }
   })
 </script>
 
 <svelte:window on:keydown|nonpassive={handleKeybind} />
-<header>
-  <div class="header-container">
-    <fieldset class="box file-metrics">
-      <legend>File Metrics</legend>
-      <div class="flex-container row wrap">
-        <div class="row-item flex-container col">
-          <label for="file_name" class="col-item file-metrics">Path</label>
-          <div id="file_name" class="col-item file-name">{$fileName}</div>
-        </div>
-      </div>
-      <hr />
-      <div class="flex-container row" style="padding-top: 5pt;">
-        <div class="two-row-items flex-container col">
-          <label class="col-item file-metrics" for="disk_file_size"
-            >Disk Size</label
-          >
-          <div class="col-item" id="disk_file_size">{$diskFileSize}</div>
-        </div>
-        <div class="two-row-item flex-container col">
-          <label class="col-item file-metrics" for="computed_file_size"
-            >Computed Size</label
-          >
-          <div class="col-item" id="computed_file_size">
-            {$computedFileSize}
+<body class={$UIThemeCSSClass}>

Review Comment:
   Why use a `body` tag?  This is going to be injected into VS Code markup which will already have a body.



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: commits-unsubscribe@daffodil.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org