{"id":372806,"date":"2023-07-17T06:47:15","date_gmt":"2023-07-17T05:47:15","guid":{"rendered":"https:\/\/blog.jetbrains.com\/?post_type=pycharm&p=372806"},"modified":"2023-07-17T06:47:21","modified_gmt":"2023-07-17T05:47:21","slug":"pet-veci-v-novem-ui-ktere-si-zamilujete","status":"publish","type":"pycharm","link":"https:\/\/blog.jetbrains.com\/cs\/pycharm\/2023\/07\/pet-veci-v-novem-ui-ktere-si-zamilujete\/","title":{"rendered":"P\u011bt v\u011bc\u00ed v nov\u00e9m UI, kter\u00e9 si zamilujete"},"content":{"rendered":"

U\u017e pou\u017e\u00edv\u00e1te nov\u00e9 u\u017eivatelsk\u00e9 rozhran\u00ed? Je\u0161t\u011b ne? Tak my v\u00e1m pov\u00edme, pro\u010d je to ta nejlep\u0161\u00ed v\u011bc od vyn\u00e1lezu kr\u00e1jen\u00e9ho chleba!<\/p>\n

Zapneme si ho a trochu se v n\u011bm porozhl\u00e9dneme. To ud\u011bl\u00e1te nejsn\u00e1ze p\u0159es kole\u010dko Settings<\/em> v prav\u00e9m horn\u00edm rohu u\u017eivatelsk\u00e9ho rozhran\u00ed:<\/p>\n

\n
\"K<\/figure>\n<\/div>\n

PyCharm bude pot\u0159eba restartovat, ale to je v\u0161e. M\u00e1te hotovo!<\/p>\n

V t\u00e9to aktualizaci rozhran\u00ed jsme kolem r\u016fzn\u00fdch prvk\u016f nechali v\u00edce m\u00edsta. T\u00edm je obsah odd\u011blen p\u0159irozen\u011b, ani\u017e bychom museli p\u0159id\u00e1vat r\u016fzn\u00e9 odd\u011blova\u010de. Pokud m\u00e1te rad\u0161i, kdy\u017e jsou prvky u\u017eivatelsk\u00e9ho rozhran\u00ed o n\u011bco men\u0161\u00ed, m\u016f\u017eete v okn\u011b n\u00e1stroje Meet the New UI<\/em> vybrat mo\u017enost Compact<\/em> (nebo pak v nastaven\u00ed vyhledat kl\u00ed\u010dov\u00e9 slovo \u201enew ui\u201c). Toto nastaven\u00ed odstran\u00ed ur\u010dit\u00e9 pr\u00e1zn\u00e9 plochy a v\u00fdpln\u011b kolem prvk\u016f.<\/p>\n

\n
\"\"<\/figure>\n<\/div>\n

Je zde \u0159ada motiv\u016f, kter\u00fdch si v\u0161imnete hned na prvn\u00ed pohled, v\u010detn\u011b pou\u017eit\u00ed barvy a velikosti prvk\u016f ke zd\u016frazn\u011bn\u00ed hierarchie informac\u00ed. <\/p>\n

Nap\u0159\u00edklad v motivu Dark<\/em> m\u00e1me v horn\u00ed \u010d\u00e1sti pro b\u011b\u017en\u00e9 vstupn\u00ed body k funkc\u00edm, jako jsou akce VCS a akce Run, tmav\u011b \u0161ed\u00fd pruh a pro editor \u010dern\u00e9 pozad\u00ed. <\/p>\n

\n
\"Nov\u00e9<\/figure>\n<\/div>\n

A te\u010f n\u00e1m dovolte, abychom v\u00e1s provedli t\u011bmi skv\u011bl\u00fdmi z\u00e1kladn\u00edmi kameny, na kter\u00e9m tohle u\u017eivatelsk\u00e9 rozhran\u00ed stav\u00ed. <\/p>\n

#1 \u2013 Panel n\u00e1stroj\u016f: Main<\/h2>\n

Panel n\u00e1stroj\u016f Main<\/em> m\u00e1 te\u010f \u00fahledn\u011bj\u0161\u00ed a \u00fasporn\u011bj\u0161\u00ed design. Disponuje v\u0161emi funkcemi, kter\u00e9 zn\u00e1te a m\u00e1te r\u00e1di. Najdete na n\u011bm v\u0161echny pot\u0159ebn\u00e9 informace souvisej\u00edc\u00ed s projektem:<\/p>\n

\n
\"Hlavn\u00ed<\/figure>\n<\/div>\n

Vezmeme to zleva doprava. Prvn\u00ed oblast\u00ed, o kter\u00e9 chceme mluvit, je widget Project<\/em>. Na tomhle m\u00edst\u011b m\u016f\u017eete vid\u011bt n\u00e1zev aktu\u00e1ln\u00edho projektu, p\u0159ep\u00ednat mezi posledn\u00edmi projekty, vytv\u00e1\u0159et nov\u00e9 projekty a otev\u00edrat ty st\u00e1vaj\u00edc\u00ed.<\/p>\n

Vpravo od widgetu Project<\/em> se nach\u00e1z\u00ed widget VCS<\/em>. Ten umo\u017e\u0148uje rychl\u00e9 zobrazen\u00ed stavu projektu ve spr\u00e1v\u011b verz\u00ed, v\u010detn\u011b p\u0159\u00edslu\u0161n\u00e9 v\u011btve i toho, zda jsou dostupn\u00e9 n\u011bjak\u00e9 odchoz\u00ed (zelen\u011b) nebo p\u0159\u00edchoz\u00ed (mod\u0159e) zm\u011bny:<\/p>\n

\n
\"\"<\/figure>\n<\/div>\n

Widget VCS<\/em> se nach\u00e1z\u00ed hned vedle n\u00e1zvu projektu a je jednozna\u010dn\u00fdm vstupn\u00edm bodem pro funkce souvisej\u00edc\u00ed s va\u0161\u00edm projektem a spr\u00e1vou verz\u00ed. Sta\u010d\u00ed kliknout na rozbalovac\u00ed \u0161ipku. T\u011bchto takzvan\u00fdch \u201evstupn\u00edch bod\u016f\u201c pro skupiny funkc\u00ed uvid\u00edte v dal\u0161\u00edch \u010d\u00e1stech na\u0161\u00ed prohl\u00eddky celou \u0159adu.<\/p>\n

Napravo se nach\u00e1z\u00ed p\u0159epracovan\u00fd widget Run<\/em>, kter\u00e9mu se budeme v\u011bnovat podrobn\u011bji v dal\u0161\u00ed \u010d\u00e1sti.<\/p>\n

A kone\u010dn\u011b \u00fapln\u011b vpravo na panelu n\u00e1stroj\u016f Main<\/em> najdete obecn\u011bj\u0161\u00ed ikony, v\u010detn\u011b Code With Me<\/a>, Search Everywhere a Settings. Za zm\u00ednku stoj\u00ed, \u017ee pokud r\u00e1di pou\u017e\u00edv\u00e1te my\u0161, ikona ozuben\u00e9ho kole\u010dka Settings<\/em> v\u00e1s p\u0159enese na mo\u017enosti t\u00e9 nejvy\u0161\u0161\u00ed \u00farovn\u011b, kter\u00e9 budete pravd\u011bpodobn\u011b pou\u017e\u00edvat nej\u010dast\u011bji, v\u010detn\u011b plug-in\u016f, motiv\u016f, mapy kl\u00e1ves a re\u017eimu zobrazen\u00ed. A\u010d pevn\u011b douf\u00e1me, \u017ee na to nedojde, m\u016f\u017eete zde p\u0159epnout i zp\u00e1tky na klasick\u00e9 u\u017eivatelsk\u00e9 rozhran\u00ed!<\/p>\n

#2 \u2013 Widget Run<\/h2>\n

Te\u010f si podrobn\u011bji projdeme widget Run<\/em>. Prvn\u00ed, \u010deho si v\u0161imnete, jsou v\u011bt\u0161\u00ed a tu\u010dn\u011bj\u0161\u00ed ikony. Na t\u011bch je skv\u011bl\u00e9, \u017ee poskytuj\u00ed okam\u017eitou vizu\u00e1ln\u00ed zp\u011btnou vazbu o stavu va\u0161\u00ed aplikace. Nap\u0159\u00edklad p\u0159ed spu\u0161t\u011bn\u00edm nebo lad\u011bn\u00edm aplikace vypad\u00e1 widget Run<\/em> takto:<\/p>\n

\n
\"\"<\/figure>\n<\/div>\n

Pokud klepnete na ikonu Run, v\u0161e se zm\u011bn\u00ed n\u00e1sledovn\u011b:<\/p>\n

\n
\"\"<\/figure>\n<\/div>\n

Te\u010f vid\u00edte, \u017ee va\u0161e aplikace b\u011b\u017e\u00ed. M\u016f\u017eete ji zastavit a znovu spustit nebo zastavit \u00fapln\u011b. Sou\u010dasn\u011b m\u016f\u017eete kliknout na ikonu lad\u011bn\u00ed, kter\u00e1 v\u00e1m nab\u00eddne zastaven\u00ed pr\u00e1v\u011b spu\u0161t\u011bn\u00e9 aplikace, abyste ji mohli m\u00edsto toho spustit pomoc\u00ed ladic\u00edho programu PyCharm. <\/p>\n

Pokud aplikaci spust\u00edte pomoc\u00ed ladic\u00edho programu PyCharm, widget se zm\u011bn\u00ed n\u00e1sledovn\u011b:<\/p>\n

\n
\"\"<\/figure>\n<\/div>\n

Z rozbalovac\u00ed nab\u00eddky m\u00e1te st\u00e1le p\u0159\u00edstup ke v\u0161em konfigurac\u00edm spu\u0161t\u011bn\u00ed a u ka\u017ed\u00e9 z nich si m\u016f\u017eete vybrat, jak ji chcete spustit:<\/p>\n

\"P\u0159\u00edstup<\/figure>\n

Funkce pro aktu\u00e1ln\u011b vybranou konfiguraci spu\u0161t\u011bn\u00ed je dostupn\u00e1 i z tla\u010d\u00edtka se t\u0159emi vertik\u00e1ln\u00edmi te\u010dkami. <\/p>\n

#3 \u2013 Okna n\u00e1stroj\u016f<\/h2>\n

Nov\u00e9 u\u017eivatelsk\u00e9 rozhran\u00ed p\u0159in\u00e1\u0161\u00ed nov\u00e9 ikony, vylep\u0161en\u00e9 rozvr\u017een\u00ed a mo\u017enost zobrazit v\u00edce oken n\u00e1stroj\u016f. Nov\u00e9 v\u011bt\u0161\u00ed ikony pom\u00e1haj\u00ed sn\u00ed\u017eit kognitivn\u00ed z\u00e1t\u011b\u017e p\u0159i vyhled\u00e1v\u00e1n\u00ed, proto\u017ee toho na obrazovce nen\u00ed tolik. <\/p>\n

Uk\u00e1\u017eeme v\u00e1m, jak se d\u00e1 jejich um\u00edst\u011bn\u00ed v u\u017eivatelsk\u00e9m rozhran\u00ed p\u0159izp\u016fsobit, abyste v\u0161e na\u0161li je\u0161t\u011b rychleji:<\/p>\n

\"Okna<\/figure>\n

M\u00e1te mo\u017enost rozd\u011blit okna n\u00e1stroj\u016f na v\u00fd\u0161ku. Nap\u0159\u00edklad na obr\u00e1zku n\u00ed\u017ee je okno n\u00e1stroje Commit<\/em> um\u00edst\u011bno pod vodorovn\u00fdm odd\u011blovac\u00edm pruhem. Okna n\u00e1stroj\u016f lze p\u0159et\u00e1hnout pod odd\u011blovac\u00ed li\u0161tu a otev\u0159\u00edt je t\u00edm p\u00e1dem ve vertik\u00e1ln\u00edm rozd\u011blen\u00ed:<\/p>\n

\n
\"Vertik\u00e1ln\u00ed<\/figure>\n<\/div>\n

T\u00edmto zp\u016fsobem lze tak\u00e9 rozd\u011blit okna n\u00e1stroj\u016f na prav\u00e9 stran\u011b:<\/p>\n

\"Vertik\u00e1ln\u00ed<\/figure>\n

A kone\u010dn\u011b, pokud chcete okna n\u00e1stroj\u016f rozd\u011blit dole tak, aby jedno bylo vlevo a druh\u00e9 vpravo, sta\u010d\u00ed p\u0159et\u00e1hnout okno n\u00e1stroje, kter\u00e9 chcete m\u00edt napravo, na prav\u00fd pruh. Na obr\u00e1zku n\u00ed\u017ee jsme p\u0159et\u00e1hli ikonu okna n\u00e1stroje “Problem” doprava a otev\u0159eli ji vedle okna n\u00e1stroje Terminal:<\/p>\n

\"Vodorovn\u00e9<\/figure>\n

V\u0161echna okna n\u00e1stroj\u016f nyn\u00ed pou\u017e\u00edvaj\u00ed obrysov\u00e9 \u010dernob\u00edl\u00e9 ikony, kter\u00e9 jsou modern\u011bj\u0161\u00ed a nezat\u011b\u017euj\u00ed rozhran\u00ed dal\u0161\u00edmi zbyte\u010dnostmi. Pokud chcete zobrazit n\u00e1zev a kl\u00e1vesovou zkratku n\u011bkter\u00e9ho z oken n\u00e1stroj\u016f, naje\u010fte na p\u0159\u00edslu\u0161nou ikonu my\u0161\u00ed. Nezapome\u0148te, \u017ee praktick\u00e1 kl\u00e1vesov\u00e1 zkratka pro skryt\u00ed v\u0161ech panel\u016f n\u00e1stroj\u016f je \u2318\u21e7F12 (macOS) nebo Ctrl+Shift+F12 (Windows\/Linux).<\/p>\n

#4 \u2013 Okna n\u00e1stroj\u016f Run a Debug<\/h2>\n

Okna n\u00e1stroj\u016f Run<\/em> i Debug<\/em> jsou nyn\u00ed k dispozici na kart\u011b okna vlevo. Pro \u00fa\u010dely standardizace je to naprost\u00e1 par\u00e1da. Umo\u017e\u0148uje to toti\u017e rychl\u00fd p\u0159\u00edstup k ob\u011bma okn\u016fm n\u00e1stroj\u016f pro spr\u00e1vu stavu aplikace.<\/p>\n

Okno Debug<\/em> bylo nav\u00edc dopln\u011bno o jeden panel n\u00e1stroj\u016f s nej\u010dast\u011bj\u0161\u00edmi akcemi na z\u00e1klad\u011b statistik pou\u017e\u00edv\u00e1n\u00ed. N\u011bkter\u00e9 akce, na kter\u00e9 jste zvykl\u00ed klikat, tedy nemus\u00ed b\u00fdt tam, kde byste je o\u010dek\u00e1vali! Neodstranili jsme \u017e\u00e1dnou funkci, v\u0161e je st\u00e1le p\u0159\u00edstupn\u00e9, ale m\u016f\u017eete si nap\u0159\u00edklad v\u0161imnout, \u017ee zmizela ikona Evaluate Expression<\/em>. <\/p>\n

Mo\u017enost\u00ed p\u0159\u00edstup\u016f k t\u00e9to funkci ale m\u00e1te po\u0159\u00e1d dost. M\u016f\u017eete:<\/p>\n

    \n
  • Pou\u017e\u00edt \u2325F8 (macOS) nebo Ctrl+F8 (Windows\/Linux).<\/li>\n
  • Pou\u017e\u00edt Shift (macOS\/Windows\/Linux) pro Search Everywhere a pak zadat \u201eevaluate expression\u201c<\/li>\n
  • Z kontextov\u00e9 nab\u00eddky na prav\u00e9m tla\u010d\u00edtku my\u0161i v okn\u011b n\u00e1stroje Debug<\/em> vyberte mo\u017enost Evaluate Expression<\/em>.<\/li>\n<\/ul>\n

    V okn\u011b n\u00e1stroje Debug<\/em> je d\u00e1le vyhrazen\u00e9 pole pro vyhodnocen\u00ed:<\/p>\n

    \"Mo\u017enost<\/figure>\n

    Krom\u011b t\u011bchto zm\u011bn jsou k dispozici nov\u00e9 karty pro p\u0159ep\u00edn\u00e1n\u00ed mezi zobrazen\u00edmi Threads & Variables<\/em> a Console<\/em>, pokud je spu\u0161t\u011bna jedin\u00e1 konfigurace.<\/p>\n

    \"Karta<\/figure>\n

    #5 \u2013 Editor<\/h2>\n

    V neposledn\u00ed \u0159ad\u011b se tak\u00e9 editor do\u010dkal \u0159ady novinek a zm\u011bn. P\u0159in\u00e1\u0161\u00edme tak\u00e9 nov\u00e9 vzhledov\u00e9 motivy, kter\u00e9 se prom\u00edtaj\u00ed do cel\u00e9ho rozhran\u00ed a dod\u00e1vaj\u00ed cel\u00e9 cel\u00e9mu editoru sv\u011b\u017e\u00ed, \u010dist\u00fd a profesion\u00e1ln\u00ed n\u00e1dech.<\/p>\n

    Nejobl\u00edben\u011bj\u0161\u00ed barevn\u00e9 motivy Light a Dark zlep\u0161ily kontrast a konzistentn\u00ed barevnou paletu, kter\u00e1 proz\u00e1\u0159\u00ed (nebo naopak \u201eprotemn\u00ed\u201c) v\u00e1\u0161 den:<\/p>\n

    \n
    \"Motiv<\/figure>\n<\/div>\n

    Ikonografie byla p\u0159epracov\u00e1na i v editoru a te\u010f se py\u0161n\u00ed v\u00fdrazn\u011bj\u0161\u00edmi tvary a barvami. Zm\u011bny uvid\u00edte jak p\u0159\u00edmo v editoru, tak i cel\u00e9m IDE. Podle na\u0161eho n\u00e1zoru t\u00edm PyCharm z\u00edskal fantastick\u00fd face-lift:<\/p>\n

    \"Ikony<\/figure>\n

    Breakpoints jsou nyn\u00ed um\u00edst\u011bny p\u0159es \u010d\u00edsla \u0159\u00e1dk\u016f, co\u017e \u0161et\u0159\u00ed prostor ve vodorovn\u00e9m sm\u011bru:<\/p>\n

    \"Nastaven\u00ed<\/figure>\n

    Pokud naopak d\u00e1v\u00e1te p\u0159ednost tomu, aby byly breakpoints vedle \u010d\u00edsel \u0159\u00e1dk\u016f, m\u016f\u017eete prav\u00fdm tla\u010d\u00edtkem my\u0161i kliknout do mezery a vybrat mo\u017enost Appearance<\/em> > Breakpoints Over Line Numbers<\/em>.<\/p>\n

    Aktualizov\u00e1na byla i barevn\u00e1 paleta pro anotace pro Git Blame<\/em>. \u010c\u00edm je odst\u00edn sv\u011btlej\u0161\u00ed, t\u00edm je zm\u011bna star\u0161\u00ed. Naopak \u010d\u00edm je odst\u00edn tmav\u0161\u00ed, t\u00edm je zm\u011bna nov\u011bj\u0161\u00ed:<\/p>\n

    \"Anotace<\/figure>\n

    P\u0159ehled<\/h2>\n

    A kone\u010dn\u011b, tento blogov\u00fd p\u0159\u00edsp\u011bvek by nebyl \u00fapln\u00fd, kdybychom se nezm\u00ednili o tom, pro\u010d jsme vlastn\u011b rozhran\u00ed prost\u0159ed\u00ed JetBrains IDE aktualizovali. B\u011bhem posledn\u00edch n\u011bkolika let jsme od na\u0161ich u\u017eivatel\u016f z\u00edskali spoustu zp\u011btn\u00e9 vazby a zjistili jsme, \u017ee na\u0161e sou\u010dasn\u00e9 (klasick\u00e9) u\u017eivatelsk\u00e9 rozhran\u00ed je spojov\u00e1no se slovy jako p\u0159ecpan\u00e9<\/em>, zastaral\u00e9<\/em> a vizu\u00e1ln\u011b nep\u0159ita\u017eliv\u00e9<\/em>. <\/p>\n

    Bylo tedy jasn\u00e9, \u017ee na\u0161e u\u017eivatelsk\u00e9 rozhran\u00ed mus\u00edme vylep\u0161it, jen\u017ee ot\u00e1zkou bylo, jak to pojmout? V z\u00e1sad\u011b jsme za\u010dali implementac\u00ed sch\u00e9mat, o kter\u00fdch jsme psali v tomto p\u0159\u00edsp\u011bvku. N\u00e1sledn\u011b jsme provedli n\u011bkolik kol rigor\u00f3zn\u00edch intern\u00edch a extern\u00edch kontroln\u00edch cykl\u016f a na z\u00e1klad\u011b va\u0161\u00ed zp\u011btn\u00e9 vazby jsme pak nov\u00e9 u\u017eivatelsk\u00e9 rozhran\u00ed aktualizovali. <\/p>\n

    A to je pro dne\u0161ek v\u0161echno. Douf\u00e1me, \u017ee jsme v\u00e1s p\u0159esv\u011bd\u010dili, abyste nov\u00e9 u\u017eivatelsk\u00e9 rozhran\u00ed vyzkou\u0161eli, a \u017ee si ho zamilujete stejn\u011b jako my! Nezapome\u0148te, \u017ee nov\u00e9 u\u017eivatelsk\u00e9 rozhran\u00ed m\u016f\u017eete zapnout v kole\u010dku Settings<\/em> v lev\u00e9m horn\u00edm rohu okna IDE. V Settings<\/em> najdete odkaz, pomoc\u00ed kter\u00e9ho se s n\u00e1mi m\u016f\u017eete pod\u011blit o svou zp\u011btnou vazbu!<\/p>\n","protected":false},"author":1229,"featured_media":359113,"comment_status":"closed","ping_status":"closed","template":"","categories":[1401,601],"tags":[6992],"cross-post-tag":[],"acf":[],"_links":{"self":[{"href":"https:\/\/blog.jetbrains.com\/cs\/wp-json\/wp\/v2\/pycharm\/372806"}],"collection":[{"href":"https:\/\/blog.jetbrains.com\/cs\/wp-json\/wp\/v2\/pycharm"}],"about":[{"href":"https:\/\/blog.jetbrains.com\/cs\/wp-json\/wp\/v2\/types\/pycharm"}],"author":[{"embeddable":true,"href":"https:\/\/blog.jetbrains.com\/cs\/wp-json\/wp\/v2\/users\/1229"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.jetbrains.com\/cs\/wp-json\/wp\/v2\/comments?post=372806"}],"version-history":[{"count":2,"href":"https:\/\/blog.jetbrains.com\/cs\/wp-json\/wp\/v2\/pycharm\/372806\/revisions"}],"predecessor-version":[{"id":372808,"href":"https:\/\/blog.jetbrains.com\/cs\/wp-json\/wp\/v2\/pycharm\/372806\/revisions\/372808"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.jetbrains.com\/cs\/wp-json\/wp\/v2\/media\/359113"}],"wp:attachment":[{"href":"https:\/\/blog.jetbrains.com\/cs\/wp-json\/wp\/v2\/media?parent=372806"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/cs\/wp-json\/wp\/v2\/categories?post=372806"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/cs\/wp-json\/wp\/v2\/tags?post=372806"},{"taxonomy":"cross-post-tag","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/cs\/wp-json\/wp\/v2\/cross-post-tag?post=372806"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}