# &kopete; vestlusakna stiili juhised

## &kopete; vestlusakna stiili tutvustus

Alates &kopete; versioonist 0.12 kasutame vestlusaknas Adiumi vormingut. Selle vormingu aluseks on HTML-mallid ja CSS. Nende loomine ja arendamine on üsna lihtne, vajalikud on ainult teadmised HTML-ist ja CSS-ist. Samuti võivad stiilidel olla variandid (mida kirjeldavad CSS-failid), mis võimaldavad kõike veel paremini kohandada.

### Tutvustus

Adiumi vorming koosneb kataloogistruktuuris, HTML-mallidest, CSS-failidest ja võtmesõnadest, mis asendatakse iga kord, kui malli töödeldakse. Lõppteisenduseks on XHTML-lehekülg, kuhu sõnumeid lisatakse DOM-operatsioonidega. Keskne element on div-element nimetusega `Chat`. Enne ja pärast div-elementi on mallid Header ja Footer. Sõnumid on div-elemendi `Chat` järglased.

#### Kataloogistruktuur

Stiil peab järgima kataloogistruktuuri. &kopete; koodi keskmes seisabki just see kataloogistruktuur. Stiili arhiveerides arhiveeri kataloog `styleName`. Kataloogistruktuur on Mac OS X komplekti struktuur, mis peaks ütlema midagi vähemalt neile, kes seda süsteemi tunnevad. Samuti tuleb järgida siinset tähesuurust, sest UNIX-süsteemid on tõstutundlikud.

    styleName\ (can have .adiumMessageStyle as suffix, because in Mac OS X it is a bundle)
            Contents\
                    Info.plist
                    Resources\
                            main.css
                            Header.html
                            Footer.html
                            Status.html
                            Incoming\ (and Outgoing\)
                                    Content.html
                                    NextContent.html (for consecutive messages)
                                    Context.html (for message history)
                                    NextContext.html
                                    Action.html
                            Variants\
                                    *.css

#### <div id="insert"></div> kohta

See on spetsiaalne seesmiselt kasutatav div-element. See on kohatäitja, mis osutab sellele, kuhu lisada järgmine sõnum. Kui tegemist on uue sõnumiga, see eemaldatakse ja selle asemele tuleb uus sõnum. Kui aga tegu on järgsõnumiga, asendatakse div-element uue sõnumi sisuga. See spetsiaalne div-element on nõutav mallides Content, Context, NextContent ja NextContext. Samuti ei tee paha lisada see ka malli Action ja Status.

#### HTML-mallid

##### Mallide kirjeldus

`Header.html` (nõutav)

  Malliga Header saab lasta kuvada vestluse kena päist. See mall lisatakse enne div-elementi `Chat`. Kui sa seda ei kasuta, lisa lihtsalt tühi fail.

`Footer.html` (nõutav)

  See on põhimõtteliselt sama, mis Header, ainult et vestluse jaluse jaoks. See mall lisatakse pärast div-elementi `Chat`. Kui sa seda ei kasuta, lisa lihtsalt tühi fail.

`Status.html` (nõutav)

  Seda malli ksutatakse sisemise sõnumi kuvamiseks. Sisemised sõnumid on näiteks olekumuutused või Kopete sõnumid (nt: keegi tahab sulle faili saata). Kui stiil ei toeta malli Action, kasutatakse seda Action sõnumi kuvamiseks.

`Incoming/Content.html`
`Outgoing/Content.html` (nõutav)

  Sisumall on sõnumi tuum. See on nagu plokk, mis hõlmab sõnumeid. Kontrolli, et see oleks valmis vastu võtma järgsõnumeid, ära loo seda ainult ühe sõnumi kuvamiseks. Järgsõnumid lisatakse div insert elemendi juurde.

`Incoming/NextContent.html`
`Outgoing/NextContent.html` (nõutav)

  Mall NextContent on järgsõnumite sõnumifragment. See lisatakse peamisse sõnumiplokki. HTML-mall peab sõnumi kuvamiseks seda sisaldama.

`Incoming/Action.html`
`Outgoing/Action.html` (pole nõutav) (&kopete; laiend)

  See mall on Adiumi vormingu &kopete; laiend. See on saadaval nii sisenevas kui väljuvas suunas. Toimingusõnumid on spetsiaalsed sõnumid, mis annavad teada, et võetakse ette mingi toiming. Näide: "/me paigaldab &kopete;t" kuvatakse kujul "DarkShock paigaldab &kopete;t".

`Incoming/Context.html`
`Incoming/NextContext.html`
`Outgoing/Context.html`
`Outgoing/NextContext.html` (pole nõutav)

  Kopete neid malle ei kasuta. Adiumis kasutatakse neid ajaloo kuvamiseks. Üldiselt on need samad, mis Content ja NextContent, aga teatud erinevustega, et neid saaks eristada tavalistest sõnumitest.

#### CSS-stiilidest ja variantidest

HTML-mall kirjeldab struktuuri olemust. Kuid kogu stiili kirjeldavad CSS-failid. `main.css` kirjeldab põhistiili, variandid aga selle variante. Variantideks on näiteks teistsuguste värvide kasutamine või kasutaja foto mittenäitamine. Nii `main.css` kui ka variandid imporditakse lõplikule XHTML-leheküljele.

##### `main.css`

See on peamine CSS-fail, mis on ühine kõigile variantidele. See fail peab sisaldama kogu stiili põhikirjeldust.

##### Variandid

Variandid on CSS-failid, mis paiknevad kataloogis `Variants`. Iga variant on omaette CSS-fail, mis kaasab faili `main.css` ja teeb põhistiili muudatusi.

#### Stiilide silumine

Kaks vihjet stiili testimise kohta selle loomisel.

##### Näidisvestluse salvestamine

Vestlusaknas saab vestluse salvestada. See on kuvatava XHTML-lehekülje koopia. Kasuta seda Konqueroris oma CSS-failide testimiseks.

##### Stiilipuhvri keelamine

Stiilipuhvri saab keelata väikese seadistuslülitiga. Kui see on lubatud, laaditakse HTML-mallid iga kord, kui stiili kasutada soovitakse. Lisa järgmised read faili `kopeterc`. See on väga kasulik &kopete; stiili testimisel.

    [KopeteStyleDebug]
    disableStyleCache=true

### Võtmesõnade kirjeldus

Võtmesõnad on nagu augud, mis täidetakse sisuga. Iga uue sõnumi korral asendatakse need vastavalt kontekstile korrektsete väärtustega. Kopete kõigi võimaluste täielikuks ärakasutamiseks oleme lisanud Adiumile mõned omapoolsed laiendid. Mõned võtmesõnad on saadaval ainult kindlas kontekstis.

#### Mallide Header ja Footer võtmesõnade loend

neid võtmesõnu töödeldakse vestluse alguses.

`%chatName%`

  See on aktiivse vestlusseansi nimi. Tüüpilise seansi korral kuvab see kontakti nime ja olekut. IRC korral kuvatakse kanali teemat.

`%sourceName%`
`%destinationName%`

  Need on vestlusseansi kontaktide nimed. `%sourceName%` on sinu nimi, `%destinationName%` kontakti nimi, kellega vestled. Neile tuleks eelistada `%chatName%`, sest need võivad tekitada segadust jututubade ja IRC korral.

`%incomingIconPath%`
`%outgoingIconPath%`

  Need on vestlusseansi kontaktide pildid/fotod/avatarid. Sisenev tähistab kontakti fotot, väljuv sinu enda oma. Kui fotot pole saadaval, kasutatakse pilti `buddy_icon.png`, mis asub kataloogis `Incoming` või `Outgoing`.

`%timeOpened%`
`%timeOpened{X}%`

  See on vestlusseansi alguse aeg. `%timeOpened%` kasutab aktiivse lokaadi vaikimisi ajavormingut. Kui soovid kasutada mõnda konkreetset ajavormingut, kasuta `%timeOpened{X}%`, kus X on ajavormingut sisaldav string. Ajaparameetrid on samad, mis glibc'i funktsioonis `strftime`. Saadaolevaid parameetreid näeb käsuga `man strftime`.

#### Mallide Content, NextContent, Context, NextContext ja Action võtmesõnade loend

Neid võtmesõnu töödeldakse iga sõnumi korral.

`%userIconPath%`

  See on sõnumiga seotud kontakti pilt/foto/avatar. Kui fotot pole saadaval, kasutatakse pilti `buddy_icon.png`, mis asub sõltuvalt sõnumi suunast kataloogis `Incoming` või `Outgoing`.

`%senderScreenName%`

  See on sõnumiga seotud kontakti ID. Näited: mina@hotmail.com, 45566576, JohnSmith.

`%sender%`

  See on sõnumiga seotud kontakti nimi. See kasutab allikana metakontakti näidatavat nime.

`%service%`

  See kuvab sõnumiga seotud teenuse nime. Näited: Jabber, Yahoo, MSN.

`%textbackgroundcolor{X}%`

  &kopete; kasutab seda võtmesõna esiletõstu taustavärvi tähistamiseks. Ignoreeri sulgudes olevat parameetrit ja kasuta seda kujul `%textbackgroundcolor{}`.

`%senderStatusIcon%` (&kopete; laiend)

  Kuvab sõnumiga seotud kontakti oleku ikooni. See on faili asukoht.

`%senderColor%`
`%senderColor{N}%` (&kopete; laiend)

  Genereerib saatja kontakti ID-st värvi. Seda saab kasutada kontakti hüüdnime erineva värviga kuvamiseks.

  `%senderColor{N}%`, kus N on positiivne arv. Kui N on suurem kui 100, tähistab see kontakti värvist heledamat värvi. Kui N on 150, on see 50 protsenti heledam värv. Kui N on alla 100, on see tumedam värv. See on kasulik iga kontakti tausta erineva värviga kuvamiseks.

  Kui soovid kasutada neid värve variandis, aga mitte põhistiilis, on ka see võimalik.

      <div style="color:%senderColor%;border:none;border-color:%senderColor{40}%;"
      ><p class="message"
      >...</p
      ></div>

  Võid rakendada värvi või p.message elemendi failis `main.css` ja lisada varianti midagi sellist

      p.message { color:inherit; border-color:inherit; }

#### Sõnumite ja Status.html ühiste võtmesõnade loend

`%message%`

  Sõnum ise. See on HTML-fragment.

`%time%`
`%time{X}%`

  Sõnumi saamise aeg. `%time%` kasutab aktiivse lokaadi vaikimisi ajavormingut. Kui soovid kasutada mõnda konkreetset ajavormingut, kasuta `%time{X}%`, kus X on ajavormingut sisaldav string. Ajaparameetrid on samad, mis glibc'i funktsioonis `strftime`. Saadaolevaid parameetreid näeb käsuga `man strftime`.

`%messageDirection%` (&kopete; laiend)

  Tähistab sõnumi suunda, kui sõnumit tuleb esitada paremalt vasakule või vasakult paremale. Väärtused on kas "rtl" või "ltr". Võtmesõna korrektset kasutamist tutvustab lõik Sõnumi suund.

## &kopete; vestlusakna stiili juhend

&kopete; vestlusakna juhend kujutab endast mõningate asjade kogumit, mida sinu vestlusakna stiil peab toetama, et vastata Kopete nõuetele.

### Esiletõstu toetus

Sinu stiil peab näitama esiletõstu. Kopetes ja Adiumis asendatakse `%textbackgroundcolor{}%` esiletõstu värviga. Lisa stiili atribuut: `background-color: %textbackgroundcolor{}%` HTML-elemendile, mis kuvab sõnumit.

### Järgsõnumite mallide vajalikkus

See juhend on mõeldud isikutele, kes kirjutavad vanu XSL-stiile ümber uude vormingusse. Kõik stiilid peavad sisaldama malli järgsõnumite jaoks. See on nüüd vaikimisi omadus.

### UTF-8 kodeeringu kasutamine

Pealkiri ütleb kõik: failid tuleb salvestada kodeeringus UTF-8.

### `Contents/Info.plist` pakkumine ühildumiseks Adiumiga

Kopete ei kasuta veel faili `Contents/Info.plist`. Aga kui soovid, et sinu stiil ühilduks Adiumiga, tuleb see fail lisada. Toome siin elementaarse näidise. Asendatavaid stringe ümbritseb "$".

    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE plist PUBLIC "-//Apple Computer//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
    <plist version="1.0">
    <dict>
            <key
    >CFBundleDevelopmentRegion</key>
            <string
    >English</string>
            <key
    >CFBundleGetInfoString</key>
            <string
    >$Your style full name$</string>
            <key
    >CFBundleIdentifier</key>
            <string
    >$Your style ID in the form: com.adiumx.smooth.operator.style$</string>
            <key
    >CFBundleInfoDictionaryVersion</key>
            <string
    >1.0</string>
            <key
    >CFBundleName</key>
            <string
    >$Your style name here$</string>
            <key
    >CFBundlePackageType</key>
            <string
    >AdIM</string>
            <key
    >MessageViewVersion</key>
            <integer
    >3</integer>
    </dict>
    </plist>

### `buddy_icon.png` pakkumine

Fail `buddy_icon.png` tuleb asetada kataloogi `Incoming` ja `Outgoing`. Neid pilte kasutatakse siis, kui kontaktil puudub foto.

### Paremalt vasakule kirjutatavate keelte toetus võtmesõnaga `%messageDirection%`

Võtmesõna `%messageDirection%` on mõeldud keeltele, milles kirjutatakse paremalt vasakule. See määrab sõnumi suuna, väärtusteks on "rtl" (paremalt vasakule) või "ltr" (vasakult paremale). Lisa see stiiliatribuut HTML-elemendile, mis kuvab sõnumit: `direction: %messageDirection%`. Stiili eelvaatlus seadistustes sisaldab paremalt vasakule näidist, mis võimaldab kontrollida, kas stiil kuvab seda õigesti. Sel juhul peab string algama paremalt.