Cleanup styling for Logger

pyscript · Nov 22, 2023 · 7b1d3e3 · 7b1d3e3
1 parent 42a4a51
commit 7b1d3e3
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 57 deletions.
diff --git a/ltk/ltk.css b/ltk/ltk.css
@@ -147,48 +147,62 @@
     background-color: white;
 }
 
-.ltk-log {
-    position: absolute;
-    border-collapse: collapse;
-    background-color: rgb(225, 246, 253);
-    width: 100%;
-    overflow-y: auto;
-    border: 3px solid transparent;
-    border-width: 3px 0;
-    padding-top: 32px;
-}
-
-#ltk-log-header {
+.ltk-log-header {
     background-color: lightgreen;
     width: 100%;
-    position: absolute;
-    z-index: 2;
-    top: 0;
+    height: 26px;
 }
 
-#ltk-log-header .ltk-text {
+.ltk-log-header .ltk-text {
     background-color: lightgreen;
+    width: 35px;
+    font-size: 12px;
+    padding: 6px 8px;
 }
 
-.ltk-log::-webkit-scrollbar {
-    display: none;
-}
-
-.ltk-log .ltk-text {
-    padding: 8px;
+.ltk-log-row .ltk-text:nth-child(3) {
+    padding-left: 4px;
 }
 
-.ltk-log .ltk-pre {
-    margin: 0;
+.ltk-log-buttons {
+    position: absolute;
+    top: 3px;
+    right: 15px;
+    z-index: 1000;
 }
 
-.ltk-log-container.ltk-button, .ltk-log-container.ltk-select {
-    margin-left: 6px;
+.ltk-log::-webkit-scrollbar {
+    display: none;
 }
 
 .ltk-log-row {
     background-color: rgb(255, 255, 240);
     border: 0px solid lightgray;
     border-bottom-width: 1px;
     height: 0;
+}
+
+.ltk-log-row .ltk-text {
+    padding: 4px 8px;
+    width: 35px;
+    font-size: 12px;
+}
+
+.ltk-log-row * {
+    height: 12px;
+}
+
+.ltk-log-row .ltk-text:nth-child(2) {
+    padding-left: 12px;
+}
+
+.ltk-log-row .ltk-text:nth-child(3) {
+    text-wrap: nowrap;
+    text-overflow: ellipsis;
+    width: calc(100% - 125px);
+    height: 14px;
+}
+
+.ltk-log-container.ltk-button, .ltk-log-container.ltk-select {
+    margin-left: 6px;
 }
diff --git a/ltk/widgets.py b/ltk/widgets.py
@@ -13,6 +13,8 @@
 BROWSER_SHORTCUTS = [ "Cmd+N","Cmd+T","Cmd+W", "Cmd+Q" ]
 DEFAULT_CSS = {}
 shortcuts = {}
+logger = logging.getLogger('root')
+logger.setLevel(logging.NOTSET)
 
 
 def callback(function):
@@ -588,35 +590,29 @@ def __init__(self):
         self.add_table()
         self.setup_logger()
         self.setup_console()
+        self.setup_py_error()
         self.filter_rows()
 
     def add_table(self):
         self.selector = find('#ltk-log-level')
         self.element.append(
             VBox(
                 HBox(
-                    Text().attr("width", 30).text("When"),
-                    Text().attr("width", 30).text("Level"),
+                    Text().text("When"),
+                    Text().text("Level"),
                     Text().text("Message"),
-                ).attr("id", "ltk-log-header")
-            ).addClass("ltk-log"),
-            Container(
-                Select(
-                    [
-                        name
-                        for name in sorted(self.levels.keys())
-                    ],
-                    self.icons[self.level],
-                    lambda _, option: self.set_level(option.text()),
-                ).attr("id", "ltk-log-level"),
-                Button("clear", lambda event: self.clear()),
-                Button("x", lambda event: self.element.css("display", "none")),
+                ),
+                Container(
+                    Select(
+                        [ name for name in sorted(self.levels.keys()) ],
+                        self.icons[self.level],
+                        lambda _, option: self.set_level(option.text()),
+                    ).attr("id", "ltk-log-level"),
+                    Button("clear", lambda event: self.clear()),
+                    Button("x", lambda event: self.element.css("display", "none")),
+                ).addClass("ltk-log-buttons")
             )
-            .css("position", "absolute")
-            .css("top", 3)
-            .css("right", 15)
-            .css("width", "fit")
-            .css("z-index", 1000)
+            .addClass("ltk-log-header")
         )
 
     def set_level(self, selected):
@@ -631,40 +627,36 @@ def filter_rows(self):
             if visible:
                 height += 32
         find(".ltk-log-container").css("top", "").css("height", min(250, height))
-        print("filter rows, top=", find(".ltk-log-container").css("top"))
 
     def clear(self):
         find(".ltk-log-row").remove()
         self.filter_rows()
 
     def setup_logger(self):
-        widget = self
+        logger_widget = self
 
         class Handler(logging.StreamHandler):
             level = Logger.level
             formatter = logging.Formatter(fmt=' %(name)s :: %(levelname)-8s :: %(message)s')
 
             def emit(self, record):
-                widget.add(record.levelno, getattr(record, "message", getattr(record, "msg", "???")))
+                logger_widget.add(record.levelno, record.getMessage())
 
-        logger = logging.getLogger('root')
-        logger.setLevel(Logger.level)
         logger.addHandler(Handler())
 
     def add(self, level, *args, **argv):
         try:
-            python_timestamp = time()
             message = " ".join(map(str, args))
             self.messages.append(message)
-            find("#ltk-log-header").after(
+            find(".ltk-log-header").after(
                 HBox(
-                    Text().text(f"{python_timestamp:.2f}").css("width", 30),
-                    Text().text(Logger.icons[level]).css("width", 30),
-                    Text().append(Preformatted().text(message)),
+                    Text().text(f"{time():.2f}"),
+                    Text().text(Logger.icons[level]),
+                    Text().text(message.replace("\n", "\\n")),
                 )
                 .addClass("ltk-log-row")
                 .attr("level", level)
-                .animate(to_js({ "height": 32  }))
+                .animate(to_js({ "height": 24  }), 700)
             )
             if level == logging.ERROR:
                 console.orig_error(*args)
@@ -687,6 +679,15 @@ def setup_console(self):
         except:
             pass # Micropython
 
+    def setup_py_error(self):
+        def find_errors():
+            py_error = find(".py-error")
+            if py_error.length > 0:
+                lines = py_error.text().strip().split("\n")
+                self.add(logging.ERROR, f"{lines[-1]}: {py_error.text()}")
+                py_error.remove()
+        repeat(find_errors, 1)
+
     def console_log(self, *args, **argv):
         try:
             if not args: